MPP-4231 - fix(verbiage): update the verbiage on phone page

Author: vpremamozilla

frontend/pendingTranslations.ftl

@@ -176,3 +176,6 @@ whatsnew-megabundle-cta = Get year-round protection
 whatsnew-megabundle-premium-snippet = For { $monthly_price }/month, combine { -brand-name-relay } with { -brand-name-vpn }‘s online activity protection and { -brand-name-monitor }‘s data…
 whatsnew-megabundle-premium-description = For { $monthly_price }/month, combine { -brand-name-relay } with { -brand-name-vpn }‘s online activity protection and { -brand-name-monitor }‘s protection from data brokers who sell your info online.
 whatsnew-megabundle-premium-cta = Upgrade my protection
+
+phone-onboarding-step1-button-cta-2 = Sign up
+phone-onboarding-step1-learn-more = Learn more

frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss

@@ -138,4 +138,19 @@
       }
     }
   }
+  .learn-more {
+    background-color: transparent;
+    border-style: none;
+    border-radius: $border-radius-lg;
+    color: $color-blue-50;
+    padding-inline: $spacing-md;
+    font-family: $font-stack-base;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: color.$grey-10;
+    }
+  }
 }

frontend/src/components/phones/onboarding/PurchasePhonesPlan.tsx

@@ -96,8 +96,16 @@ const PricingToggle = (props: PricingToggleProps) => {
           tabIndex={0}
           className={styles["pick-button"]}
         >
-          {l10n.getString("phone-onboarding-step1-button-cta")}
+          {l10n.getString("phone-onboarding-step1-button-cta-2")}
         </LinkButton>
+        <a
+          className={styles["learn-more"]}
+          href={
+            "https://support.mozilla.org/en-US/kb/how-do-i-upgrade-my-subscription"
+          }
+        >
+          {l10n.getString("phone-onboarding-step1-learn-more")}
+        </a>
       </Item>
       <Item
         key="monthly"
@@ -124,8 +132,16 @@ const PricingToggle = (props: PricingToggleProps) => {
           tabIndex={0}
           className={styles["pick-button"]}
         >
-          {l10n.getString("phone-onboarding-step1-button-cta")}
+          {l10n.getString("phone-onboarding-step1-button-cta-2")}
         </LinkButton>
+        <a
+          className={styles["learn-more"]}
+          href={
+            "https://support.mozilla.org/en-US/kb/how-do-i-upgrade-my-subscription"
+          }
+        >
+          {l10n.getString("phone-onboarding-step1-learn-more")}
+        </a>
       </Item>
     </PricingTabs>
   );