[Web] Allow changing credit card

Author: brunolemos

packages/components/src/components/modals/PricingModal.tsx

@@ -316,7 +316,9 @@ export function PricingModal(props: PricingModalProps) {
         <SubHeader
           title={
             userPlanDetails && userPlanDetails.amount
-              ? 'CHANGE PLAN'
+              ? userPlanDetails.id === selectedPlanId
+                ? 'CHANGE CREDIT CARD'
+                : 'CHANGE PLAN'
               : 'SELECT A PLAN'
           }
         />
@@ -347,9 +349,7 @@ export function PricingModal(props: PricingModalProps) {
             analyticsCategory="subscribe"
             analyticsAction="subscribe"
             analyticsLabel="subscribe"
-            disabled={
-              !selectedPlan || selectedPlan.id === (userPlan && userPlan.id)
-            }
+            disabled={!selectedPlan}
             onPress={() => {
               if (!(selectedPlan && selectedPlan.id)) return
 
@@ -372,7 +372,7 @@ export function PricingModal(props: PricingModalProps) {
             {selectedPlan
               ? selectedPlan.amount > 0
                 ? userPlan && userPlan.id === selectedPlan.id
-                  ? 'You are on this plan'
+                  ? 'Change credit card'
                   : 'Continue'
                 : userPlan && userPlan.amount > 0
                 ? 'Downgrade to free plan'

packages/components/src/components/modals/SubscribeModal.tsx

@@ -75,12 +75,14 @@ export function SubscribeModal(props: SubscribeModalProps) {
               : 'Cancel subscription'
             : plan.amount < userPlan.amount
             ? 'Downgrade plan'
+            : userPlan.id === plan.id
+            ? 'Change credit card'
             : 'Change plan'
           : 'Subscribe'
       }
     >
       <>
-        {!!(plan && plan.amount) && (
+        {!!(plan && plan.amount && !(userPlan && userPlan.id === plan.id)) && (
           <>
             <SubHeader title="Review your choice" />
 

packages/components/src/components/modals/partials/SubscribeForm.web.tsx

@@ -480,13 +480,17 @@ const SubscribeFormWithStripe = React.memo(
           >
             {plan
               ? plan.amount > 0
-                ? `${
-                    userPlan && userPlan.amount && userPlan.amount < plan.amount
-                      ? 'Upgrade to'
-                      : userPlan && userPlan.amount > plan.amount
-                      ? 'Downgrade to'
-                      : 'Unlock for'
-                  } ${formatPriceAndInterval(plan.amount, plan)}`
+                ? userPlan && userPlan.id === plan.id
+                  ? 'Change credit card'
+                  : `${
+                      userPlan &&
+                      userPlan.amount &&
+                      userPlan.amount < plan.amount
+                        ? 'Upgrade to'
+                        : userPlan && userPlan.amount > plan.amount
+                        ? 'Downgrade to'
+                        : 'Unlock for'
+                    } ${formatPriceAndInterval(plan.amount, plan)}`
                 : userPlan && userPlan.amount > 0
                 ? 'Confirm downgrade to free plan'
                 : 'Subscribe'