[PAY-1962] Disable selectable pills during purchase

packages/harmony/src/components/input/SelectablePill/SelectablePill.module.css

@@ -40,11 +40,24 @@
   border: 1px solid var(--harmony-s-400);
 }
 
+.pill.disabled {
+  pointer-events: none;
+}
+
 .large:active,
 .large.selected {
   box-shadow: none;
 }
 
+.disabled {
+  opacity: 0.45;
+}
+
+.disabled:hover {
+  background-color: var(--harmony-white);
+  border: 1px solid var(--harmony-border-strong);
+}
+
 .icon path {
   fill: currentColor;
 }

packages/harmony/src/components/input/SelectablePill/SelectablePill.tsx

@@ -16,6 +16,7 @@ export const SelectablePill = forwardRef<
       size = 'default',
       isSelected,
       label,
+      disabled,
       icon: IconComponent,
       className,
       ...restProps
@@ -28,7 +29,8 @@ export const SelectablePill = forwardRef<
           styles.pill,
           {
             [styles.large]: size === 'large',
-            [styles.selected]: isSelected
+            [styles.selected]: isSelected,
+            [styles.disabled]: disabled
           },
           className
         )}

packages/harmony/src/components/input/SelectablePill/types.ts

@@ -6,5 +6,6 @@ export type SelectablePillProps = {
   size?: 'default' | 'large'
   isSelected: boolean
   label: string
+  disabled?: boolean
   icon?: IconComponent
 } & Omit<ComponentPropsWithoutRef<'button'>, 'children'>

packages/mobile/src/components/core/HarmonySelectablePill.tsx

@@ -78,6 +78,7 @@ export const HarmonySelectablePill = (props: HarmonySelectablePillProps) => {
     onPressIn,
     onPressOut,
     size,
+    disabled,
     style,
     ...other
   } = props
