Plan details yearly monthly styles

packages/common-components/src/ToggleSwitch/ToggleSwitch.tsx

@@ -47,6 +47,9 @@ const useStyles = makeStyles(
         height: size,
         width: `calc(${size * 2}px - ${PADDING * 2}px)`,
         transitionDuration: `${animation.transform}ms`,
+        "&.active": {
+          backgroundColor: palette.additional["blue"][6]
+        },
         ...overrides?.ToggleSwitch?.background
       }),
       dot: ({ size }: IStyleProps) => ({
@@ -162,7 +165,8 @@ const ToggleSwitch = ({ injectedClasses, disabled, left, right, onChange, value,
       )
     }
     <div className={clsx(classes.background, size, injectedClasses?.background, {
-      "error": !!error
+      "error": !!error,
+      "active": side === "right" && !disabled
     })}>
       <div className={clsx(classes.dot, side, injectedClasses?.dot, {
         "error": !!error

packages/files-ui/cypress/support/page-objects/modals/planDetailsModal.ts

@@ -6,8 +6,7 @@ export const planDetailsModal = {
   storageDetailsLabel: () => cy.get("[data-cy=label-storage-details]"),
   billingLabel: () => cy.get("[data-cy=label-billing]"),
   billingStartDate: () => cy.get("[data-cy=label-billing-start-date]"),
-  monthlyBillingLabel: () => cy.get("[data-cy=label-monthly-billing]"),
-  yearlyBillingLabel: () => cy.get("[data-cy=label-yearly-billing]"),
+  annualBillingLabel: () => cy.get("[data-cy=label-annual-billing]"),
   durationToggleSwitch: () => cy.get("[data-testid=toggle-switch-duration]"),
   totalCostLabel: () => cy.get("[data-cy=label-total-cost]"),
   selectThisPlanButton: () => cy.get("[data-testid=button-select-this-plan]"),

packages/files-ui/cypress/tests/subscription-plan-spec.ts

@@ -201,8 +201,7 @@ describe("Subscription Plan", () => {
       planDetailsModal.storageDetailsLabel().should("be.visible")
       planDetailsModal.billingLabel().should("be.visible")
       planDetailsModal.billingStartDate().should("be.visible")
-      planDetailsModal.monthlyBillingLabel().should("be.visible")
-      planDetailsModal.yearlyBillingLabel().should("not.exist")
+      planDetailsModal.annualBillingLabel().should("be.visible")
       planDetailsModal.durationToggleSwitch().should("be.visible")
       planDetailsModal.totalCostLabel().should("be.visible")
       planDetailsModal.selectThisPlanButton().should("be.visible")
@@ -211,13 +210,11 @@ describe("Subscription Plan", () => {
       // retrieve monthly plan data as cypress alias for later comparison
       planDetailsModal.totalCostLabel().invoke("text").as("monthlyBillingPrice")
 
-      // toggle to display yearly pay
+      // toggle to enable annual billing
       planDetailsModal.durationToggleSwitch().click()
-      planDetailsModal.monthlyBillingLabel().should("not.exist")
-      planDetailsModal.yearlyBillingLabel().should("be.visible")
       planDetailsModal.totalCostLabel().invoke("text").as("yearlyBillingPrice")
 
-      // price should update when switching to yearly
+      // price should update when switching to annual
       cy.get("@monthlyBillingPrice").then(($monthlyBillingPrice) => {
         cy.get("@yearlyBillingPrice").should("not.equal", $monthlyBillingPrice)
       })

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx

@@ -154,17 +154,14 @@ const PlanDetails = ({ plan, goToSelectPlan, onSelectPlanPrice }: IPlanDetails)
               component="p"
               variant="body1"
               className={classes.boldText}
-              data-cy={billingPeriod === "monthly" ? "label-monthly-billing" : "label-yearly-billing"}
+              data-cy="label-annual-billing"
             >
-              {billingPeriod === "monthly"
-                ? <Trans>Monthly billing</Trans>
-                : <Trans>Yearly billing</Trans>
-              }
+              <Trans>Annual billing</Trans>
             </Typography>
             <div className={classes.pushRightBox}>
               <ToggleSwitch
-                left={{ value: "yearly" }}
-                right={{ value: "monthly" }}
+                left={{ value: "monthly" }}
+                right={{ value: "yearly" }}
                 testId="duration"
                 onChange={() => setBillingPeriod(billingPeriod === "monthly" ? "yearly" : "monthly")}
               />
@@ -191,7 +188,7 @@ const PlanDetails = ({ plan, goToSelectPlan, onSelectPlanPrice }: IPlanDetails)
             {billingPeriod === "monthly"
               ? `${monthlyPrice?.unit_amount ? monthlyPrice?.currency : ""} ${monthlyPrice?.unit_amount}`
               : `${yearlyPrice?.unit_amount ? yearlyPrice?.currency : ""} ${yearlyPrice?.unit_amount}`
-            }<span className={classes.normalWeightText}>{billingPeriod ? t`/month` : t`/year`}</span>
+            }<span className={classes.normalWeightText}>{billingPeriod === "monthly" ? t`/month` : t`/year`}</span>
           </Typography>
         </div>
       </div>

packages/files-ui/src/locales/de/messages.po

@@ -94,6 +94,9 @@ msgstr ""
 msgid "An error occurred:"
 msgstr "Es ist ein Fehler aufgetreten:"
 
+msgid "Annual billing"
+msgstr ""
+
 msgid "Anyone with the link can:"
 msgstr ""
 
@@ -526,9 +529,6 @@ msgstr ""
 msgid "Manage Shared Folder"
 msgstr ""
 
-msgid "Monthly billing"
-msgstr ""
-
 msgid "Move"
 msgstr "Verschieben"
 
@@ -1093,9 +1093,6 @@ msgstr "Was für ein schöner Tag."
 msgid "What a fine night it is."
 msgstr "Was für eine schöne Nacht."
 
-msgid "Yearly billing"
-msgstr ""
-
 msgid "Yes, save it"
 msgstr "Ja, es speichern"
 

packages/files-ui/src/locales/en/messages.po

@@ -94,6 +94,9 @@ msgstr "Allow lookup by sharing key, wallet address, username or ENS"
 msgid "An error occurred:"
 msgstr "An error occurred:"
 
+msgid "Annual billing"
+msgstr "Annual billing"
+
 msgid "Anyone with the link can:"
 msgstr "Anyone with the link can:"
 
@@ -529,9 +532,6 @@ msgstr "Manage Access"
 msgid "Manage Shared Folder"
 msgstr "Manage Shared Folder"
 
-msgid "Monthly billing"
-msgstr "Monthly billing"
-
 msgid "Move"
 msgstr "Move"
 
@@ -1096,9 +1096,6 @@ msgstr "What a fine day it is."
 msgid "What a fine night it is."
 msgstr "What a fine night it is."
 
-msgid "Yearly billing"
-msgstr "Yearly billing"
-
 msgid "Yes, save it"
 msgstr "Yes, save it"
 

packages/files-ui/src/locales/es/messages.po

@@ -95,6 +95,9 @@ msgstr ""
 msgid "An error occurred:"
 msgstr ""
 
+msgid "Annual billing"
+msgstr ""
+
 msgid "Anyone with the link can:"
 msgstr ""
 
@@ -530,9 +533,6 @@ msgstr ""
 msgid "Manage Shared Folder"
 msgstr ""
 
-msgid "Monthly billing"
-msgstr ""
-
 msgid "Move"
 msgstr "Moverse"
 
@@ -1097,9 +1097,6 @@ msgstr "Qué buen día es."
 msgid "What a fine night it is."
 msgstr "Qué hermosa noche es."
 
-msgid "Yearly billing"
-msgstr ""
-
 msgid "Yes, save it"
 msgstr "Si guárdalo"
 

packages/files-ui/src/locales/fr/messages.po

@@ -95,6 +95,9 @@ msgstr ""
 msgid "An error occurred:"
 msgstr "Une erreur s'est produite :"
 
+msgid "Annual billing"
+msgstr ""
+
 msgid "Anyone with the link can:"
 msgstr "Toute personne ayant le lien peut le faire :"
 
@@ -530,9 +533,6 @@ msgstr "Gérer l’accès"
 msgid "Manage Shared Folder"
 msgstr "Gérer le dossier partagé"
 
-msgid "Monthly billing"
-msgstr "Facturation mensuelle"
-
 msgid "Move"
 msgstr "Déplacer"
 
@@ -1097,9 +1097,6 @@ msgstr "Quelle belle journée."
 msgid "What a fine night it is."
 msgstr "Quelle belle nuit."
 
-msgid "Yearly billing"
-msgstr "Paiement annuel"
-
 msgid "Yes, save it"
 msgstr "Oui, l’enregistrer"
 

packages/files-ui/src/locales/no/messages.po

@@ -94,6 +94,9 @@ msgstr ""
 msgid "An error occurred:"
 msgstr ""
 
+msgid "Annual billing"
+msgstr ""
+
 msgid "Anyone with the link can:"
 msgstr ""
 
@@ -526,9 +529,6 @@ msgstr ""
 msgid "Manage Shared Folder"
 msgstr ""
 
-msgid "Monthly billing"
-msgstr ""
-
 msgid "Move"
 msgstr "Flytt"
 
@@ -1093,9 +1093,6 @@ msgstr ""
 msgid "What a fine night it is."
 msgstr ""
 
-msgid "Yearly billing"
-msgstr ""
-
 msgid "Yes, save it"
 msgstr "Ja, lagre"