[PAY-1982] Add AudioMatchSection in premium purchase modal/drawer (#6364

)

packages/mobile/src/components/premium-track-purchase-drawer/AudioMatchSection.tsx

@@ -0,0 +1,42 @@
+import { View } from 'react-native'
+
+import { makeStyles } from 'app/styles'
+
+import { Text } from '../core/Text'
+
+const useStyles = makeStyles(({ palette, spacing }) => ({
+  root: {
+    backgroundColor: palette.secondary,
+    border: palette.secondaryDark2,
+    paddingHorizontal: spacing(8),
+    paddingVertical: spacing(2)
+  },
+  text: {
+    textAlign: 'center'
+  }
+}))
+
+const messages = {
+  earn: (amount: number) => `Earn ${amount} $AUDIO when you buy this track!`
+}
+
+type AudioMatchSectionProps = {
+  amount: number
+}
+
+export const AudioMatchSection = ({ amount }: AudioMatchSectionProps) => {
+  const styles = useStyles()
+  return (
+    <View style={styles.root}>
+      <Text
+        style={styles.text}
+        variant='label'
+        textTransform='uppercase'
+        fontSize='large'
+        color='white'
+      >
+        {messages.earn(amount)}
+      </Text>
+    </View>
+  )
+}

packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx

@@ -33,6 +33,7 @@ import { useThemeColors } from 'app/utils/theme'
 import LoadingSpinner from '../loading-spinner/LoadingSpinner'
 import { TrackDetailsTile } from '../track-details-tile'
 
+import { AudioMatchSection } from './AudioMatchSection'
 import { PayExtraFormSection } from './PayExtraFormSection'
 import { PurchaseSuccess } from './PurchaseSuccess'
 import { PurchaseSummaryTable } from './PurchaseSummaryTable'
@@ -73,10 +74,13 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
     flex: 1
   },
   formContentContainer: {
-    paddingHorizontal: spacing(4),
     paddingVertical: spacing(6),
     gap: spacing(4)
   },
+  formContentSection: {
+    paddingHorizontal: spacing(4),
+    gap: spacing(4)
+  },
   formActions: {
     flex: 0,
     paddingTop: spacing(4),
@@ -202,33 +206,40 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
   return (
     <>
       <ScrollView contentContainerStyle={styles.formContentContainer}>
-        <TrackDetailsTile trackId={track.track_id} />
-        {isPurchaseSuccessful ? null : (
-          <PayExtraFormSection amountPresets={payExtraAmountPresetValues} />
-        )}
-        <PurchaseSummaryTable
-          {...purchaseSummaryValues}
-          isPurchaseSuccessful={isPurchaseSuccessful}
-        />
-        {isPurchaseSuccessful ? (
-          <PurchaseSuccess track={track} />
-        ) : (
-          <View>
-            <View style={styles.payToUnlockTitleContainer}>
-              <Text weight='heavy' textTransform='uppercase' fontSize='small'>
-                {messages.payToUnlock}
+        <View style={styles.formContentSection}>
+          <TrackDetailsTile trackId={track.track_id} />
+        </View>
+        {stage !== PurchaseContentStage.FINISH ? (
+          <AudioMatchSection amount={Math.round(price / 100)} />
+        ) : null}
+        <View style={styles.formContentSection}>
+          {isPurchaseSuccessful ? null : (
+            <PayExtraFormSection amountPresets={payExtraAmountPresetValues} />
+          )}
+          <PurchaseSummaryTable
+            {...purchaseSummaryValues}
+            isPurchaseSuccessful={isPurchaseSuccessful}
+          />
+          {isPurchaseSuccessful ? (
+            <PurchaseSuccess track={track} />
+          ) : (
+            <View>
+              <View style={styles.payToUnlockTitleContainer}>
+                <Text weight='heavy' textTransform='uppercase' fontSize='small'>
+                  {messages.payToUnlock}
+                </Text>
+                <LockedStatusBadge locked />
+              </View>
+              <Text style={styles.disclaimer}>
+                {messages.disclaimer(
+                  <Text colorValue={secondary} onPress={handleTermsPress}>
+                    {messages.termsOfUse}
+                  </Text>
+                )}
               </Text>
-              <LockedStatusBadge locked />
             </View>
-            <Text style={styles.disclaimer}>
-              {messages.disclaimer(
-                <Text colorValue={secondary} onPress={handleTermsPress}>
-                  {messages.termsOfUse}
-                </Text>
-              )}
-            </Text>
-          </View>
-        )}
+          )}
+        </View>
       </ScrollView>
       {isPurchaseSuccessful ? null : (
         <View style={styles.formActions}>

packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css

@@ -15,7 +15,13 @@
   justify-content: center;
 }
 
-.content > div:first-child {
+.content {
+  padding: var(--unit-6) 0 0;
+  gap: var(--unit-6);
+}
+
+.contentWrapper {
+  padding: 0 var(--unit-6) var(--unit-6);
   display: flex;
   flex-direction: column;
   gap: var(--unit-6);

packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx

@@ -28,6 +28,7 @@ import { isMobile } from 'utils/clientUtil'
 import { pushUniqueRoute } from 'utils/route'
 
 import styles from './PremiumContentPurchaseModal.module.css'
+import { AudioMatchSection } from './components/AudioMatchSection'
 import { PurchaseContentFormFields } from './components/PurchaseContentFormFields'
 import { PurchaseContentFormFooter } from './components/PurchaseContentFormFooter'
 import { usePurchaseContentFormState } from './hooks/usePurchaseContentFormState'
@@ -96,14 +97,21 @@ const RenderForm = ({
       </ModalHeader>
       <ModalContent className={styles.content}>
         <>
-          <LockedTrackDetailsTile
-            track={track as unknown as Track}
-            owner={track.user}
-          />
-          <PurchaseContentFormFields
-            stage={stage}
-            purchaseSummaryValues={purchaseSummaryValues}
-          />
+          <div className={styles.contentWrapper}>
+            <LockedTrackDetailsTile
+              track={track as unknown as Track}
+              owner={track.user}
+            />
+          </div>
+          {stage !== PurchaseContentStage.FINISH ? (
+            <AudioMatchSection amount={Math.round(price / 100)} />
+          ) : null}
+          <div className={styles.contentWrapper}>
+            <PurchaseContentFormFields
+              stage={stage}
+              purchaseSummaryValues={purchaseSummaryValues}
+            />
+          </div>
         </>
       </ModalContent>
       <ModalFooter className={styles.footer}>

packages/web/src/components/premium-content-purchase-modal/components/AudioMatchSection.module.css

@@ -0,0 +1,11 @@
+.root {
+  width: 100%;
+  display: flex;
+  padding: var(--unit-2) var(--unit-8);
+  margin-bottom: var(--unit-6);
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: 1px solid var(--secondary-dark-2);
+  background: var(--secondary);
+}

packages/web/src/components/premium-content-purchase-modal/components/AudioMatchSection.tsx

@@ -0,0 +1,21 @@
+import { Text } from 'components/typography'
+
+import styles from './AudioMatchSection.module.css'
+
+const messages = {
+  earn: (amount: number) => `Earn ${amount} $AUDIO when you buy this track!`
+}
+
+type AudioMatchSectionProps = {
+  amount: number
+}
+
+export const AudioMatchSection = ({ amount }: AudioMatchSectionProps) => {
+  return (
+    <div className={styles.root}>
+      <Text variant='label' size='large' color='white'>
+        {messages.earn(amount)}
+      </Text>
+    </div>
+  )
+}