Update product names (#1991)

* update product translations * add in production Ids * lingui extract * update tests * fix typo * more test updates * more test updates * fix more tests * remove description from lookup * lingui extract * remove description from map * remove description from downgrade details Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Mar 4, 2022 · 9e959ed · 9e959ed
1 parent 1b1a7a0
commit 9e959ed
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 155 deletions.
diff --git a/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeSuccessModal.ts b/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeSuccessModal.ts
@@ -4,7 +4,6 @@ export const planChangeSuccessModal = {
   planChangeSuccessSubheader: () => cy.get("[data-cy=label-plan-changed-successfully]"),
   featuresSummaryLabel: () => cy.get("[data-cy=label-features-summary-title]"),
   newStorageCapacityLabel: () => cy.get("[data-cy=label-new-plan-capacity]"),
-  newPlanNameLabel: () => cy.get("[data-cy=label-new-plan-name]"),
   billingHistoryLabel: () => cy.get("[data-cy=label-billing-history-notice]"),
   invoicesLink: () => cy.get("[data-cy=link-view-invoices]"),
   closeButton: () => cy.get("[data-testid=button-close-success-modal]")

diff --git a/packages/files-ui/cypress/support/page-objects/modals/billing/selectPlanModal.ts b/packages/files-ui/cypress/support/page-objects/modals/billing/selectPlanModal.ts
@@ -15,14 +15,14 @@ export const selectPlanModal = {
   // creates a cypress alias for each individual plan.
   createPlanCypressAliases() {
     this.planBoxContainer().should("have.length.greaterThan", 0)
-    this.planBoxContainer().contains("Free plan")
+    this.planBoxContainer().contains("Files Free")
       .should("be.visible")
-      .as("freePlanBox")
-    this.planBoxContainer().contains("Standard plan")
+      .as("filesFreeBox")
+    this.planBoxContainer().contains("Files Pro")
       .should("be.visible")
-      .as("standardPlanBox")
-    this.planBoxContainer().contains("Premium plan")
+      .as("filesProBox")
+    this.planBoxContainer().contains("Files Max")
       .should("be.visible")
-      .as("premiumPlanBox")
+      .as("filesMaxBox")
   }
 }
diff --git a/packages/files-ui/cypress/support/page-objects/settingsPage.ts b/packages/files-ui/cypress/support/page-objects/settingsPage.ts
@@ -40,8 +40,8 @@ export const settingsPage = {
   payNowButton: () => cy.get("[data-testid=button-pay-invoice]"),
 
   // use this convenience function when an upgraded account is required as a test requisite
-  upgradeSubscription(plan: "standard" | "premium") {
-    const planContainer = plan === "standard" ? "@standardPlanBox" : "@premiumPlanBox"
+  upgradeSubscription(plan: "pro" | "max") {
+    const planContainer = plan === "pro" ? "@filesProBox" : "@filesMaxBox"
 
     this.subscriptionTabButton().click()
     this.changePlanButton().click()

diff --git a/packages/files-ui/cypress/tests/subscription-plan-spec.ts b/packages/files-ui/cypress/tests/subscription-plan-spec.ts
@@ -162,7 +162,7 @@ describe("Subscription Plan", () => {
       selectPlanModal.createPlanCypressAliases()
 
       // ensure all plan boxes contain expected elements and element state
-      cy.get("@freePlanBox").parent().within(() => {
+      cy.get("@filesFreeBox").parent().within(() => {
         selectPlanModal.planTitleLabel().should("be.visible")
         selectPlanModal.FreePriceLabel().should("be.visible")
         selectPlanModal.storageDescriptionLabel().should("be.visible")
@@ -172,7 +172,7 @@ describe("Subscription Plan", () => {
           .should("be.disabled")
       })
 
-      cy.get("@standardPlanBox").parent().within(() => {
+      cy.get("@filesProBox").parent().within(() => {
         selectPlanModal.planTitleLabel().should("be.visible")
         selectPlanModal.monthlyPriceLabel().should("be.visible")
         selectPlanModal.storageDescriptionLabel().should("be.visible")
@@ -181,7 +181,7 @@ describe("Subscription Plan", () => {
           .should("be.enabled")
       })
 
-      cy.get("@premiumPlanBox").parent().within(() => {
+      cy.get("@filesMaxBox").parent().within(() => {
         selectPlanModal.planTitleLabel().should("be.visible")
         selectPlanModal.monthlyPriceLabel().should("be.visible")
         selectPlanModal.storageDescriptionLabel().should("be.visible")
@@ -190,8 +190,8 @@ describe("Subscription Plan", () => {
           .should("be.enabled")
       })
 
-      // select the standard plan 
-      cy.get("@standardPlanBox").parent().within(() => {
+      // select the Files Pro 
+      cy.get("@filesProBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 
@@ -217,9 +217,9 @@ describe("Subscription Plan", () => {
     it("cannot downgrade if used storage exceeds plan allowance", () => {
       cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
 
-      // upgrade to a premium plan first
+      // upgrade to a Max plan first
       navigationMenu.settingsNavButton().click()
-      settingsPage.upgradeSubscription("premium")
+      settingsPage.upgradeSubscription("max")
 
       // setup intercepter, stub the used products response to disallow update
       cy.intercept("GET", "**/billing/products", (req) => {
@@ -233,7 +233,7 @@ describe("Subscription Plan", () => {
       selectPlanModal.planBoxContainer().should("have.length.greaterThan", 0)
 
       // ensure warning is shown and the free plan is not selectable
-      cy.get("@freePlanBox").parent().within(() => {
+      cy.get("@filesFreeBox").parent().within(() => {
         selectPlanModal.storageCapacityWarningLabel().should("be.visible")
         selectPlanModal.selectPlanButton()
           .should("be.visible")
@@ -250,7 +250,7 @@ describe("Subscription Plan", () => {
       // create cypress aliases for the plans
       selectPlanModal.createPlanCypressAliases()
 
-      cy.get("@standardPlanBox").parent().within(() => {
+      cy.get("@filesProBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 
@@ -273,11 +273,11 @@ describe("Subscription Plan", () => {
       settingsPage.subscriptionTabButton().click()
       settingsPage.changePlanButton().click()
 
-      selectPlanModal.planBoxContainer().contains("Standard plan")
+      selectPlanModal.planBoxContainer().contains("Files Pro")
         .should("be.visible")
-        .as("standardPlanBox")
+        .as("filesProBox")
 
-      cy.get("@standardPlanBox").parent().within(() => {
+      cy.get("@filesProBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 
@@ -313,13 +313,13 @@ describe("Subscription Plan", () => {
       selectPlanModal.body().should("be.visible")
       selectPlanModal.planBoxContainer().should("have.length.greaterThan", 0)
 
-      // create a cypress alias for the premium plan
-      selectPlanModal.planBoxContainer().contains("Premium plan")
+      // create a cypress alias for the Max plan
+      selectPlanModal.planBoxContainer().contains("Files Max")
         .should("be.visible")
-        .as("premiumPlanBox")
+        .as("filesMaxBox")
 
-      // select the premium plan 
-      cy.get("@premiumPlanBox").parent().within(() => {
+      // select the Max plan 
+      cy.get("@filesMaxBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 
@@ -371,7 +371,6 @@ describe("Subscription Plan", () => {
       planChangeSuccessModal.planChangeSuccessSubheader().should("be.visible")
       planChangeSuccessModal.featuresSummaryLabel().should("be.visible")
       planChangeSuccessModal.newStorageCapacityLabel().should("be.visible")
-      planChangeSuccessModal.newPlanNameLabel().should("be.visible")
       planChangeSuccessModal.billingHistoryLabel().should("be.visible")
       planChangeSuccessModal.invoicesLink().should("be.visible")
       planChangeSuccessModal.closeButton().should("be.visible")
@@ -397,12 +396,12 @@ describe("Subscription Plan", () => {
       })
     })
 
-    it("can downgrade from premium plan to standard plan", () => {
+    it("can downgrade from Max plan to Pro plan", () => {
       cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
 
-      // upgrade to a premium plan first using convenience function
+      // upgrade to a max plan first using convenience function
       navigationMenu.settingsNavButton().click()
-      settingsPage.upgradeSubscription("premium")
+      settingsPage.upgradeSubscription("max")
 
       // store the upgraded plan name for later comparison
       settingsPage.planNameLabel()
@@ -412,7 +411,7 @@ describe("Subscription Plan", () => {
       // initiate the downgrade process
       settingsPage.changePlanButton().click()
       selectPlanModal.planBoxContainer().should("have.length.greaterThan", 0)
-      cy.get("@standardPlanBox").parent().within(() => {
+      cy.get("@filesProBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 
@@ -440,30 +439,30 @@ describe("Subscription Plan", () => {
       // store the downgraded plan name for later comparison
       settingsPage.planNameLabel()
         .should("be.visible")
-        .invoke("text").as("standardPlanName")
+        .invoke("text").as("proPlanName")
 
       // ensure the downgraded plan name is not the same as the previously upgraded plan
       cy.get("@premiumPlanName").then(($premiumPlanName) => {
-        cy.get("@standardPlanName").should("not.equal", $premiumPlanName)
+        cy.get("@proPlanName").should("not.equal", $premiumPlanName)
       })
     })
 
-    it("can downgrade from standard plan to free plan", () => {
+    it("can downgrade from Pro plan to free plan", () => {
       cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
 
-      // upgrade to a standard plan first
+      // upgrade to a Pro plan first
       navigationMenu.settingsNavButton().click()
-      settingsPage.upgradeSubscription("standard")
+      settingsPage.upgradeSubscription("pro")
 
-      // store the standard plan name for later comparison
+      // store the Pro plan name for later comparison
       settingsPage.planNameLabel()
         .should("be.visible")
-        .invoke("text").as("standardPlanName")
+        .invoke("text").as("proPlanName")
 
       // initiate the downgrade process
       settingsPage.changePlanButton().click()
       selectPlanModal.planBoxContainer().should("have.length.greaterThan", 0)
-      cy.get("@freePlanBox").parent().within(() => {
+      cy.get("@filesFreeBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 
@@ -487,7 +486,7 @@ describe("Subscription Plan", () => {
         .invoke("text").as("freePlanName")
 
       // ensure the downgraded plan name is not the same as the previously upgraded plan
-      cy.get("@standardPlanName").then(($standardPlanName) => {
+      cy.get("@proPlanName").then(($standardPlanName) => {
         cy.get("@freePlanName").should("not.equal", $standardPlanName)
       })
     })
@@ -498,7 +497,7 @@ describe("Subscription Plan", () => {
       settingsPage.subscriptionTabButton().click()
       settingsPage.changePlanButton().click()
       selectPlanModal.createPlanCypressAliases()
-      cy.get("@standardPlanBox").parent().within(() => {
+      cy.get("@filesProBox").parent().within(() => {
         selectPlanModal.selectPlanButton().click()
       })
 

diff --git a/.../files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/DowngradeDetails.tsx b/.../files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/DowngradeDetails.tsx
@@ -2,14 +2,14 @@ import React, { useCallback, useState } from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Product } from "@chainsafe/files-api-client"
-import {  Button, CrossIcon, formatBytes, InfoCircleIcon, Typography } from "@chainsafe/common-components"
-import {  Trans } from "@lingui/macro"
+import { Button, CrossIcon, formatBytes, InfoCircleIcon, Typography } from "@chainsafe/common-components"
+import { Trans } from "@lingui/macro"
 import clsx from "clsx"
 import { useBilling } from "../../../../../Contexts/BillingContext"
 
 const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
   createStyles({
-    root:  {
+    root: {
       position: "relative",
       margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px`
     },
@@ -75,7 +75,7 @@ const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
     textLink: {
       color: palette.primary.background
     },
-    checkCircleIcon:  {
+    checkCircleIcon: {
       fill: palette.additional["gray"][7],
       marginLeft: constants.generalUnit
     },
@@ -93,7 +93,7 @@ const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
       maxWidth: constants.generalUnit * 56,
       color: palette.additional["gray"][7]
     },
-    icon : {
+    icon: {
       verticalAlign: "middle",
       "& > svg": {
         fill: palette.additional["gray"][7],
@@ -171,16 +171,6 @@ const DowngradeDetails = ({
               }
             </Typography>
           </div>
-          <div className={classes.middleRowBox}>
-            <CrossIcon className={classes.crossIcon} />
-            <Typography
-              component="p"
-              variant="body1"
-              data-cy="label-downgraded-product-description"
-            >
-              {currentSubscription?.product.description}
-            </Typography>
-          </div>
         </div>
         <Typography
           variant="body1"

diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx
@@ -240,10 +240,9 @@ const SelectPlan = ({ className, onSelectPlan, plans }: ISelectPlan) => {
                   className={classes.description}
                   data-cy="label-storage-capacity-amount"
                 >
-                  {
-                monthly?.metadata?.storage_size_bytes
-                  ? <Trans>{planStorageCapacity} of storage</Trans>
-                  : plan.description
+                  {monthly?.metadata?.storage_size_bytes
+                    ? <Trans>{planStorageCapacity} of storage</Trans>
+                    : plan.description
                   }
                 </Typography>
                 <Button

diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/PlanSuccess.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/PlanSuccess.tsx
@@ -2,15 +2,15 @@ import React from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Product, ProductPrice } from "@chainsafe/files-api-client"
-import {  Button, CheckCircleIcon, CheckIcon, Divider, formatBytes, Link, Typography } from "@chainsafe/common-components"
+import { Button, CheckCircleIcon, CheckIcon, Divider, formatBytes, Link, Typography } from "@chainsafe/common-components"
 import { Trans } from "@lingui/macro"
 import { ROUTE_LINKS } from "../../../../FilesRoutes"
 import clsx from "clsx"
 import { PaymentMethod } from "../../../../../Contexts/BillingContext"
 
 const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
   createStyles({
-    root:  {
+    root: {
       margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px`
     },
     headingBadge: {
@@ -68,7 +68,7 @@ const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
     textLink: {
       color: palette.primary.background
     },
-    checkCircleIcon:  {
+    checkCircleIcon: {
       fill: palette.additional["gray"][7],
       marginLeft: constants.generalUnit
     },
@@ -137,16 +137,6 @@ const PlanSuccess = ({ plan, onClose, planPrice, paymentMethod }: IPlanSuccess)
               }
             </Typography>
           </div>
-          <div className={classes.middleRowBox}>
-            <CheckIcon className={classes.tickIcon} />
-            <Typography
-              component="p"
-              variant="body1"
-              data-cy="label-new-plan-name"
-            >
-              {plan.description}
-            </Typography>
-          </div>
         </div>
       </div>
       <div className={classes.rowBox}>

diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx
@@ -37,19 +37,26 @@ interface IBillingContext {
 
 const ProductMapping: {[key: string]: {
   name: string
-  description: string
 }} = {
+  // Staging Product Ids
   prod_JwRu6Ph25b1f2O: {
-    name: t`Free plan`,
-    description: t`This is the free product.`
+    name: t`Files Free`
   },
   prod_JwS49Qfnr6vD3K: {
-    name: t`Standard plan`,
-    description: t`Standard plan`
+    name: t`Files Pro`
   },
   prod_JwSGHB8qFx7rRM: {
-    name: t`Premium plan`,
-    description: t`Premium plan`
+    name: t`Files Max`
+  },
+  // Production Product Ids
+  prod_KRAq3CngQMKebw: {
+    name: t`Files Free`
+  },
+  prod_LDXtKgrbAoZvIB: {
+    name: t`Files Pro`
+  },
+  prod_LDXtBLuzjVxMzg: {
+    name: t`Files Max`
   }
 }
 
@@ -167,7 +174,6 @@ const BillingProvider = ({ children }: BillingContextProps) => {
     return filesApiClient.getCurrentSubscription()
       .then((subscription) => {
         subscription.product.name = ProductMapping[subscription.product.id].name
-        subscription.product.description = ProductMapping[subscription.product.id].description
         setCurrentSubscription(subscription)
         return subscription
       })
@@ -187,7 +193,6 @@ const BillingProvider = ({ children }: BillingContextProps) => {
       .then((products) => {
         return products.map(product => {
           product.name = ProductMapping[product.id].name
-          product.description = ProductMapping[product.id].description
           return product
         })
       })