New Example - PurchaseTester TypeScript #320

joshdholtz · 2021-12-28T16:03:21Z

Description

This adds a new ReactNative TypeScript example. It can be used to test almost all of features from the ReactNative Purchases SDK. There are a few screens in this app:

Overview
- View User ID and active entitlements
- View all offerings
- Login and logout users
- Purchase package by Product ID
- Redeem code (on iOS)
Customer Details
- View all properties on an Customer/Purchaser
- View all entitlements
- View all transactions
Offer Details
- Offer description and identifier
- List and purchase packages

Other Bits

Updated CircleCI config to builds this new example project for iOS and Android
Updated package.json so both projects work with yarn bootstrap
Open PR on react native circle ci orb for yarn install directory
- yarn_install - add optional yarn_install_directory parameter react-native-community/react-native-circleci-orb#124

How to use

Set RevenueCat API Keys in APIKeys.tsx
- App will show directions to change this file if they aren't set
Possibly change app identifier or package
Possibly update StoreKit Configuration File
Run

Requirements

Must have
- The app must be in TypeScript
- Make contents of CustomerInfo easier to explore
- Make contents of Offerings easier to explore
- Make purchases and view detailed status for offerings
- Log in / log out with a given username
Nice to have
- Set arbitrary subscriber attributes (implemented but didn't seem to do anything 😔)
- ~~Show RevenueCat logs on screen (you can use Purchases.setLogHandler)~~ (not possible with SDK)
- StoreKitTest Config file support
Can wait
- Add support for promo codes
- Make purchases by entering product id
- ~~Logging backend requests / responses~~ (not possible with SDK I think)

Demo

iOS (Simulator)

RocketSim_Recording_iPod_touch_.7th_generation._2021-12-28_09.54.47.mp4

Android (Emulator)

Screen.Recording.2021-12-28.at.5.27.04.PM.mov

vegaro · 2021-12-29T08:34:25Z

.circleci/config.yml

+      - run:
+          command: >-
+            yarn --cwd examples/purchaseTesterTypescript && yarn install --non-interactive --cache-folder /tmp/yarn
+          name: Yarn Install (examples/purchaseTesterTypescript)
      # - save_cache:
      #     key: >
      #       yarn-cache-{{ arch }}-{{ checksum "~/.tmp/checksumfiles/package.json"


Looks like someone managed to fix it? react-native-community/react-native-circleci-orb#66 (comment) It would be amazing you have some time and can try re-enabling this since running these jobs take forever and this can save us some time.

Here it is! Had to re-run the tests to show that the cache worked 😊

vegaro · 2021-12-29T08:39:00Z

.circleci/config.yml

+          derived_data_path: ~/DerivedData
+          project_type: workspace
+          project_path: examples/purchaseTesterTypescript/ios/PurchaseTester.xcworkspace
+          scheme: PurchaseTester


I wonder if we need to build both apps. Running one takes already very long. I am all for just doing one, preferably the new one you just created. Also, I understand we want to keep both tester apps because one is JS and the other one is TS, but the JS one is so bad... maybe we could just simplify it even more than it is now and keep it as a barebones app where we can test the API. What do you think?

Yeah yeah, this takes super long 😱 I agree that running the typescript one probably makes the most sense. I think more issues could come out of that one than the javascript one.

maybe we could just simplify it even more than it is now and keep it as a barebones app where we can test the API. What do you think?

Are you referring to the javascript one? ☝️

@vegaro do you mean turning the javascript app into an API tester?

examples/purchaseTesterTypescript/app/screens/HomeScreen.tsx

vegaro · 2021-12-29T08:43:29Z

examples/purchaseTesterTypescript/app/screens/HomeScreen.tsx

+  const [state, setState] = useState(initialState);
+
+  // The functional way of componentDidMount
+  useEffect(() => {


👨‍🍳

vegaro · 2021-12-29T08:45:12Z

examples/purchaseTesterTypescript/app/screens/HomeScreen.tsx

+  const makePurchase = async () => {
+    Alert.prompt(
+      "Purchase Product",
+      "Enter Product ID for purchasing",


Oh this is great

examples/purchaseTesterTypescript/ios/Configuration.storekit

vegaro · 2021-12-29T08:54:50Z

examples/purchaseTesterTypescript/package.json

+    "@react-navigation/native-stack": "^6.2.5",
+    "react": "17.0.2",
+    "react-native": "0.66.4",
+    "react-native-purchases": "^4.5.0",


Since this is a tester app, I think it should point to the local version of the plugin, that way it can be used while developing a new feature to test the TypeScript APIs. PurchaseTester apps don't represent the intended usage of our plugin and we use them for development. We have MagicWeather as an example of how a real app looks and that one points to the npm package (although we always forget to update it and it's still pointing to 4.0.0 😮‍💨 ).

I don't remember how we set it up, but if you look in the purchaseTester/package.json, there's no reference to react-native-purchases. The package is linked tho (take a look at the podfile and the settings.gradle). So I think it's getting the JS files in metro.config.js and babel.config.js, because we have const pak = require('../../package.json'); in those files. This https://arjun30.medium.com/manually-adding-local-library-project-to-reactnative-app-711818dafb79 may be what we did 🤔 , but it took as a while to get to a working setup that didn't involve re-adding the plugin to the sample every time the plugin code is updated. Let me know if you have any questions regarding this.

@vegaro ~~Thoughts on doing this in a separate PR? 😁 I started messing around with this and it got weird 😛 I think it would be nice to see a separate diff and for historical purposes 🤷‍♂️~~

Scratch that. I'm so close to getting this working 🤔

aboedo · 2021-12-29T17:23:51Z

awesome!! question: do we need to have the package-lock.json file versioned?
javascript lock files have been a little hard to manage since we start getting constant dependabot warnings and they're huge

joshdholtz · 2022-01-03T11:18:11Z

awesome!! question: do we need to have the package-lock.json file versioned?
javascript lock files have been a little hard to manage since we start getting constant dependabot warnings and they're huge

We do not need to have that in there 😇 I thought I deleted that but I guess not 😛

… RC init to app.tsx

joshdholtz · 2022-01-04T21:29:46Z

The ReactNative orb changes got merged in 💪 react-native-community/react-native-circleci-orb#124

6.1.0 has the yarn_install_directory changes 👉 https://circleci.com/developer/orbs/orb/react-native-community/react-native

beylmk · 2022-01-04T23:19:48Z

.circleci/config.yml

-      - save_cache:
-          paths:
-            - examples/purchaseTester/ios/Pods
-          key: cache-pods-{{ checksum "examples/purchaseTester/ios/Podfile.lock" }}-{{ .Environment.CACHE_VERSION }}

 jobs:
  analyse_js:


should we rename this now that it's not just js?

I started to rename this to just analyse but it then made it unclear what layer it was analyzing 🤔 Even though its not 100% correct and TypeScript is a superset of JavaScript, I think it feels less worse this way 😅

how about analyze_ts_and_js or analyze_ts_js? I usually go overly explicit even if it becomes verbose

beylmk · 2022-01-04T23:21:32Z

.gitignore

@@ -9,6 +9,7 @@ node_modules/
 npm-debug.log
 yarn-error.log
 **/yarn.lock
+**/package-lock.json


beylmk · 2022-01-04T23:24:08Z

examples/purchaseTesterTypescript/.buckconfig

@@ -0,0 +1,6 @@
+


idk if this kinda file is common knowledge for RN developers (and maybe ignore me if so), but could we add a comment on what this does for us?

beylmk · 2022-01-04T23:27:15Z

examples/purchaseTesterTypescript/App.tsx

+const Stack = createNativeStackNavigator();
+
+const App = () => {
+  const isSetup = () => {


this is nitpicky, but could we rename to something like hasKeys? just since setup is now a little overloaded... isSetup could also mean whether Purchases is configured

This is a much better name 😊 Love it!

beylmk · 2022-01-04T23:28:06Z

examples/purchaseTesterTypescript/App.tsx

+  return !isSetup() ? (
+      <SafeAreaView>
+        <Text style={{margin: 20, textAlign: 'center'}}>
+          Update RevenueCat API Keys in APIKeys.tsx
+        </Text>
+      </SafeAreaView>
+    ) : (
+      <NavigationContainer>
+        <Stack.Navigator  initialRouteName="Home">
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+            options={{ title: 'PurchaseTester' }}
+          />
+          <Stack.Screen name="CustomerInfo" component={CustomerInfoScreen} />
+          <Stack.Screen name="OfferingDetail" component={OfferingDetailScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>


i love this, we should definitely consider in the other platforms. of course well get a configuration error, but if you can't view debug logs you might not know

beylmk · 2022-01-04T23:28:36Z

examples/purchaseTesterTypescript/android/app/_BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).


oh, ignore above comment about the buck file :)

* This works so much better for local testing * Updated comments to be more helpful * Fixed typo * Need to await the initial fetchData

…k config file

joshdholtz · 2022-01-12T01:00:16Z

I think this is ready for the final review if anybody has time 😊

beylmk · 2022-01-12T18:15:02Z

examples/purchaseTesterTypescript/App.tsx

@@ -26,12 +26,12 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 const Stack = createNativeStackNavigator();

 const App = () => {
-  const isSetup = () => {
+  const hasKeys = () => {


beylmk · 2022-01-12T18:17:13Z

examples/purchaseTesterTypescript/metro.config.js

-    }),
-  },
-};
+// IMPORTANT


do you mind updating our notion docs here once this is merged?

beylmk

🥳 thanks for not only making a 🔥 sample app but for improving our development flow! i'll be dibs-ing some react-native tickets soon to get to really try it out :)

taquitos · 2022-01-13T01:36:27Z

🎈🐐

See #320 for the replacement.

Josh Holtz and others added 6 commits December 28, 2021 06:09

Initial commit of purchaseTester typescript example

b5165d3

Made things a little prettier for offering detail

7d74043

Removed console log

64df393

Typescript example using local RNPurchases pod

bfbf128

Fix some things were states weren't updating

e29289a

Trying to fix CircleCI

2d8685e

joshdholtz force-pushed the purchase-tester-typescript branch from e679d76 to 2d8685e Compare December 28, 2021 17:06

joshdholtz added 3 commits December 28, 2021 17:29

This is it

c3a1f54

name isn't a thing for the RN builds

cc86f42

name also isn't a thing for iOS RN builds

e88abde

joshdholtz requested a review from a team December 28, 2021 23:40

joshdholtz added 3 commits December 28, 2021 18:05

Add set attributes which isnt really working yet

b69a88a

Fix broken test

4e052af

Fix broken test... again

2239b1d

vegaro reviewed Dec 29, 2021

View reviewed changes

joshdholtz added 3 commits January 3, 2022 05:50

Ignore package-lock.json, try using rn/yarn_install on circleci, move…

42ef1b7

… RC init to app.tsx

Trying to get yarn_install to run in the example directory

1cd69fc

Change yarn cache folder

60735a0

joshdholtz force-pushed the purchase-tester-typescript branch 7 times, most recently from c3e669a to 958892f Compare January 3, 2022 12:34

Try bringing in the yarn install from the orb for testing

f238ce8

joshdholtz force-pushed the purchase-tester-typescript branch from 958892f to f238ce8 Compare January 3, 2022 12:36

Try yarn cwd before calling rn/yarn_install

9f7b4d9

Use conditional logic and use --cwd if not empty string

d45adc2

joshdholtz force-pushed the purchase-tester-typescript branch from b00cb33 to d45adc2 Compare January 3, 2022 19:36

Rename to use standard revenuecat tester package and bundle id

f9b5e97

joshdholtz requested a review from vegaro January 4, 2022 02:28

joshdholtz force-pushed the purchase-tester-typescript branch from 2109d4f to 3e0890b Compare January 4, 2022 21:13

Bump to react-native-community/[email protected]

74810a5

joshdholtz force-pushed the purchase-tester-typescript branch from 3e0890b to 74810a5 Compare January 4, 2022 21:14

beylmk reviewed Jan 4, 2022

View reviewed changes

.gitignore

@@ -9,6 +9,7 @@ node_modules/

npm-debug.log

yarn-error.log

**/yarn.lock

**/package-lock.json

Copy link

Contributor

beylmk Jan 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

beylmk reviewed Jan 4, 2022

View reviewed changes

Rename isSetup to hasKeys

422a4f2

joshdholtz mentioned this pull request Jan 6, 2022

Setup local testing for PurchaseTester Typescript #326

Merged

joshdholtz requested review from beylmk and aboedo January 7, 2022 16:14

joshdholtz added 2 commits January 11, 2022 07:50

Setup local testing for PurchaseTester Typescript (#326)

8843578

* This works so much better for local testing * Updated comments to be more helpful * Fixed typo * Need to await the initial fetchData

Rename storekit config file and add second target that does not use s…

01e36e9

…k config file

beylmk reviewed Jan 12, 2022

View reviewed changes

beylmk approved these changes Jan 12, 2022

View reviewed changes

joshdholtz merged commit a90ea99 into main Jan 13, 2022

joshdholtz deleted the purchase-tester-typescript branch January 13, 2022 01:31

NachoSoto added a commit that referenced this pull request Jul 8, 2022

Removed outdated PurchaseTester

f3bfca3

See #320 for the replacement.

NachoSoto mentioned this pull request Jul 8, 2022

Removed outdated PurchaseTester #364

Merged

NachoSoto added a commit that referenced this pull request Jul 8, 2022

Removed outdated PurchaseTester (#364)

d3e6f8f

See #320 for the replacement.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Example - PurchaseTester TypeScript #320

New Example - PurchaseTester TypeScript #320

joshdholtz commented Dec 28, 2021 •

edited

Loading

vegaro Dec 29, 2021

joshdholtz Jan 3, 2022

vegaro Dec 29, 2021

joshdholtz Jan 3, 2022

aboedo Jan 7, 2022

vegaro Dec 29, 2021

vegaro Dec 29, 2021

vegaro Dec 29, 2021

joshdholtz Jan 4, 2022 •

edited

Loading

aboedo commented Dec 29, 2021

joshdholtz commented Jan 3, 2022

joshdholtz commented Jan 4, 2022

beylmk Jan 4, 2022

joshdholtz Jan 5, 2022

aboedo Jan 7, 2022 •

edited

Loading

beylmk Jan 4, 2022

beylmk Jan 4, 2022

beylmk Jan 4, 2022

joshdholtz Jan 5, 2022

beylmk Jan 4, 2022

beylmk Jan 4, 2022

joshdholtz commented Jan 12, 2022

beylmk Jan 12, 2022

beylmk Jan 12, 2022

beylmk left a comment

taquitos commented Jan 13, 2022

		@@ -0,0 +1,55 @@
		# To learn about Buck see [Docs](https://buckbuild.com/).

New Example - PurchaseTester TypeScript #320

New Example - PurchaseTester TypeScript #320

Conversation

joshdholtz commented Dec 28, 2021 • edited Loading

Description

Other Bits

How to use

Requirements

Demo

iOS (Simulator)

Android (Emulator)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshdholtz Jan 4, 2022 • edited Loading

Choose a reason for hiding this comment

aboedo commented Dec 29, 2021

joshdholtz commented Jan 3, 2022

joshdholtz commented Jan 4, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aboedo Jan 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshdholtz commented Jan 12, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beylmk left a comment

Choose a reason for hiding this comment

taquitos commented Jan 13, 2022

joshdholtz commented Dec 28, 2021 •

edited

Loading

joshdholtz Jan 4, 2022 •

edited

Loading

aboedo Jan 7, 2022 •

edited

Loading