[PAY-1943] Separate feature flag for IOS USDC Purchase (#6478)

AudiusProject · Oct 26, 2023 · e5de495 · e5de495
1 parent 7fab506
commit e5de495
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 6 deletions.
diff --git a/packages/common/src/services/remote-config/feature-flags.ts b/packages/common/src/services/remote-config/feature-flags.ts
@@ -51,7 +51,8 @@ export enum FeatureFlags {
   NEW_PLAYLIST_ROUTES = 'new_playlist_routes',
   DISCOVERY_RELAY = 'discovery_relay',
   SIGN_UP_REDESIGN = 'sign_up_redesign',
-  FEATURE_FLAG_ACCESS = 'feature_flag_access'
+  FEATURE_FLAG_ACCESS = 'feature_flag_access',
+  IOS_USDC_PURCHASE_ENABLED = 'ios_usdc_purchase_enabled'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -118,5 +119,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.NEW_PLAYLIST_ROUTES]: false,
   [FeatureFlags.DISCOVERY_RELAY]: false,
   [FeatureFlags.SIGN_UP_REDESIGN]: false,
-  [FeatureFlags.FEATURE_FLAG_ACCESS]: false
+  [FeatureFlags.FEATURE_FLAG_ACCESS]: false,
+  [FeatureFlags.IOS_USDC_PURCHASE_ENABLED]: true
 }
diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx
@@ -5,6 +5,7 @@ import type {
   PurchaseContentError
 } from '@audius/common'
 import {
+  FeatureFlags,
   PurchaseContentStage,
   formatPrice,
   isContentPurchaseInProgress,
@@ -18,7 +19,13 @@ import {
   usePurchaseContentFormConfiguration
 } from '@audius/common'
 import { Formik, useFormikContext } from 'formik'
-import { Linking, View, ScrollView, TouchableOpacity } from 'react-native'
+import {
+  Linking,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Platform
+} from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
@@ -30,7 +37,7 @@ import { NativeDrawer } from 'app/components/drawer'
 import { useDrawer } from 'app/hooks/useDrawer'
 import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useRemoteVar } from 'app/hooks/useRemoteConfig'
+import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
@@ -42,6 +49,7 @@ import { AudioMatchSection } from './AudioMatchSection'
 import { PayExtraFormSection } from './PayExtraFormSection'
 import { PurchaseSuccess } from './PurchaseSuccess'
 import { PurchaseSummaryTable } from './PurchaseSummaryTable'
+import { PurchaseUnavailable } from './PurchaseUnavailable'
 import { usePurchaseContentFormState } from './hooks/usePurchaseContentFormState'
 
 const { getPurchaseContentFlowStage, getPurchaseContentError } =
@@ -200,6 +208,10 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
   const styles = useStyles()
   const { specialLightGreen, secondary } = useThemeColors()
   const presetValues = usePayExtraPresets(useRemoteVar)
+  const { isEnabled: isIOSUSDCPurchaseEnabled } = useFeatureFlag(
+    FeatureFlags.IOS_USDC_PURCHASE_ENABLED
+  )
+  const isIOSDisabled = Platform.OS === 'ios' && !isIOSUSDCPurchaseEnabled
 
   const { submitForm, resetForm } = useFormikContext()
 
@@ -250,7 +262,9 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
             {...purchaseSummaryValues}
             isPurchaseSuccessful={isPurchaseSuccessful}
           />
-          {isPurchaseSuccessful ? (
+          {isIOSDisabled ? (
+            <PurchaseUnavailable />
+          ) : isPurchaseSuccessful ? (
             <PurchaseSuccess track={track} />
           ) : (
             <View>
@@ -274,7 +288,7 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
           )}
         </View>
       </ScrollView>
-      {isPurchaseSuccessful ? null : (
+      {isPurchaseSuccessful || isIOSDisabled ? null : (
         <View style={styles.formActions}>
           {error ? <RenderError error={error} /> : null}
           <Button

diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseUnavailable.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseUnavailable.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { View } from 'react-native'
+
+import IconError from 'app/assets/images/iconError.svg'
+import { Text } from 'app/components/core'
+import { flexRowCentered, makeStyles } from 'app/styles'
+import { spacing } from 'app/styles/spacing'
+import { useColor } from 'app/utils/theme'
+
+const messages = {
+  unavailable:
+    "Unfortunately, you can't make purchases on this device. To continue, please use a desktop browser."
+}
+
+const useStyles = makeStyles(({ spacing, typography, palette }) => ({
+  container: {
+    ...flexRowCentered(),
+    width: '100%',
+    paddingHorizontal: spacing(3),
+    paddingVertical: spacing(4),
+    gap: spacing(4),
+    borderColor: palette.borderStrong,
+    borderRadius: spacing(2),
+    borderWidth: 1,
+    backgroundColor: palette.backgroundSurface2
+  },
+  textContainer: {
+    flexShrink: 1
+  },
+  disclaimer: {
+    lineHeight: 20
+  }
+}))
+
+export const PurchaseUnavailable = () => {
+  const styles = useStyles()
+  const neutral = useColor('neutral')
+
+  return (
+    <View style={styles.container}>
+      <IconError fill={neutral} width={spacing(6)} height={spacing(6)} />
+      <View style={styles.textContainer}>
+        <Text style={styles.disclaimer}>{messages.unavailable}</Text>
+      </View>
+    </View>
+  )
+}