Merge branch 'vpn-billed' into 'main'

Normalize billed at text in VPN signup See merge request web/clients!8846 Changelog:
thomaslenaour · Jan 29, 2024 · c6340fe · c6340fe
2 parents 93c4f49 + 0375762
commit c6340fe
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/applications/account/src/app/single-signup/CycleSelector.tsx b/applications/account/src/app/single-signup/CycleSelector.tsx
@@ -20,6 +20,13 @@ export const getBilledAtText = (price: string): string | null => {
     return c('Info').t`Billed at ${price}`;
 };
 
+export const getBilledAtPerMonthText = (price: string, cycle: CYCLE): string | null => {
+    if (cycle === CYCLE.MONTHLY) {
+        return c('Info').t`per month`;
+    }
+    return c('Info').t`per month, billed at ${price}`;
+};
+
 export const getBilledText = (cycle: CYCLE): string | null => {
     switch (cycle) {
         case CYCLE.MONTHLY:
@@ -71,7 +78,10 @@ const CycleItemView = ({
     bg?: boolean;
 }) => {
     return (
-        <div className="lg:flex-1 w-full pricing-box-content-cycle max-w-custom mx-auto lg:mx-0" style={{ '--max-w-custom': '30em' }}>
+        <div
+            className="lg:flex-1 w-full pricing-box-content-cycle max-w-custom mx-auto lg:mx-0"
+            style={{ '--max-w-custom': '30em' }}
+        >
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
             <div
                 className={clsx(
@@ -191,13 +201,10 @@ const CycleSelector = ({
                         highlightPrice={cycleItem === upsellCycle}
                         selected={cycle === cycleItem}
                         text={getShortBillingText(cycleItem)}
-                        billedText={
-                            cycleMapping.couponDiscount
-                                ? getBilledAtText(
-                                      getSimplePriceString(currency, currentCheckout.withDiscountPerCycle, '')
-                                  )
-                                : getBilledText(cycleItem)
-                        }
+                        billedText={getBilledAtPerMonthText(
+                            getSimplePriceString(currency, currentCheckout.withDiscountPerCycle, ''),
+                            cycleItem
+                        )}
                         key={cycleItem}
                         currency={currency}
                         totalPerMonth={currentCheckout.withDiscountPerMonth}