@@ -110,14 +111,16 @@ export const HarmonySelectablePill = (props: HarmonySelectablePillProps) => {
         styles.pill,
         size === 'large' ? styles.pillLarge : undefined,
         isSelected ? styles.pressed : undefined,
+        disabled ? { opacity: 0.45 } : undefined,
         { transform: [{ scale }] },
         style
       ]}
     >
       <Pressable
         accessibilityRole='button'
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={disabled ? undefined : handlePressIn}
+        onPressOut={disabled ? undefined : handlePressOut}
+        disabled={disabled}
         style={[
           styles.pressable,
           size === 'large' ? styles.pressableLarge : undefined

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

@@ -44,10 +44,12 @@ const formatPillAmount = (val: number) => `$${Math.floor(val / 100)}`
 
 export type PayExtraFormSectionProps = {
   amountPresets: PayExtraAmountPresetValues
+  disabled?: boolean
 }
 
 export const PayExtraFormSection = ({
-  amountPresets
+  amountPresets,
+  disabled
 }: PayExtraFormSectionProps) => {
   const [{ value: preset }, , { setValue: setPreset }] = useField(AMOUNT_PRESET)
   const [{ value: customAmount }, { error: customAmountError }] =
@@ -69,20 +71,23 @@ export const PayExtraFormSection = ({
             style={styles.pill}
             isSelected={preset === PayExtraPreset.LOW}
             label={formatPillAmount(amountPresets[PayExtraPreset.LOW])}
+            disabled={disabled}
             onPress={() => handleClickPreset(PayExtraPreset.LOW)}
           />
           <HarmonySelectablePill
             size='large'
             style={styles.pill}
             isSelected={preset === PayExtraPreset.MEDIUM}
             label={formatPillAmount(amountPresets[PayExtraPreset.MEDIUM])}
+            disabled={disabled}
             onPress={() => handleClickPreset(PayExtraPreset.MEDIUM)}
           />
           <HarmonySelectablePill
             size='large'
             style={styles.pill}
             isSelected={preset === PayExtraPreset.HIGH}
             label={formatPillAmount(amountPresets[PayExtraPreset.HIGH])}
+            disabled={disabled}
             onPress={() => handleClickPreset(PayExtraPreset.HIGH)}
           />
         </View>
@@ -91,6 +96,7 @@ export const PayExtraFormSection = ({
           style={styles.pill}
           isSelected={preset === PayExtraPreset.CUSTOM}
           label={messages.customAmount}
+          disabled={disabled}
           onPress={() => handleClickPreset(PayExtraPreset.CUSTOM)}
         />
       </View>

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

@@ -217,6 +217,7 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
   const { amountDue } = purchaseSummaryValues
 
   const isPurchaseSuccessful = stage === PurchaseContentStage.FINISH
+  const isInProgress = isContentPurchaseInProgress(stage)
 
   // Navigate to track screen in the background if purchase is successful
   useEffect(() => {
@@ -240,7 +241,10 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
         ) : null}
         <View style={styles.formContentSection}>
           {isPurchaseSuccessful ? null : (
-            <PayExtraFormSection amountPresets={presetValues} />
+            <PayExtraFormSection
+              amountPresets={presetValues}
+              disabled={isInProgress}
+            />
           )}
           <PurchaseSummaryTable
             {...purchaseSummaryValues}

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

@@ -22,10 +22,12 @@ const formatPillAmount = (val: number) => `$${Math.floor(val / 100)}`
 
 export type PayExtraFormSectionProps = {
   amountPresets: PayExtraAmountPresetValues
+  disabled?: boolean
 }
 
 export const PayExtraFormSection = ({
-  amountPresets
+  amountPresets,
+  disabled
 }: PayExtraFormSectionProps) => {
   const [{ value: preset }, , { setValue: setPreset }] = useField(AMOUNT_PRESET)
 
@@ -47,6 +49,7 @@ export const PayExtraFormSection = ({
             size='large'
             type='button'
             onClick={() => handleClickPreset(PayExtraPreset.LOW)}
+            disabled={disabled}
           />
           <SelectablePill
             className={styles.presetPill}
@@ -55,6 +58,7 @@ export const PayExtraFormSection = ({
             size='large'
             type='button'
             onClick={() => handleClickPreset(PayExtraPreset.MEDIUM)}
+            disabled={disabled}
           />
           <SelectablePill
             className={styles.presetPill}
@@ -63,6 +67,7 @@ export const PayExtraFormSection = ({
             size='large'
             type='button'
             onClick={() => handleClickPreset(PayExtraPreset.HIGH)}
+            disabled={disabled}
           />
         </div>
         <SelectablePill
@@ -72,13 +77,15 @@ export const PayExtraFormSection = ({
           size='large'
           type='button'
           onClick={() => handleClickPreset(PayExtraPreset.CUSTOM)}
+          disabled={disabled}
         />
       </div>
       {preset === PayExtraPreset.CUSTOM ? (
         <PriceField
           placeholder={messages.placeholder}
           label={messages.customAmount}
           name={CUSTOM_AMOUNT}
+          disabled={disabled}
         />
       ) : null}
     </div>

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

@@ -1,4 +1,8 @@
-import { PurchaseContentStage, usePayExtraPresets } from '@audius/common'
+import {
+  PurchaseContentStage,
+  isContentPurchaseInProgress,
+  usePayExtraPresets
+} from '@audius/common'
 import { IconCheck } from '@audius/stems'
 
 import { Icon } from 'components/Icon'
@@ -27,6 +31,7 @@ export const PurchaseContentFormFields = ({
 }: PurchaseContentFormFieldsProps) => {
   const payExtraAmountPresetValues = usePayExtraPresets(useRemoteVar)
   const isPurchased = stage === PurchaseContentStage.FINISH
+  const isInProgress = isContentPurchaseInProgress(stage)
 
   if (isPurchased) {
     return (
@@ -48,7 +53,10 @@ export const PurchaseContentFormFields = ({
   }
   return (
     <>
-      <PayExtraFormSection amountPresets={payExtraAmountPresetValues} />
+      <PayExtraFormSection
+        amountPresets={payExtraAmountPresetValues}
+        disabled={isInProgress}
+      />
       <PurchaseSummaryTable
         {...purchaseSummaryValues}
         isPurchased={isPurchased}