From 8f1f850b5bca1f56768bdba3e07f983c8a0d1a3f Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Mon, 29 Nov 2021 22:37:55 +0600 Subject: [PATCH 01/39] plans page progress --- .../ChangePlanModal.tsx} | 2 +- .../SelectPlan}/ProductInfo.tsx | 2 +- .../SelectPlan}/Products.tsx | 6 +- .../Settings/ChangePlan/SelectPlan/index.tsx | 219 ++++++++++++++ .../ChangeProductViews/SelectPlan.tsx | 270 ------------------ .../{CurrentProduct.tsx => CurrentPlan.tsx} | 5 +- .../Settings/SubscriptionTab/index.tsx | 2 +- 7 files changed, 228 insertions(+), 278 deletions(-) rename packages/files-ui/src/Components/Modules/Settings/{Products/ChangeProductModal.tsx => ChangePlan/ChangePlanModal.tsx} (96%) rename packages/files-ui/src/Components/Modules/Settings/{Products => ChangePlan/SelectPlan}/ProductInfo.tsx (97%) rename packages/files-ui/src/Components/Modules/Settings/{Products => ChangePlan/SelectPlan}/Products.tsx (95%) create mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx delete mode 100644 packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductViews/SelectPlan.tsx rename packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/{CurrentProduct.tsx => CurrentPlan.tsx} (96%) diff --git a/packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductModal.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx similarity index 96% rename from packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductModal.tsx rename to packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx index 3e9d5ab105..810662119d 100644 --- a/packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx @@ -3,7 +3,7 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../Themes/types" import clsx from "clsx" import { Modal } from "@chainsafe/common-components" -import SelectPlan from "./ChangeProductViews/SelectPlan" +import SelectPlan from "./SelectPlan" import { useBilling } from "../../../../Contexts/BillingContext" const useStyles = makeStyles(({ constants }: CSFTheme) => diff --git a/packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/ProductInfo.tsx similarity index 97% rename from packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx rename to packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/ProductInfo.tsx index 109cbadbb0..80110e73ce 100644 --- a/packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/ProductInfo.tsx @@ -1,7 +1,7 @@ import React from "react" import { Divider, Typography } from "@chainsafe/common-components" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" +import { CSFTheme } from "../../../../../Themes/types" import clsx from "clsx" import { Trans } from "@lingui/macro" import { Product } from "@chainsafe/files-api-client" diff --git a/packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/Products.tsx similarity index 95% rename from packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx rename to packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/Products.tsx index c569f8844d..02cfbb0106 100644 --- a/packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/Products.tsx @@ -1,11 +1,11 @@ import React, { useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" +import { CSFTheme } from "../../../../../Themes/types" import ProductInfo from "./ProductInfo" import { ArrowLeftIcon, Link, RadioInput, Typography } from "@chainsafe/common-components" import { t, Trans } from "@lingui/macro" -import { ROUTE_LINKS } from "../../../FilesRoutes" -import { useFilesApi } from "../../../../Contexts/FilesApiContext" +import { ROUTE_LINKS } from "../../../../FilesRoutes" +import { useFilesApi } from "../../../../../Contexts/FilesApiContext" import { Product } from "@chainsafe/files-api-client" import { useEffect } from "react" diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx new file mode 100644 index 0000000000..8cac29b365 --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx @@ -0,0 +1,219 @@ +import React, { useEffect, useState } from "react" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import clsx from "clsx" +import { Button, ExternalSvg, Loading, Typography } from "@chainsafe/common-components" +import { Trans } from "@lingui/macro" +import { CSFTheme } from "../../../../../Themes/types" +import { useBilling } from "../../../../../Contexts/BillingContext" +import { Product } from "@chainsafe/files-api-client" + +const useStyles = makeStyles(({ constants, palette, typography }: CSFTheme) => + createStyles({ + root: { + margin: `${constants.generalUnit * 2}px 0px` + }, + header: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between" + }, + loadingContainer: { + margin: `${constants.generalUnit * 4}px 0`, + display: "flex", + justifyContent: "center" + }, + panels: { + display: "grid", + gridColumnGap: constants.generalUnit, + gridTemplateColumns: "1fr 1fr 1fr", + margin: `${constants.generalUnit * 4}px 0` + }, + planBox: { + border: `2px solid ${palette.additional["gray"][5]}`, + padding: constants.generalUnit * 3, + display: "flex", + flexDirection: "column", + alignItems: "center" + }, + priceSpace: { + height: 22 + }, + tag: { + display: "block", + padding: `${constants.generalUnit * 0.25}px ${constants.generalUnit}px`, + borderRadius: `${constants.generalUnit * 2}px`, + height: 24, + backgroundColor: palette.primary.main, + color: constants.changeProduct.currentTag.text, + margin: `${constants.generalUnit * 0.5}px 0` + }, + link: { + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + "& svg": { + marginLeft: constants.generalUnit, + stroke: palette.additional.gray[10], + width: constants.generalUnit * 2, + height: constants.generalUnit * 2 + } + }, + buttons: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "flex-end", + "& > *": { + marginLeft: constants.generalUnit + } + }, + bottomSection: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center" + }, + planTitle: { + fontWeight: "bold", + marginBottom: constants.generalUnit + }, + priceSubtitle: { + ...typography.body2, + color: palette.additional["gray"][9] + }, + description: { + margin: `${constants.generalUnit * 3}px 0` + }, + priceYearlyTitle: { + fontWeight: "bold" + } + }) +) + +interface ISelectPlan { + className?: string + close: () => void + next: (newPriceId: string) => void +} + +const SelectPlan = ({ close, className }: ISelectPlan) => { + const classes = useStyles() + const { getAvailablePlans, currentSubscription } = useBilling() + const [plans, setPlans] = useState() + + useEffect(() => { + if(!plans) { + getAvailablePlans() + .then((plans) => setPlans(plans)) + .catch(console.error) + } + }) + + return ( +
+
+ + + Switch Plans + + +
+ {!plans &&
+ +
+ } +
+ {plans && plans.map((plan) => { + const monthly = plan.prices.find((price) => price.recurring.interval === "month") + const yearly = plan.prices.find((price) => price.recurring.interval === "year") + + return
+ + {plan.name} + + {monthly && + {monthly.unit_amount ? <> + {monthly.currency.toUpperCase()} {monthly.unit_amount} + /month + : "Free"} + + } + {monthly && yearly ? + {yearly.currency.toUpperCase()} {yearly.unit_amount} + /year + :
+ } + + { + plan.description + } + + {plan.id === currentSubscription?.product.id + ? + + Current plan + + : + } +
+ }) + } +
+
+ + + + Not sure what to pick? Learn more about our plans + + + + +
+ +
+
+
+ ) +} + +export default SelectPlan \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductViews/SelectPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductViews/SelectPlan.tsx deleted file mode 100644 index 86842560f3..0000000000 --- a/packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductViews/SelectPlan.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import React, { useEffect, useMemo, useState } from "react" -import { makeStyles, createStyles } from "@chainsafe/common-theme" -import clsx from "clsx" -import { Button, ExternalSvg, Loading, ToggleSwitch, Typography } from "@chainsafe/common-components" -import { t, Trans } from "@lingui/macro" -import { CSFTheme } from "../../../../../Themes/types" -import { useBilling } from "../../../../../Contexts/BillingContext" -import { Product, ProductPriceRecurringInterval } from "@chainsafe/files-api-client" - -const useStyles = makeStyles(({ breakpoints, constants, palette, typography }: CSFTheme) => - createStyles({ - root: { - margin: `${constants.generalUnit * 2}px 0px` - }, - header: { - display: "flex", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between" - }, - label: { - ...typography.h5 - }, - panels: { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - justifyContent: "space-between", - margin: `${constants.generalUnit * 3.5}px 0` - }, - panel: { - display: "flex", - flexDirection: "column", - padding: `${constants.generalUnit}px ${constants.generalUnit * 3}px`, - width: `calc(33.3333% - ${constants.generalUnit * 2}px)`, - minHeight: 200, - cursor: "pointer", - border: `3px solid ${palette.additional.gray[4]}`, - borderRadius: constants.generalUnit, - marginBottom: constants.generalUnit, - "&.active": { - opacity: "1 !important", - backgroundColor: constants.changeProduct.currentBackground, - borderColor: constants.changeProduct.selectedColor - }, - [breakpoints.down("sm")]: { - width: `calc(50% - ${constants.generalUnit}px)` - } - }, - loader: { - margin: "0 auto" - }, - panelTop: { - height: "60%", - "& > header": { - display: "flex", - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", - marginBottom: constants.generalUnit - } - }, - tag: { - display: "block", - padding: `0 ${constants.generalUnit}px`, - borderRadius: `${constants.generalUnit * 2}px`, - height: 20, - "&.current": { - backgroundColor: palette.primary.main, - color: constants.changeProduct.currentTag.text - }, - "&.popular": { - backgroundColor: palette.additional.gold[5] - } - }, - panelBottom: { - height: "40%" - }, - link: { - display: "flex", - justifyContent: "flex-start", - alignItems: "center", - "& svg": { - marginLeft: constants.generalUnit, - stroke: palette.additional.gray[10], - width: constants.generalUnit * 2, - height: constants.generalUnit * 2 - } - }, - buttons: { - display: "flex", - flexDirection: "row", - alignItems: "center", - justifyContent: "flex-end", - "& > *": { - marginLeft: constants.generalUnit - } - }, - bottomSection: { - display: "flex", - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center" - } - }) -) - -interface ISelectPlan { - className?: string - close: () => void - next: (newPriceId: string) => void -} - -const SelectPlan = ({ close, className, next }: ISelectPlan) => { - const classes = useStyles() - const { getAvailablePlans, currentSubscription } = useBilling() - const [selectedPlan, setSelectedPlan] = useState(currentSubscription?.product.id) - const [plans, setPlans] = useState() - const [interval, setInterval] = useState("month") - - useEffect(() => { - if(!plans) { - getAvailablePlans() - .then((plans) => setPlans(plans)) - .catch(console.error) - } - }) - - const selectedPrice = useMemo(() => { - return plans?.find(plan => plan.id === selectedPlan)?.prices.find(price => price.recurring.interval === interval)?.id - }, [selectedPlan, plans, interval]) - - const translatedPrice = useMemo(() => { - switch (interval) { - case "day": - return t`per day` - case "week": - return t`per week` - case "month": - return t`per month` - case "year": - return t`per year` - } - }, [interval]) - - return ( -
-
- - - Switch Plans - - -
- setInterval(value)} - size="medium" - /> -
-
-
- {!plans && } - {plans && plans.map((plan) => ( -
setSelectedPlan(plan.id) } - key={`plan-${plan.id}`} - > -
-
- - {plan.name} - - {plan.id === currentSubscription?.product.id && ( - - - Current - - - )} -
- - { - plan.description - } - -
-
- {plan.prices - .filter(price => price.recurring.interval === interval) - .map(price => ( - - {price.unit_amount === 0 ? t`Free` : `${price.unit_amount} ${price.currency} ${translatedPrice}`} - - ))} -
-
- )) - } -
-
- - - - Not sure what to pick? Learn more about our plans - - - - -
- - -
-
-
- ) -} - -export default SelectPlan \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentProduct.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx similarity index 96% rename from packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentProduct.tsx rename to packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx index 9529631d5f..72d1e5dc6e 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentProduct.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx @@ -11,7 +11,7 @@ import { useFiles } from "../../../../Contexts/FilesContext" import { t, Trans } from "@lingui/macro" import clsx from "clsx" import { useBilling } from "../../../../Contexts/BillingContext" -import ChangeProductModal from "../Products/ChangeProductModal" +import ChangeProductModal from "../ChangePlan/ChangePlanModal" const useStyles = makeStyles(({ breakpoints, constants }: ITheme) => createStyles({ @@ -78,7 +78,8 @@ const CurrentProduct = ({ className }: ICurrentProduct) => { > {currentSubscription?.product.name} - : + : } {storageSummary && <> diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx index 6597ec5cc3..8e314af8a6 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx @@ -6,7 +6,7 @@ import { Trans } from "@lingui/macro" import BillingHistory from "./BillingHistory" import { Elements } from "@stripe/react-stripe-js" import { loadStripe } from "@stripe/stripe-js" -import CurrentProduct from "./CurrentProduct" +import CurrentProduct from "./CurrentPlan" const useStyles = makeStyles(({ breakpoints, constants }: ITheme) => createStyles({ From 71048ce3e28662079025bf33a0cf04a4a43be8e9 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 30 Nov 2021 00:10:11 +0600 Subject: [PATCH 02/39] subscribe modal --- .../src/Breadcrumb/Breadcrumb.tsx | 5 +- .../Settings/ChangePlan/ChangePlanModal.tsx | 42 +++--- .../{SelectPlan/index.tsx => SelectPlan.tsx} | 46 +++---- .../ChangePlan/SelectPlan/ProductInfo.tsx | 101 -------------- .../ChangePlan/SelectPlan/Products.tsx | 126 ------------------ .../Modules/Settings/ChangePlan/Subscribe.tsx | 38 ++++++ .../Settings/SubscriptionTab/CurrentPlan.tsx | 2 +- 7 files changed, 86 insertions(+), 274 deletions(-) rename packages/files-ui/src/Components/Modules/Settings/ChangePlan/{SelectPlan/index.tsx => SelectPlan.tsx} (84%) delete mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/ProductInfo.tsx delete mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/Products.tsx create mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/Subscribe.tsx diff --git a/packages/common-components/src/Breadcrumb/Breadcrumb.tsx b/packages/common-components/src/Breadcrumb/Breadcrumb.tsx index 4a4eeb4ead..01a0fb4f13 100644 --- a/packages/common-components/src/Breadcrumb/Breadcrumb.tsx +++ b/packages/common-components/src/Breadcrumb/Breadcrumb.tsx @@ -13,6 +13,7 @@ export type Crumb = { export type BreadcrumbProps = { crumbs?: Crumb[] homeOnClick?: () => void + hideHome?: boolean className?: string showDropDown?: boolean } @@ -94,6 +95,7 @@ const useStyles = makeStyles( const Breadcrumb: React.FC = ({ crumbs = [], homeOnClick, + hideHome, className, showDropDown }: BreadcrumbProps) => { @@ -169,10 +171,11 @@ const Breadcrumb: React.FC = ({ return (
- (homeOnClick ? homeOnClick() : null)} /> + } {generateCrumbs()}
) diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx index 810662119d..c21f7e51d3 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx @@ -1,15 +1,14 @@ import React, { useEffect, useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../Themes/types" -import clsx from "clsx" import { Modal } from "@chainsafe/common-components" import SelectPlan from "./SelectPlan" +import PlanDetails from "./Subscribe" import { useBilling } from "../../../../Contexts/BillingContext" +import { Product } from "@chainsafe/files-api-client" const useStyles = makeStyles(({ constants }: CSFTheme) => createStyles({ - root: { - }, inner: { borderRadius: `${constants.generalUnit / 2}px` }, @@ -21,43 +20,44 @@ const useStyles = makeStyles(({ constants }: CSFTheme) => ) interface IChangeProductModal { - className?: string - close: () => void + onClose: () => void } -const ChangeProductModal = ({ className, close }: IChangeProductModal) => { +const ChangeProductModal = ({ onClose }: IChangeProductModal) => { const classes = useStyles() - const { changeSubscription } = useBilling() - const [slide, setSlide] = useState<"select" | "confirm">("select") + const { getAvailablePlans } = useBilling() + const [selectedPlan, setSelectedPlan] = useState() + const [slide, setSlide] = useState<"select" | "subscribe">("select") + const [plans, setPlans] = useState() useEffect(() => { - if (slide !== "select") { - setSlide("select") + if(!plans) { + getAvailablePlans() + .then((plans) => setPlans(plans)) + .catch(console.error) } - }, [slide]) + }) return ( { - slide === "select" && { - // setSlide("confirm") - changeSubscription(newpriceId) - .then(() => close()) - .catch(console.error) + slide === "select" ? { + setSelectedPlan(plan) + setSlide("subscribe") }} - /> + plans={plans} + /> : slide === "subscribe" && selectedPlan ? : null } ) diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx similarity index 84% rename from packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx rename to packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx index 8cac29b365..a5eb450fcd 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx @@ -1,13 +1,13 @@ -import React, { useEffect, useState } from "react" +import React from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" import clsx from "clsx" import { Button, ExternalSvg, Loading, Typography } from "@chainsafe/common-components" import { Trans } from "@lingui/macro" -import { CSFTheme } from "../../../../../Themes/types" -import { useBilling } from "../../../../../Contexts/BillingContext" +import { CSFTheme } from "../../../../Themes/types" +import { useBilling } from "../../../../Contexts/BillingContext" import { Product } from "@chainsafe/files-api-client" -const useStyles = makeStyles(({ constants, palette, typography }: CSFTheme) => +const useStyles = makeStyles(({ breakpoints, constants, palette, typography }: CSFTheme) => createStyles({ root: { margin: `${constants.generalUnit * 2}px 0px` @@ -25,25 +25,30 @@ const useStyles = makeStyles(({ constants, palette, typography }: CSFTheme) => }, panels: { display: "grid", - gridColumnGap: constants.generalUnit, + gridColumnGap: constants.generalUnit * 1.5, + gridRowGap: constants.generalUnit * 1.5, gridTemplateColumns: "1fr 1fr 1fr", - margin: `${constants.generalUnit * 4}px 0` + margin: `${constants.generalUnit * 4}px 0`, + [breakpoints.down("sm")]: { + gridTemplateColumns: "1fr 1fr" + } }, planBox: { border: `2px solid ${palette.additional["gray"][5]}`, padding: constants.generalUnit * 3, display: "flex", flexDirection: "column", - alignItems: "center" + alignItems: "center", + borderRadius: 5 }, priceSpace: { height: 22 }, tag: { display: "block", - padding: `${constants.generalUnit * 0.25}px ${constants.generalUnit}px`, + padding: `0 ${constants.generalUnit}px`, borderRadius: `${constants.generalUnit * 2}px`, - height: 24, + height: 20, backgroundColor: palette.primary.main, color: constants.changeProduct.currentTag.text, margin: `${constants.generalUnit * 0.5}px 0` @@ -93,22 +98,14 @@ const useStyles = makeStyles(({ constants, palette, typography }: CSFTheme) => interface ISelectPlan { className?: string - close: () => void - next: (newPriceId: string) => void + plans?: Product[] + onClose: () => void + onSelectPlan: (plan: Product) => void } -const SelectPlan = ({ close, className }: ISelectPlan) => { +const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => { const classes = useStyles() - const { getAvailablePlans, currentSubscription } = useBilling() - const [plans, setPlans] = useState() - - useEffect(() => { - if(!plans) { - getAvailablePlans() - .then((plans) => setPlans(plans)) - .catch(console.error) - } - }) + const { currentSubscription } = useBilling() return (
@@ -176,7 +173,8 @@ const SelectPlan = ({ close, className }: ISelectPlan) => { Current plan - : } @@ -203,7 +201,7 @@ const SelectPlan = ({ close, className }: ISelectPlan) => {
{ isChangeProductModalVisible && ( setChangeProductModalVisible(false)} + onClose={() => setChangeProductModalVisible(false)} />) } From ff9f82cad36925119cda15066aff82d67c862f6f Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 30 Nov 2021 23:04:24 +0600 Subject: [PATCH 03/39] payment method page --- .../src/Breadcrumb/Breadcrumb.tsx | 16 +- .../src/stories/Breadcrumb.stories.tsx | 1 + .../Settings/ChangePlan/ChangePlanModal.tsx | 35 +++- .../Settings/ChangePlan/PaymentMethod.tsx | 127 +++++++++++ .../Settings/ChangePlan/PlanDetails.tsx | 198 ++++++++++++++++++ .../Settings/ChangePlan/SelectPlan.tsx | 6 +- .../Modules/Settings/ChangePlan/Subscribe.tsx | 38 ---- 7 files changed, 367 insertions(+), 54 deletions(-) create mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx create mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/PlanDetails.tsx delete mode 100644 packages/files-ui/src/Components/Modules/Settings/ChangePlan/Subscribe.tsx diff --git a/packages/common-components/src/Breadcrumb/Breadcrumb.tsx b/packages/common-components/src/Breadcrumb/Breadcrumb.tsx index 01a0fb4f13..9ddc6aa0af 100644 --- a/packages/common-components/src/Breadcrumb/Breadcrumb.tsx +++ b/packages/common-components/src/Breadcrumb/Breadcrumb.tsx @@ -61,7 +61,7 @@ const useStyles = makeStyles( "&.clickable": { cursor: "pointer" }, - maxWidth: 100, + maxWidth: 120, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", @@ -104,7 +104,6 @@ const Breadcrumb: React.FC = ({ const generateFullCrumbs = (crumbs: Crumb[]) => { return crumbs.map((item: Crumb, index: number) => ( -
(item.onClick ? item.onClick() : null)} @@ -114,6 +113,7 @@ const Breadcrumb: React.FC = ({ {item.text}
+ {index < (crumbs.length - 1) &&
} )) } @@ -152,7 +152,6 @@ const Breadcrumb: React.FC = ({ const lastCrumb = crumbs[crumbs.length - 1] return ( <> -
{generateDropdownCrumb(dropdownCrumbs)}
@@ -171,10 +170,13 @@ const Breadcrumb: React.FC = ({ return (
- {!hideHome && (homeOnClick ? homeOnClick() : null)} - /> + {!hideHome && <> + (homeOnClick ? homeOnClick() : null)} + /> +
+ } {generateCrumbs()}
diff --git a/packages/common-components/src/stories/Breadcrumb.stories.tsx b/packages/common-components/src/stories/Breadcrumb.stories.tsx index 8a4f3bd32e..ba9be0c287 100644 --- a/packages/common-components/src/stories/Breadcrumb.stories.tsx +++ b/packages/common-components/src/stories/Breadcrumb.stories.tsx @@ -38,6 +38,7 @@ export const BreadcrumbStory = (): React.ReactNode => { homeOnClick={() => actionsData.homeClicked()} showDropDown={boolean("show dropdown", true)} crumbs={crumbs} + hideHome={boolean("hide home", false)} /> )} diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx index c21f7e51d3..8c00397c6c 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx @@ -3,14 +3,18 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../Themes/types" import { Modal } from "@chainsafe/common-components" import SelectPlan from "./SelectPlan" -import PlanDetails from "./Subscribe" +import PlanDetails from "./PlanDetails" import { useBilling } from "../../../../Contexts/BillingContext" -import { Product } from "@chainsafe/files-api-client" +import { Product, ProductPrice } from "@chainsafe/files-api-client" +import PaymentMethod from "./PaymentMethod" -const useStyles = makeStyles(({ constants }: CSFTheme) => +const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) => createStyles({ inner: { - borderRadius: `${constants.generalUnit / 2}px` + borderRadius: `${constants.generalUnit / 2}px`, + [breakpoints.up("sm")]: { + minWidth: 480 + } }, slide: { borderRadius: constants.generalUnit / 2, @@ -27,7 +31,8 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { const classes = useStyles() const { getAvailablePlans } = useBilling() const [selectedPlan, setSelectedPlan] = useState() - const [slide, setSlide] = useState<"select" | "subscribe">("select") + const [selectedPrice, setSelectedPrice] = useState() + const [slide, setSlide] = useState<"select" | "planDetails" | "paymentMethod">("select") const [plans, setPlans] = useState() useEffect(() => { @@ -54,10 +59,26 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { onClose={onClose} onSelectPlan={(plan: Product) => { setSelectedPlan(plan) - setSlide("subscribe") + setSlide("planDetails") }} plans={plans} - /> : slide === "subscribe" && selectedPlan ? : null + /> : slide === "planDetails" && selectedPlan ? { + setSlide("select") + }} + onSelectPlanPrice={(planPrice: ProductPrice) => { + setSelectedPrice(planPrice) + setSlide("paymentMethod") + }} + /> : slide === "paymentMethod" ? { + setSlide("select") + }} + goToPlanDetails={() => { + setSlide("planDetails") + }} + /> : null } ) diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx new file mode 100644 index 0000000000..b71e8eb2dd --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx @@ -0,0 +1,127 @@ +import React from "react" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { CSFTheme } from "../../../../Themes/types" +import { Breadcrumb, Button, Divider, Typography } from "@chainsafe/common-components" +import { Trans } from "@lingui/macro" +import dayjs from "dayjs" + +const useStyles = makeStyles(({ constants }: CSFTheme) => + createStyles({ + root: { + margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px` + }, + heading: { + marginTop: constants.generalUnit * 3, + marginBottom: constants.generalUnit + }, + boldText: { + fontWeight: "bold" + }, + normalWeightText: { + fontWeight: "normal" + }, + rowBox: { + display: "flex", + padding: `${constants.generalUnit * 0.5}px 0px` + }, + middleRowBox: { + display: "flex", + alignItems: "center", + padding: `${constants.generalUnit * 0.5}px 0px` + }, + pushRightBox: { + display: "flex", + flexDirection: "column", + alignItems: "flex-end", + flex: 1 + }, + buttons: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "flex-end", + "& > *": { + marginLeft: constants.generalUnit + } + }, + bottomSection: { + display: "flex", + flexDirection: "row", + justifyContent: "flex-end", + alignItems: "center", + margin: `${constants.generalUnit * 3}px 0px` + }, + divider: { + margin: `${constants.generalUnit}px 0` + } + }) +) + +interface IPaymentMethodProps { + onClose: () => void + goToSelectPlan: () => void + goToPlanDetails: () => void +} + +const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails }: IPaymentMethodProps) => { + const classes = useStyles() + + + return ( +
+ + + Select payment method + + +
+ + Billing start time + +
+ {dayjs().format("DD MMM YYYY")} +
+
+ +
+
+ + +
+
+
+ ) +} + +export default PlanDetails \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PlanDetails.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PlanDetails.tsx new file mode 100644 index 0000000000..4b579fdd1c --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PlanDetails.tsx @@ -0,0 +1,198 @@ +import React, { useState } from "react" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { CSFTheme } from "../../../../Themes/types" +import { Product, ProductPrice } from "@chainsafe/files-api-client" +import { Breadcrumb, Button, Divider, ToggleSwitch, Typography } from "@chainsafe/common-components" +import { Trans } from "@lingui/macro" +import dayjs from "dayjs" + +const useStyles = makeStyles(({ constants }: CSFTheme) => + createStyles({ + root: { + margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px` + }, + heading: { + marginTop: constants.generalUnit * 3, + marginBottom: constants.generalUnit + }, + subheading: { + marginBottom: constants.generalUnit * 3 + }, + boldText: { + fontWeight: "bold" + }, + normalWeightText: { + fontWeight: "normal" + }, + rowBox: { + display: "flex", + padding: `${constants.generalUnit * 0.5}px 0px` + }, + middleRowBox: { + display: "flex", + alignItems: "center", + padding: `${constants.generalUnit * 0.5}px 0px` + }, + pushRightBox: { + display: "flex", + flexDirection: "column", + alignItems: "flex-end", + flex: 1 + }, + buttons: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "flex-end", + "& > *": { + marginLeft: constants.generalUnit + } + }, + bottomSection: { + display: "flex", + flexDirection: "row", + justifyContent: "flex-end", + alignItems: "center", + margin: `${constants.generalUnit * 3}px 0px` + }, + divider: { + margin: `${constants.generalUnit}px 0` + } + }) +) + +interface IPlanDetails { + plan: Product + onClose: () => void + goToSelectPlan: () => void + onSelectPlanPrice: (planPrice: ProductPrice) => void +} + +const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlanDetails) => { + const classes = useStyles() + + const monthlyPrice = plan.prices.find((price) => price.recurring.interval === "month") + const yearlyPrice = plan.prices.find((price) => price.recurring.interval === "year") + + const [billingPeriod, setBillingPeriod] = useState<"monthly" | "yearly">(monthlyPrice ? "monthly" : "yearly") + + const handleSelectPlan = () => { + if(billingPeriod === "monthly" && monthlyPrice) { + onSelectPlanPrice(monthlyPrice) + } else if (yearlyPrice) { + onSelectPlanPrice(yearlyPrice) + } + } + + return ( +
+ + + {plan.name} + + + You get access to these features right now. + + +
+ + Features + +
+ + {plan.description} + +
+
+ +
+ + Billing start time + +
+ {dayjs().format("DD MMM YYYY")} +
+
+ +
+ + {billingPeriod === "monthly" + ? Monthly billing + : Yearly billing + } + +
+ + setBillingPeriod(billingPeriod === "monthly" ? "yearly" : "monthly") + } + /> +
+
+ +
+ + Total + +
+ {billingPeriod === "monthly" + ? `${monthlyPrice?.currency} ${monthlyPrice?.unit_amount}` + : `${yearlyPrice?.currency} ${yearlyPrice?.unit_amount}` + }{billingPeriod ? "/month" : "/year"} + +
+
+
+
+ + +
+
+
+ ) +} + +export default PlanDetails \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx index a5eb450fcd..5457dace85 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/SelectPlan.tsx @@ -16,7 +16,8 @@ const useStyles = makeStyles(({ breakpoints, constants, palette, typography }: C display: "flex", flexDirection: "row", alignItems: "center", - justifyContent: "space-between" + justifyContent: "space-between", + marginTop: constants.generalUnit * 2 }, loadingContainer: { margin: `${constants.generalUnit * 4}px 0`, @@ -28,7 +29,8 @@ const useStyles = makeStyles(({ breakpoints, constants, palette, typography }: C gridColumnGap: constants.generalUnit * 1.5, gridRowGap: constants.generalUnit * 1.5, gridTemplateColumns: "1fr 1fr 1fr", - margin: `${constants.generalUnit * 4}px 0`, + marginTop: constants.generalUnit * 2, + marginBottom: constants.generalUnit * 4, [breakpoints.down("sm")]: { gridTemplateColumns: "1fr 1fr" } diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/Subscribe.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/Subscribe.tsx deleted file mode 100644 index e83aa2c8ea..0000000000 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/Subscribe.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react" -import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" -import { Product } from "@chainsafe/files-api-client" -import { Breadcrumb } from "@chainsafe/common-components" - -const useStyles = makeStyles(({ constants }: CSFTheme) => - createStyles({ - root: { - margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px` - } - - }) -) - -interface IPlanDetails { - plan: Product -} - -const PlanDetails = ({ plan }: IPlanDetails) => { - const classes = useStyles() - - return ( -
- - {plan.name} -
- ) -} - -export default PlanDetails \ No newline at end of file From 8cc8847ed60fcb0897e43167e6c39cdf0f546f8f Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Wed, 1 Dec 2021 01:06:24 +0600 Subject: [PATCH 04/39] payment method page --- .../src/RadioInput/RadioInput.tsx | 7 +- .../Settings/ChangePlan/PaymentMethod.tsx | 89 ++++++++++++++----- 2 files changed, 71 insertions(+), 25 deletions(-) diff --git a/packages/common-components/src/RadioInput/RadioInput.tsx b/packages/common-components/src/RadioInput/RadioInput.tsx index 69a00e5c39..e413c9c6d7 100644 --- a/packages/common-components/src/RadioInput/RadioInput.tsx +++ b/packages/common-components/src/RadioInput/RadioInput.tsx @@ -13,7 +13,6 @@ const useStyles = makeStyles( cursor: "pointer", paddingLeft: constants.generalUnit * 3, paddingRight: constants.generalUnit * 3, - margin: `${constants.generalUnit}px 0`, ...overrides?.RadioInput?.radioContainer }, radioInput: { @@ -27,7 +26,7 @@ const useStyles = makeStyles( width: constants.generalUnit * 2, height: constants.generalUnit * 2, left: 0, - top: 0, + top: "auto", borderRadius: "50%", transition: `all ${animation.transform}ms ease`, ...overrides?.RadioInput?.radio?.root, @@ -83,6 +82,7 @@ const useStyles = makeStyles( export interface IRadioInputProps extends React.HTMLProps { className?: string + labelClassName?: string value: string label?: string name?: string @@ -94,6 +94,7 @@ export interface IRadioInputProps extends React.HTMLProps { const RadioInput: React.FC = ({ className, + labelClassName, value, name, label, @@ -130,7 +131,7 @@ const RadioInput: React.FC = ({ })} /> {label && ( - {label} + {label} )} {error &&
{error}
} diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx index b71e8eb2dd..53f4aa0526 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx @@ -1,18 +1,21 @@ -import React from "react" +import React, { useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../Themes/types" -import { Breadcrumb, Button, Divider, Typography } from "@chainsafe/common-components" +import { Breadcrumb, Button, Divider, RadioInput, Typography } from "@chainsafe/common-components" import { Trans } from "@lingui/macro" -import dayjs from "dayjs" -const useStyles = makeStyles(({ constants }: CSFTheme) => +const useStyles = makeStyles(({ constants, palette }: CSFTheme) => createStyles({ root: { margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px` }, heading: { marginTop: constants.generalUnit * 3, - marginBottom: constants.generalUnit + marginBottom: constants.generalUnit * 2 + }, + subHeading: { + marginBottom: constants.generalUnit * 2, + color: palette.additional["gray"][8] }, boldText: { fontWeight: "bold" @@ -22,12 +25,7 @@ const useStyles = makeStyles(({ constants }: CSFTheme) => }, rowBox: { display: "flex", - padding: `${constants.generalUnit * 0.5}px 0px` - }, - middleRowBox: { - display: "flex", - alignItems: "center", - padding: `${constants.generalUnit * 0.5}px 0px` + justifyContent: "space-between" }, pushRightBox: { display: "flex", @@ -47,12 +45,24 @@ const useStyles = makeStyles(({ constants }: CSFTheme) => bottomSection: { display: "flex", flexDirection: "row", - justifyContent: "flex-end", + justifyContent: "space-between", alignItems: "center", - margin: `${constants.generalUnit * 3}px 0px` + marginTop: constants.generalUnit * 4, + marginBottom: constants.generalUnit * 3 }, divider: { margin: `${constants.generalUnit}px 0` + }, + radioLabel: { + fontSize: 14 + }, + textButton: { + color: palette.primary.main, + cursor: "pointer" + }, + linkButton: { + textDecoration: "underline", + cursor: "pointer" } }) ) @@ -65,7 +75,10 @@ interface IPaymentMethodProps { const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails }: IPaymentMethodProps) => { const classes = useStyles() + const [paymentMethod, setPaymentMethod] = useState<"creditCard" | "crypto" | undefined>() + const [view, setView] = useState<"selectPaymentMethod" | "addCard">("selectPaymentMethod") + console.log(view) return (
@@ -87,20 +100,51 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails }: IPaymentMetho > Select payment method + + {view === "addCard" && Select payment method} + +
- - Billing start time + setPaymentMethod("creditCard")} + checked={paymentMethod === "creditCard"} + labelClassName={classes.radioLabel} + /> + setView("addCard")} + > + Add credit card -
- {dayjs().format("DD MMM YYYY")} -
+ setPaymentMethod("crypto")} + checked={paymentMethod === "crypto"} + labelClassName={classes.radioLabel} + disabled={true} + /> +
+ {view === "addCard" ?
+ setView("selectPaymentMethod")} + className={classes.linkButton} + > + Go back + +
:
+ }
From b74d6ba1cdc03a6d7e1abb114b618e33b0f5af16 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Wed, 1 Dec 2021 21:39:54 +0600 Subject: [PATCH 05/39] confirm plan in progress --- .../{AddCardModal.tsx => AddCard/AddCard.tsx} | 195 +++++++----------- .../SubscriptionTab/AddCard/AddCardModal.tsx | 80 +++++++ .../ChangePlan/ChangePlanModal.tsx | 40 +++- .../ChangePlan/ConfirmPlan.tsx | 182 ++++++++++++++++ .../ChangePlan/PaymentMethod.tsx | 92 ++++++--- .../ChangePlan/PlanDetails.tsx | 2 +- .../ChangePlan/SelectPlan.tsx | 4 +- .../Settings/SubscriptionTab/CurrentCard.tsx | 2 +- .../Settings/SubscriptionTab/CurrentPlan.tsx | 2 +- .../files-ui/src/Contexts/BillingContext.tsx | 6 +- 10 files changed, 439 insertions(+), 166 deletions(-) rename packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/{AddCardModal.tsx => AddCard/AddCard.tsx} (55%) create mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx rename packages/files-ui/src/Components/Modules/Settings/{ => SubscriptionTab}/ChangePlan/ChangePlanModal.tsx (65%) create mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx rename packages/files-ui/src/Components/Modules/Settings/{ => SubscriptionTab}/ChangePlan/PaymentMethod.tsx (60%) rename packages/files-ui/src/Components/Modules/Settings/{ => SubscriptionTab}/ChangePlan/PlanDetails.tsx (99%) rename packages/files-ui/src/Components/Modules/Settings/{ => SubscriptionTab}/ChangePlan/SelectPlan.tsx (98%) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx similarity index 55% rename from packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx rename to packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx index ec28f321f3..07d979e66c 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx @@ -1,37 +1,20 @@ import React, { FormEvent, useState } from "react" import { Button, Grid, Typography, useToasts } from "@chainsafe/common-components" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" -import CustomModal from "../../../Elements/CustomModal" -import CustomButton from "../../../Elements/CustomButton" +import { CSFTheme } from "../../../../../Themes/types" +import CustomButton from "../../../../Elements/CustomButton" import { t, Trans } from "@lingui/macro" import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js" -import { useFilesApi } from "../../../../Contexts/FilesApiContext" -import { useBilling } from "../../../../Contexts/BillingContext" +import { useFilesApi } from "../../../../../Contexts/FilesApiContext" +import { useBilling } from "../../../../../Contexts/BillingContext" import clsx from "clsx" const useStyles = makeStyles( - ({ breakpoints, constants, typography, zIndex, palette, animation }: CSFTheme) => { + ({ breakpoints, constants, palette, animation }: CSFTheme) => { return createStyles({ root: { - padding: constants.generalUnit * 4, flexDirection: "column" }, - modalRoot: { - zIndex: zIndex?.blocker, - [breakpoints.down("md")]: {} - }, - modalInner: { - backgroundColor: constants.createFolder.backgroundColor, - color: constants.createFolder.color, - [breakpoints.down("md")]: { - bottom: - Number(constants?.mobileButtonHeight) + constants.generalUnit, - borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, - borderTopRightRadius: `${constants.generalUnit * 1.5}px`, - maxWidth: `${breakpoints.width("md")}px !important` - } - }, okButton: { marginLeft: constants.generalUnit }, @@ -48,15 +31,6 @@ const useStyles = makeStyles( fontSize: 14, lineHeight: "22px" }, - heading: { - color: constants.createFolder.color, - fontWeight: typography.fontWeight.semibold, - textAlign: "left", - marginBottom: constants.generalUnit * 2 - }, - footer: { - marginTop: constants.generalUnit * 4 - }, cardNumberInputs: { marginBottom: constants.generalUnit * 2, [breakpoints.down("md")]: { @@ -96,11 +70,13 @@ const useStyles = makeStyles( ) interface IAddCardModalProps { - isModalOpen: boolean - onClose: () => void + submitText: string + onCardAdd?: () => void + onClose?: () => void + footerClassName?: string } -const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { +const AddCardModal = ({ onCardAdd, submitText, onClose, footerClassName }: IAddCardModalProps) => { const classes = useStyles() const stripe = useStripe() const elements = useElements() @@ -149,7 +125,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { id: paymentMethod.id }) refreshDefaultCard() - onClose() + onCardAdd && onCardAdd() setLoadingPaymentMethodAdd(false) addToast({ title: "Payment method added", type: "success" }) } catch (error) { @@ -160,79 +136,57 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { } return ( - -
-
- - - Add a credit card - - - +
+ setFocusElement("number")} + onBlur={() => setFocusElement(undefined)} + onChange={() => setCardAddError(undefined)} + /> +
+ setFocusElement("expiry")} + onBlur={() => setFocusElement(undefined)} + onChange={() => setCardAddError(undefined)} + options={{ style: { base: { color: theme.constants.addCard.color } } }} - onFocus={() => setFocusElement("number")} + /> + setFocusElement("cvc")} onBlur={() => setFocusElement(undefined)} onChange={() => setCardAddError(undefined)} + options={{ style: { + base: { + color: theme.constants.addCard.color + } + } }} /> -
- setFocusElement("expiry")} - onBlur={() => setFocusElement(undefined)} - onChange={() => setCardAddError(undefined)} - options={{ style: { - base: { - color: theme.constants.addCard.color - } - } }} - /> - setFocusElement("cvc")} - onBlur={() => setFocusElement(undefined)} - onChange={() => setCardAddError(undefined)} - options={{ style: { - base: { - color: theme.constants.addCard.color - } - } }} - /> -
- {cardAddError && +
+ {cardAddError && { > {cardAddError} - } - + } + + {onClose && { > Cancel - - -
- - + } + + +
+ ) } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx new file mode 100644 index 0000000000..bfce7808c9 --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCardModal.tsx @@ -0,0 +1,80 @@ +import React from "react" +import { createStyles, makeStyles } from "@chainsafe/common-theme" +import { CSFTheme } from "../../../../../Themes/types" +import CustomModal from "../../../../Elements/CustomModal" +import { t, Trans } from "@lingui/macro" +import AddCard from "./AddCard" +import { Typography } from "@chainsafe/common-components" + +const useStyles = makeStyles( + ({ breakpoints, constants, zIndex, typography }: CSFTheme) => { + return createStyles({ + root: { + padding: constants.generalUnit * 4 + }, + modalRoot: { + zIndex: zIndex?.blocker, + [breakpoints.down("md")]: {} + }, + modalInner: { + backgroundColor: constants.createFolder.backgroundColor, + color: constants.createFolder.color, + [breakpoints.down("md")]: { + bottom: + Number(constants?.mobileButtonHeight) + constants.generalUnit, + borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, + borderTopRightRadius: `${constants.generalUnit * 1.5}px`, + maxWidth: `${breakpoints.width("md")}px !important` + } + }, + heading: { + color: constants.createFolder.color, + fontWeight: typography.fontWeight.semibold, + textAlign: "left", + marginBottom: constants.generalUnit * 3 + }, + footer: { + marginTop: constants.generalUnit * 4 + } + }) + } +) + +interface IAddCardModalProps { + isModalOpen: boolean + onClose: () => void +} + +const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { + const classes = useStyles() + + return ( + +
+ + Add a credit card + + +
+ + ) +} + +export default AddCardModal diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx similarity index 65% rename from packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx rename to packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx index 8c00397c6c..8aa13abc15 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx @@ -1,12 +1,13 @@ import React, { useEffect, useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" +import { CSFTheme } from "../../../../../Themes/types" import { Modal } from "@chainsafe/common-components" import SelectPlan from "./SelectPlan" import PlanDetails from "./PlanDetails" -import { useBilling } from "../../../../Contexts/BillingContext" -import { Product, ProductPrice } from "@chainsafe/files-api-client" import PaymentMethod from "./PaymentMethod" +import ConfirmPlan from "./ConfirmPlan" +import { useBilling } from "../../../../../Contexts/BillingContext" +import { Product, ProductPrice } from "@chainsafe/files-api-client" const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) => createStyles({ @@ -29,11 +30,12 @@ interface IChangeProductModal { const ChangeProductModal = ({ onClose }: IChangeProductModal) => { const classes = useStyles() - const { getAvailablePlans } = useBilling() + const { getAvailablePlans, changeSubscription } = useBilling() const [selectedPlan, setSelectedPlan] = useState() const [selectedPrice, setSelectedPrice] = useState() - const [slide, setSlide] = useState<"select" | "planDetails" | "paymentMethod">("select") + const [slide, setSlide] = useState<"select" | "planDetails" | "paymentMethod" | "confirmPlan">("select") const [plans, setPlans] = useState() + const [isLoadingChangeSubscription, setIsLoadingChangeSubscription] = useState(false) useEffect(() => { if(!plans) { @@ -43,6 +45,16 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { } }) + const handleChangeSubscription = () => { + if (selectedPrice) { + setIsLoadingChangeSubscription(true) + changeSubscription(selectedPrice.id) + .then(onClose) + .catch(console.error) + .finally(() => setIsLoadingChangeSubscription(false)) + } + } + return ( { goToPlanDetails={() => { setSlide("planDetails") }} + onSelectPaymentMethod={() => { + setSlide("confirmPlan") + }} + /> : slide === "confirmPlan" && selectedPlan && selectedPrice ? { + setSlide("select") + }} + goToPlanDetails={() => { + setSlide("planDetails") + }} + goToPaymentMethod={() => { + setSlide("paymentMethod") + }} + loadingChangeSubscription={isLoadingChangeSubscription} + onChangeSubscription={handleChangeSubscription} /> : null } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx new file mode 100644 index 0000000000..403fbf01ef --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx @@ -0,0 +1,182 @@ +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 { Breadcrumb, Button, Divider, Typography } from "@chainsafe/common-components" +import { Trans } from "@lingui/macro" +import dayjs from "dayjs" + +const useStyles = makeStyles(({ constants }: CSFTheme) => + createStyles({ + root: { + margin: `${constants.generalUnit * 2}px ${constants.generalUnit * 2}px` + }, + heading: { + marginTop: constants.generalUnit * 3, + marginBottom: constants.generalUnit + }, + subheading: { + marginBottom: constants.generalUnit * 3 + }, + boldText: { + fontWeight: "bold" + }, + normalWeightText: { + fontWeight: "normal" + }, + rowBox: { + display: "flex", + padding: `${constants.generalUnit * 0.5}px 0px` + }, + middleRowBox: { + display: "flex", + alignItems: "center", + padding: `${constants.generalUnit * 0.5}px 0px` + }, + pushRightBox: { + display: "flex", + flexDirection: "column", + alignItems: "flex-end", + flex: 1 + }, + buttons: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "flex-end", + "& > *": { + marginLeft: constants.generalUnit + } + }, + bottomSection: { + display: "flex", + flexDirection: "row", + justifyContent: "flex-end", + alignItems: "center", + margin: `${constants.generalUnit * 3}px 0px` + }, + divider: { + margin: `${constants.generalUnit}px 0` + } + }) +) + +interface IConfirmPlan { + plan: Product + planPrice: ProductPrice + onClose: () => void + goToSelectPlan: () => void + goToPlanDetails: () => void + goToPaymentMethod: () => void + onChangeSubscription: () => void + loadingChangeSubscription: boolean +} + +const ConfirmPlan = ({ + plan, + onClose, + planPrice, + goToSelectPlan, + goToPlanDetails, + goToPaymentMethod, + onChangeSubscription, + loadingChangeSubscription +}: IConfirmPlan) => { + const classes = useStyles() + + return ( +
+ + + {plan.name} + + +
+ + Features + +
+ + {plan.description} + +
+
+ +
+ + Billing start time + +
+ {dayjs().format("DD MMM YYYY")} +
+
+ + +
+ + Total + +
+ + {planPrice.currency} ${planPrice.unit_amount} + + {planPrice.recurring.interval === "month" ? "/month" : "/year"} + + +
+
+
+
+ + +
+
+
+ ) +} + +export default ConfirmPlan \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx similarity index 60% rename from packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx rename to packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx index 53f4aa0526..3118e23990 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ChangePlan/PaymentMethod.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx @@ -1,8 +1,10 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" +import { CSFTheme } from "../../../../../Themes/types" import { Breadcrumb, Button, Divider, RadioInput, Typography } from "@chainsafe/common-components" -import { Trans } from "@lingui/macro" +import { t, Trans } from "@lingui/macro" +import AddCard from "../AddCard/AddCard" +import { useBilling } from "../../../../../Contexts/BillingContext" const useStyles = makeStyles(({ constants, palette }: CSFTheme) => createStyles({ @@ -63,6 +65,12 @@ const useStyles = makeStyles(({ constants, palette }: CSFTheme) => linkButton: { textDecoration: "underline", cursor: "pointer" + }, + addCardWrapper: { + padding: `${constants.generalUnit * 2}px 0px` + }, + footer: { + marginTop: constants.generalUnit * 2 } }) ) @@ -71,14 +79,20 @@ interface IPaymentMethodProps { onClose: () => void goToSelectPlan: () => void goToPlanDetails: () => void + onSelectPaymentMethod: () => void } -const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails }: IPaymentMethodProps) => { +const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails, onSelectPaymentMethod }: IPaymentMethodProps) => { const classes = useStyles() const [paymentMethod, setPaymentMethod] = useState<"creditCard" | "crypto" | undefined>() const [view, setView] = useState<"selectPaymentMethod" | "addCard">("selectPaymentMethod") + const { defaultCard } = useBilling() - console.log(view) + useEffect(() => { + if (defaultCard) { + setPaymentMethod("creditCard") + } + }, [defaultCard]) return (
@@ -104,35 +118,47 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails }: IPaymentMetho component="p" className={classes.subHeading} > - {view === "addCard" && Select payment method} + {view === "addCard" && This card will become your default payment method} - -
- setPaymentMethod("creditCard")} - checked={paymentMethod === "creditCard"} - labelClassName={classes.radioLabel} - /> - setView("addCard")} - > - Add credit card - -
- - setPaymentMethod("crypto")} - checked={paymentMethod === "crypto"} - labelClassName={classes.radioLabel} - disabled={true} - /> + {view === "selectPaymentMethod" + ? <> +
+ setPaymentMethod("creditCard")} + checked={paymentMethod === "creditCard"} + labelClassName={classes.radioLabel} + /> + setView("addCard")} + > + {defaultCard + ? Update credit card + : Add credit card + } + +
+ + setPaymentMethod("crypto")} + checked={paymentMethod === "crypto"} + labelClassName={classes.radioLabel} + disabled={true} + /> + + :
+ setView("selectPaymentMethod")} + /> +
+ }
{view === "addCard" ?
@@ -157,7 +183,7 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails }: IPaymentMetho +
:
isPlanSelectable && setTempSelectedPlan(plan)} + key={`plan-${plan.id}`} + > +
+ - - Current plan - - : - } + {plan.name} + + + { + monthly?.metadata?.storage_size_bytes + ? <> + {formatBytes(Number(monthly?.metadata?.storage_size_bytes), 2)}  + of storage + + : plan.description + } + +
+
+ {monthly && + {monthly.unit_amount ? <> + {monthly.currency.toUpperCase()} {monthly.unit_amount} + /month + : "Free"} + + } + {monthly && yearly ? + {yearly.currency.toUpperCase()} {yearly.unit_amount} + /year + :
+ } +
}) }
+ {desktop && + }
+ {!desktop && + + }
diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts index e7587c0b17..6acadb4aa5 100644 --- a/packages/files-ui/src/Themes/DarkTheme.ts +++ b/packages/files-ui/src/Themes/DarkTheme.ts @@ -158,7 +158,8 @@ export const darkTheme = createTheme({ palette: { primary: { main: "var(--gray3)", - hover: "var(--gray10)" + hover: "var(--gray10)", + background: "var(--csf-primary)" }, secondary: { main: "var(--gray10)", diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts index 8d8e88f9be..95b20987c7 100644 --- a/packages/files-ui/src/Themes/LightTheme.ts +++ b/packages/files-ui/src/Themes/LightTheme.ts @@ -10,7 +10,8 @@ export const lightTheme = createTheme({ themeConfig: { palette: { primary: { - main: "var(--csf-primary)" + main: "var(--csf-primary)", + background: "var(--csf-primary)" }, secondary: { } From 877a791f9ac5472b25330c2dce1033f09390a239 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 00:41:05 +0600 Subject: [PATCH 08/39] UI ready --- packages/common-components/src/Breadcrumb/Breadcrumb.tsx | 4 ++-- .../Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/common-components/src/Breadcrumb/Breadcrumb.tsx b/packages/common-components/src/Breadcrumb/Breadcrumb.tsx index 9ddc6aa0af..5bcf51c909 100644 --- a/packages/common-components/src/Breadcrumb/Breadcrumb.tsx +++ b/packages/common-components/src/Breadcrumb/Breadcrumb.tsx @@ -122,7 +122,7 @@ const Breadcrumb: React.FC = ({ return ( = ({ if (crumbs.length < 3 || !showDropDown) { return generateFullCrumbs(crumbs) } else { - const dropdownCrumbs = crumbs.slice(0, length - 1) + const dropdownCrumbs = crumbs.slice(0, crumbs.length - 1) const lastCrumb = crumbs[crumbs.length - 1] return ( <> diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx index de68cb53c9..27217e2b1a 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx @@ -122,6 +122,7 @@ const ConfirmPlan = ({ text: "Confirm plan" }]} hideHome={true} + showDropDown={true} /> Date: Fri, 3 Dec 2021 13:43:40 +0600 Subject: [PATCH 09/39] before success page --- .../SubscriptionTab/ChangePlan/ChangePlanModal.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx index 4e72b3926a..29ed966d69 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../../Themes/types" -import { Modal } from "@chainsafe/common-components" +import { Modal, useToasts } from "@chainsafe/common-components" import SelectPlan from "./SelectPlan" import PlanDetails from "./PlanDetails" import PaymentMethod from "./PaymentMethod" @@ -40,6 +40,7 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { const [slide, setSlide] = useState<"select" | "planDetails" | "paymentMethod" | "confirmPlan">("select") const [plans, setPlans] = useState() const [isLoadingChangeSubscription, setIsLoadingChangeSubscription] = useState(false) + const { addToast } = useToasts() useEffect(() => { if(!plans) { @@ -53,7 +54,10 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { if (selectedPrice) { setIsLoadingChangeSubscription(true) changeSubscription(selectedPrice.id) - .then(onClose) + .then(() => { + onClose() + addToast({ title: "Subscription updated", type: "success" }) + }) .catch(console.error) .finally(() => setIsLoadingChangeSubscription(false)) } From 49ca414f257d23e53b22ec27ddca4e7a414a6923 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 15:24:58 +0600 Subject: [PATCH 10/39] all pages complete --- .../ChangePlan/ChangePlanModal.tsx | 27 ++- .../ChangePlan/ConfirmPlan.tsx | 37 +++- .../ChangePlan/PlanDetails.tsx | 17 +- .../ChangePlan/PlanSuccess.tsx | 174 ++++++++++++++++++ 4 files changed, 244 insertions(+), 11 deletions(-) create mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx index 29ed966d69..f906841665 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx @@ -1,13 +1,14 @@ import React, { useEffect, useState } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../../Themes/types" -import { Modal, useToasts } from "@chainsafe/common-components" +import { Modal } from "@chainsafe/common-components" import SelectPlan from "./SelectPlan" import PlanDetails from "./PlanDetails" import PaymentMethod from "./PaymentMethod" import ConfirmPlan from "./ConfirmPlan" import { useBilling } from "../../../../../Contexts/BillingContext" import { Product, ProductPrice } from "@chainsafe/files-api-client" +import PlanSuccess from "./PlanSuccess" const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) => createStyles({ @@ -37,10 +38,16 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { const { getAvailablePlans, changeSubscription } = useBilling() const [selectedPlan, setSelectedPlan] = useState() const [selectedPrice, setSelectedPrice] = useState() - const [slide, setSlide] = useState<"select" | "planDetails" | "paymentMethod" | "confirmPlan">("select") + const [slide, setSlide] = useState< + "select" + | "planDetails" + | "paymentMethod" + | "confirmPlan" + | "planSuccess" + >("select") const [plans, setPlans] = useState() const [isLoadingChangeSubscription, setIsLoadingChangeSubscription] = useState(false) - const { addToast } = useToasts() + const [isSubscriptionError, setIsSubscriptionError] = useState(false) useEffect(() => { if(!plans) { @@ -56,9 +63,12 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { changeSubscription(selectedPrice.id) .then(() => { onClose() - addToast({ title: "Subscription updated", type: "success" }) + setSlide("planSuccess") + }) + .catch((error) => { + console.error(error) + setIsSubscriptionError(true) }) - .catch(console.error) .finally(() => setIsLoadingChangeSubscription(false)) } } @@ -116,7 +126,12 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { }} loadingChangeSubscription={isLoadingChangeSubscription} onChangeSubscription={handleChangeSubscription} - /> : null + isSubscriptionError={isSubscriptionError} + /> : slide === "planSuccess" && selectedPlan && selectedPrice && } ) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx index 27217e2b1a..2220bcd5e9 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx @@ -2,7 +2,7 @@ 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 { Breadcrumb, Button, CreditCardIcon, Divider, Typography } from "@chainsafe/common-components" +import { Breadcrumb, Button, CreditCardIcon, Divider, formatBytes, Typography } from "@chainsafe/common-components" import { Trans } from "@lingui/macro" import dayjs from "dayjs" import { useBilling } from "../../../../../Contexts/BillingContext" @@ -78,6 +78,13 @@ const useStyles = makeStyles(({ constants, palette }: CSFTheme) => alignItems: "center", marginTop: constants.generalUnit, marginBottom: constants.generalUnit + }, + featureSeparator: { + marginBottom: constants.generalUnit + }, + error: { + marginTop: constants.generalUnit, + color: palette.error.main } }) ) @@ -91,6 +98,7 @@ interface IConfirmPlan { goToPaymentMethod: () => void onChangeSubscription: () => void loadingChangeSubscription: boolean + isSubscriptionError: boolean } const ConfirmPlan = ({ @@ -101,7 +109,8 @@ const ConfirmPlan = ({ goToPlanDetails, goToPaymentMethod, onChangeSubscription, - loadingChangeSubscription + loadingChangeSubscription, + isSubscriptionError }: IConfirmPlan) => { const classes = useStyles() const { defaultCard } = useBilling() @@ -154,9 +163,20 @@ const ConfirmPlan = ({ Features
- + {planPrice?.metadata?.storage_size_bytes + ? <> + {formatBytes(Number(planPrice?.metadata?.storage_size_bytes), 2)}  + of storage + + : plan.description + } + + {plan.description}
@@ -216,6 +236,15 @@ const ConfirmPlan = ({
+ {isSubscriptionError && + + Failed to change subscription + + }
+
+
+
+ ) +} + +export default PlanSuccess \ No newline at end of file From ee2e7ed1594b4efd02c7a8a89aaa3c5d2c940213 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 15:36:09 +0600 Subject: [PATCH 11/39] success and failed API handle --- .../Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx index f906841665..e763503aec 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx @@ -62,7 +62,6 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { setIsLoadingChangeSubscription(true) changeSubscription(selectedPrice.id) .then(() => { - onClose() setSlide("planSuccess") }) .catch((error) => { From 0c3984aa73608965600b266d98f2bfe6238069e7 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 15:42:40 +0600 Subject: [PATCH 12/39] check on reanslations --- .../SubscriptionTab/ChangePlan/ConfirmPlan.tsx | 14 +++++++------- .../SubscriptionTab/ChangePlan/PaymentMethod.tsx | 6 +++--- .../SubscriptionTab/ChangePlan/PlanDetails.tsx | 6 +++--- .../SubscriptionTab/ChangePlan/SelectPlan.tsx | 1 - 4 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx index 2220bcd5e9..4c89437b17 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx @@ -3,7 +3,7 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../../Themes/types" import { Product, ProductPrice } from "@chainsafe/files-api-client" import { Breadcrumb, Button, CreditCardIcon, Divider, formatBytes, Typography } from "@chainsafe/common-components" -import { Trans } from "@lingui/macro" +import { t, Trans } from "@lingui/macro" import dayjs from "dayjs" import { useBilling } from "../../../../../Contexts/BillingContext" import clsx from "clsx" @@ -119,16 +119,16 @@ const ConfirmPlan = ({
- Features + Features
- Payment method + Payment method
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx index 9b4c6b0456..eb8b837a1e 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx @@ -3,7 +3,7 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../../Themes/types" import { Product, ProductPrice } from "@chainsafe/files-api-client" import { Breadcrumb, Button, Divider, formatBytes, ToggleSwitch, Typography } from "@chainsafe/common-components" -import { Trans } from "@lingui/macro" +import { t, Trans } from "@lingui/macro" import dayjs from "dayjs" const useStyles = makeStyles(({ constants }: CSFTheme) => @@ -91,10 +91,10 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan
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 index a6be6b182b..d6b9d46f2e 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx @@ -286,7 +286,6 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => > Select plan - }
From b80aa0fdcc7f1444ea9c376c78070cdd8996e73e Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 15:43:23 +0600 Subject: [PATCH 13/39] compile trans --- packages/files-ui/src/locales/de/messages.po | 131 ++++++++++++++---- packages/files-ui/src/locales/en/messages.po | 133 +++++++++++++++---- packages/files-ui/src/locales/es/messages.po | 131 ++++++++++++++---- packages/files-ui/src/locales/fr/messages.po | 131 ++++++++++++++---- packages/files-ui/src/locales/no/messages.po | 131 ++++++++++++++---- 5 files changed, 531 insertions(+), 126 deletions(-) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 471472f20c..44f23ff979 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -25,6 +25,9 @@ msgstr "Es existiert bereits eine Datei mit demselben Namen" msgid "Accept" msgstr "Akzeptieren" +msgid "Access your billing history in settings or view your" +msgstr "" + msgid "Account" msgstr "Konto" @@ -49,6 +52,9 @@ msgstr "Durch Freigabe der Adresse, des Benutzernamens oder der Brieftaschenadre msgid "Add card" msgstr "" +msgid "Add credit card" +msgstr "" + msgid "Add more files" msgstr "Weitere Dateien hinzufügen" @@ -73,8 +79,8 @@ msgstr "" msgid "Approve" msgstr "Genehmigen" -msgid "Back to plan settings" -msgstr "" +#~ msgid "Back to plan settings" +#~ msgstr "" msgid "Backup secret phrase" msgstr "Sicherungsgeheimsatz" @@ -82,18 +88,21 @@ msgstr "Sicherungsgeheimsatz" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "Der Sicherungsgeheimsatz stimmt nicht mit dem Benutzerkonto überein, bitte überprüfen Sie dies und versuchen Sie es erneut." -msgid "Billed Annually" -msgstr "" +#~ msgid "Billed Annually" +#~ msgstr "" -msgid "Billed Monthly" -msgstr "" +#~ msgid "Billed Monthly" +#~ msgstr "" -msgid "Billed Yearly" -msgstr "" +#~ msgid "Billed Yearly" +#~ msgstr "" msgid "Billing history" msgstr "" +msgid "Billing start time" +msgstr "" + msgid "Bin" msgstr "Papierkorb" @@ -130,6 +139,9 @@ msgstr "" msgid "Change password" msgstr "Passwort ändern" +msgid "Change plan" +msgstr "" + msgid "Check your inbox! We've sent another email." msgstr "Prüfen Sie Ihren Posteingang! Wir haben eine weitere E-Mail verschickt." @@ -145,6 +157,15 @@ msgstr "Bestätigen" msgid "Confirm Password:" msgstr "Passwort bestätigen:" +msgid "Confirm plan" +msgstr "" + +msgid "Confirm plan change" +msgstr "" + +msgid "Confirmation" +msgstr "" + msgid "Connect Wallet to Files" msgstr "Wallet mit Dateien verbinden" @@ -214,8 +235,8 @@ msgstr "" msgid "Credit card saved" msgstr "" -msgid "Current" -msgstr "" +#~ msgid "Current" +#~ msgstr "" msgid "Dark Theme" msgstr "Dunkles Farbschema" @@ -286,6 +307,12 @@ msgstr "" msgid "Drop to upload files" msgstr "Zum Hochladen von Dateien ablegen" +msgid "Edit payment method" +msgstr "" + +msgid "Edit plan" +msgstr "" + msgid "Email is required" msgstr "E-Mail ist erforderlich" @@ -304,6 +331,9 @@ msgstr "Geben Sie den Verifizierungscode ein:" msgid "Failed to add payment method" msgstr "" +msgid "Failed to change subscription" +msgstr "" + msgid "Failed to get signature" msgstr "Signatur kann nicht abgerufen werden" @@ -316,6 +346,9 @@ msgid "" "sure you have activated your wallet." msgstr "" +msgid "Features" +msgstr "" + msgid "File Info" msgstr "Dateiinfos" @@ -352,8 +385,8 @@ msgstr "Aus Sicherheitsgründen werden wir Sie bei jeder Anmeldung nach einer de msgid "Forget this browser" msgstr "Diesen Browser vergessen" -msgid "Free" -msgstr "" +#~ msgid "Free" +#~ msgstr "" msgid "Free plan" msgstr "" @@ -379,6 +412,9 @@ msgstr "" msgid "Give view-only permission to:" msgstr "" +msgid "Go back" +msgstr "" + msgid "Go back" msgstr "Zurück" @@ -457,6 +493,9 @@ msgstr "" msgid "Method" msgstr "" +msgid "Monthly billing" +msgstr "" + msgid "Move" msgstr "Verschieben" @@ -577,6 +616,15 @@ msgstr "Passwörter müssen übereinstimmen" msgid "Payment and Subscriptions" msgstr "" +msgid "Payment method" +msgstr "" + +msgid "Plan changed successfully" +msgstr "" + +msgid "Plan details" +msgstr "" + msgid "Please enter a file name" msgstr "Bitte geben Sie einen Dateinamen ein" @@ -613,8 +661,8 @@ msgstr "Profileinstellungen" msgid "Profile updated" msgstr "Profil aktualisiert" -msgid "Purchase with card" -msgstr "" +#~ msgid "Purchase with card" +#~ msgstr "" msgid "Receipt" msgstr "" @@ -703,6 +751,12 @@ msgstr "" msgid "Select an existing shared folder or your home" msgstr "" +msgid "Select payment method" +msgstr "" + +msgid "Select plan" +msgstr "" + msgid "Select this plan" msgstr "" @@ -859,6 +913,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This card will become your default payment method" +msgstr "" + msgid "This is the free product." msgstr "" @@ -877,14 +934,17 @@ msgstr "" msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" msgstr "" +msgid "Total" +msgstr "" + msgid "Try again" msgstr "Erneut versuchen" msgid "Try another method" msgstr "Eine andere Methode versuchen" -msgid "Try for 7 days" -msgstr "" +#~ msgid "Try for 7 days" +#~ msgstr "" msgid "Unable to upload" msgstr "" @@ -898,9 +958,12 @@ msgstr "" msgid "Update Shared Folder" msgstr "" -msgid "Upgrade your plan" +msgid "Update credit card" msgstr "" +#~ msgid "Upgrade your plan" +#~ msgstr "" + msgid "Upload" msgstr "Hochladen" @@ -916,6 +979,9 @@ msgstr "Eine andere Anmeldemethode verwenden" msgid "Use a saved browser" msgstr "Einen gespeicherten Browser verwenden" +msgid "Use this card" +msgstr "" + msgid "User {0} is both a reader and writer" msgstr "" @@ -976,6 +1042,9 @@ 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" @@ -988,9 +1057,15 @@ msgstr "Sie können nun geteilte Ordner erstellen, um eine Datei zu teilen." msgid "You can't move folders to this path" msgstr "Sie können keine Ordner in diesen Pfad verschieben" +msgid "You get access to these features right now." +msgstr "" + msgid "You haven't set a username yet." msgstr "Sie haben noch keinen Benutzernamen festgelegt." +msgid "You now have:" +msgstr "" + msgid "You were added to the shared folder ({0}): {1}" msgstr "" @@ -1009,23 +1084,29 @@ msgstr "Ihr Wiederherstellungsschlüssel kann zur Wiederherstellung Ihres Kontos msgid "can-edit" msgstr "" +msgid "invoices here" +msgstr "" + msgid "me" msgstr "ich" +msgid "of storage" +msgstr "" + msgid "on" msgstr "am" -msgid "per day" -msgstr "" +#~ msgid "per day" +#~ msgstr "" -msgid "per month" -msgstr "" +#~ msgid "per month" +#~ msgstr "" -msgid "per week" -msgstr "" +#~ msgid "per week" +#~ msgstr "" -msgid "per year" -msgstr "" +#~ msgid "per year" +#~ msgstr "" msgid "unknown" msgstr "unbekannt" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index dfeaf3d75e..ead019d381 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -25,6 +25,9 @@ msgstr "A file with the same name already exists" msgid "Accept" msgstr "Accept" +msgid "Access your billing history in settings or view your" +msgstr "Access your billing history in settings or view your" + msgid "Account" msgstr "Account" @@ -49,6 +52,9 @@ msgstr "Add by sharing address, username or wallet address" msgid "Add card" msgstr "Add card" +msgid "Add credit card" +msgstr "Add credit card" + msgid "Add more files" msgstr "Add more files" @@ -73,8 +79,8 @@ msgstr "Anyone with the link can:" msgid "Approve" msgstr "Approve" -msgid "Back to plan settings" -msgstr "Back to plan settings" +#~ msgid "Back to plan settings" +#~ msgstr "Back to plan settings" msgid "Backup secret phrase" msgstr "Backup secret phrase" @@ -82,18 +88,21 @@ msgstr "Backup secret phrase" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "Backup secret phrase does not match user account, please double-check and try again." -msgid "Billed Annually" -msgstr "Billed Annually" +#~ msgid "Billed Annually" +#~ msgstr "Billed Annually" -msgid "Billed Monthly" -msgstr "Billed Monthly" +#~ msgid "Billed Monthly" +#~ msgstr "Billed Monthly" -msgid "Billed Yearly" -msgstr "Billed Yearly" +#~ msgid "Billed Yearly" +#~ msgstr "Billed Yearly" msgid "Billing history" msgstr "Billing history" +msgid "Billing start time" +msgstr "Billing start time" + msgid "Bin" msgstr "Bin" @@ -130,6 +139,9 @@ msgstr "Change Plan" msgid "Change password" msgstr "Change password" +msgid "Change plan" +msgstr "Change plan" + msgid "Check your inbox! We've sent another email." msgstr "Check your inbox! We've sent another email." @@ -145,6 +157,15 @@ msgstr "Confirm" msgid "Confirm Password:" msgstr "Confirm Password:" +msgid "Confirm plan" +msgstr "Confirm plan" + +msgid "Confirm plan change" +msgstr "Confirm plan change" + +msgid "Confirmation" +msgstr "Confirmation" + msgid "Connect Wallet to Files" msgstr "Connect Wallet to Files" @@ -214,8 +235,8 @@ msgstr "Create your public username in <0>Settings!" msgid "Credit card saved" msgstr "Credit card saved" -msgid "Current" -msgstr "Current" +#~ msgid "Current" +#~ msgstr "Current" msgid "Dark Theme" msgstr "Dark Theme" @@ -286,6 +307,12 @@ msgstr "Downloads failed" msgid "Drop to upload files" msgstr "Drop to upload files" +msgid "Edit payment method" +msgstr "Edit payment method" + +msgid "Edit plan" +msgstr "Edit plan" + msgid "Email is required" msgstr "Email is required" @@ -304,6 +331,9 @@ msgstr "Enter the verification code:" msgid "Failed to add payment method" msgstr "Failed to add payment method" +msgid "Failed to change subscription" +msgstr "Failed to change subscription" + msgid "Failed to get signature" msgstr "Failed to get signature" @@ -319,6 +349,9 @@ msgstr "" "If you are using a contract wallet, please make \n" "sure you have activated your wallet." +msgid "Features" +msgstr "Features" + msgid "File Info" msgstr "File Info" @@ -355,8 +388,8 @@ msgstr "For security reasons, each time you sign in we’ll ask you for one of t msgid "Forget this browser" msgstr "Forget this browser" -msgid "Free" -msgstr "Free" +#~ msgid "Free" +#~ msgstr "Free" msgid "Free plan" msgstr "Free plan" @@ -382,6 +415,9 @@ msgstr "Give edit permission to:" msgid "Give view-only permission to:" msgstr "Give view-only permission to:" +msgid "Go back" +msgstr "Go back" + msgid "Go back" msgstr "Go back" @@ -460,6 +496,9 @@ msgstr "Manage Shared Folder" msgid "Method" msgstr "Method" +msgid "Monthly billing" +msgstr "Monthly billing" + msgid "Move" msgstr "Move" @@ -580,6 +619,15 @@ msgstr "Passwords must match" msgid "Payment and Subscriptions" msgstr "Payment and Subscriptions" +msgid "Payment method" +msgstr "Payment method" + +msgid "Plan changed successfully" +msgstr "Plan changed successfully" + +msgid "Plan details" +msgstr "Plan details" + msgid "Please enter a file name" msgstr "Please enter a file name" @@ -616,8 +664,8 @@ msgstr "Profile settings" msgid "Profile updated" msgstr "Profile updated" -msgid "Purchase with card" -msgstr "Purchase with card" +#~ msgid "Purchase with card" +#~ msgstr "Purchase with card" msgid "Receipt" msgstr "Receipt" @@ -706,6 +754,12 @@ msgstr "Select a wallet" msgid "Select an existing shared folder or your home" msgstr "Select an existing shared folder or your home" +msgid "Select payment method" +msgstr "Select payment method" + +msgid "Select plan" +msgstr "Select plan" + msgid "Select this plan" msgstr "Select this plan" @@ -862,6 +916,9 @@ msgstr "There was an error restoring your data" msgid "There was an error when setting username." msgstr "There was an error when setting username." +msgid "This card will become your default payment method" +msgstr "This card will become your default payment method" + msgid "This is the free product." msgstr "This is the free product." @@ -880,14 +937,17 @@ msgstr "This website uses cookies" msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" msgstr "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" +msgid "Total" +msgstr "Total" + msgid "Try again" msgstr "Try again" msgid "Try another method" msgstr "Try another method" -msgid "Try for 7 days" -msgstr "Try for 7 days" +#~ msgid "Try for 7 days" +#~ msgstr "Try for 7 days" msgid "Unable to upload" msgstr "Unable to upload" @@ -901,8 +961,11 @@ msgstr "Update Card" msgid "Update Shared Folder" msgstr "Update Shared Folder" -msgid "Upgrade your plan" -msgstr "Upgrade your plan" +msgid "Update credit card" +msgstr "Update credit card" + +#~ msgid "Upgrade your plan" +#~ msgstr "Upgrade your plan" msgid "Upload" msgstr "Upload" @@ -919,6 +982,9 @@ msgstr "Use a different login method" msgid "Use a saved browser" msgstr "Use a saved browser" +msgid "Use this card" +msgstr "Use this card" + msgid "User {0} is both a reader and writer" msgstr "User {0} is both a reader and writer" @@ -979,6 +1045,9 @@ 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" @@ -991,9 +1060,15 @@ msgstr "You can now create shared folders to share a file." msgid "You can't move folders to this path" msgstr "You can't move folders to this path" +msgid "You get access to these features right now." +msgstr "You get access to these features right now." + msgid "You haven't set a username yet." msgstr "You haven't set a username yet." +msgid "You now have:" +msgstr "You now have:" + msgid "You were added to the shared folder ({0}): {1}" msgstr "You were added to the shared folder ({0}): {1}" @@ -1012,23 +1087,29 @@ msgstr "Your recovery key can be used to restore your account in place of your b msgid "can-edit" msgstr "can-edit" +msgid "invoices here" +msgstr "invoices here" + msgid "me" msgstr "me" +msgid "of storage" +msgstr "of storage" + msgid "on" msgstr "on" -msgid "per day" -msgstr "per day" +#~ msgid "per day" +#~ msgstr "per day" -msgid "per month" -msgstr "per month" +#~ msgid "per month" +#~ msgstr "per month" -msgid "per week" -msgstr "per week" +#~ msgid "per week" +#~ msgstr "per week" -msgid "per year" -msgstr "per year" +#~ msgid "per year" +#~ msgstr "per year" msgid "unknown" msgstr "unknown" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index 6fe89ddda9..0331b80f67 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -26,6 +26,9 @@ msgstr "Ya existe un archivo con el mismo nombre" msgid "Accept" msgstr "" +msgid "Access your billing history in settings or view your" +msgstr "" + msgid "Account" msgstr "Cuenta" @@ -50,6 +53,9 @@ msgstr "" msgid "Add card" msgstr "" +msgid "Add credit card" +msgstr "" + msgid "Add more files" msgstr "Agrega mas archivos" @@ -74,8 +80,8 @@ msgstr "" msgid "Approve" msgstr "Aprobar" -msgid "Back to plan settings" -msgstr "" +#~ msgid "Back to plan settings" +#~ msgstr "" msgid "Backup secret phrase" msgstr "" @@ -83,18 +89,21 @@ msgstr "" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "" -msgid "Billed Annually" -msgstr "" +#~ msgid "Billed Annually" +#~ msgstr "" -msgid "Billed Monthly" -msgstr "" +#~ msgid "Billed Monthly" +#~ msgstr "" -msgid "Billed Yearly" -msgstr "" +#~ msgid "Billed Yearly" +#~ msgstr "" msgid "Billing history" msgstr "" +msgid "Billing start time" +msgstr "" + msgid "Bin" msgstr "Papelera" @@ -131,6 +140,9 @@ msgstr "" msgid "Change password" msgstr "Cambiar la contraseña" +msgid "Change plan" +msgstr "" + msgid "Check your inbox! We've sent another email." msgstr "" @@ -146,6 +158,15 @@ msgstr "Confirmar" msgid "Confirm Password:" msgstr "Confirmar Contraseña:" +msgid "Confirm plan" +msgstr "" + +msgid "Confirm plan change" +msgstr "" + +msgid "Confirmation" +msgstr "" + msgid "Connect Wallet to Files" msgstr "Conectar monedero a archivos" @@ -215,8 +236,8 @@ msgstr "" msgid "Credit card saved" msgstr "" -msgid "Current" -msgstr "" +#~ msgid "Current" +#~ msgstr "" msgid "Dark Theme" msgstr "Tema oscuro" @@ -287,6 +308,12 @@ msgstr "" msgid "Drop to upload files" msgstr "Suelta para subir archivos" +msgid "Edit payment method" +msgstr "" + +msgid "Edit plan" +msgstr "" + msgid "Email is required" msgstr "" @@ -305,6 +332,9 @@ msgstr "" msgid "Failed to add payment method" msgstr "" +msgid "Failed to change subscription" +msgstr "" + msgid "Failed to get signature" msgstr "No se pudo obtener la firma" @@ -320,6 +350,9 @@ msgstr "" "Si está utilizando una billetera de contrato, haga\n" "seguro que has activado tu billetera." +msgid "Features" +msgstr "" + msgid "File Info" msgstr "Información del archivo" @@ -356,8 +389,8 @@ msgstr "Por motivos de seguridad, cada vez que inicie sesión le pediremos uno d msgid "Forget this browser" msgstr "Olvida este navegador" -msgid "Free" -msgstr "" +#~ msgid "Free" +#~ msgstr "" msgid "Free plan" msgstr "" @@ -383,6 +416,9 @@ msgstr "" msgid "Give view-only permission to:" msgstr "" +msgid "Go back" +msgstr "" + msgid "Go back" msgstr "Regresar" @@ -461,6 +497,9 @@ msgstr "" msgid "Method" msgstr "" +msgid "Monthly billing" +msgstr "" + msgid "Move" msgstr "Moverse" @@ -581,6 +620,15 @@ msgstr "Las contraseñas deben coincidir" msgid "Payment and Subscriptions" msgstr "" +msgid "Payment method" +msgstr "" + +msgid "Plan changed successfully" +msgstr "" + +msgid "Plan details" +msgstr "" + msgid "Please enter a file name" msgstr "Ingrese un nombre de archivo" @@ -617,8 +665,8 @@ msgstr "" msgid "Profile updated" msgstr "Perfil actualizado" -msgid "Purchase with card" -msgstr "" +#~ msgid "Purchase with card" +#~ msgstr "" msgid "Receipt" msgstr "" @@ -707,6 +755,12 @@ msgstr "Seleccione una billetera" msgid "Select an existing shared folder or your home" msgstr "" +msgid "Select payment method" +msgstr "" + +msgid "Select plan" +msgstr "" + msgid "Select this plan" msgstr "" @@ -863,6 +917,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This card will become your default payment method" +msgstr "" + msgid "This is the free product." msgstr "" @@ -881,14 +938,17 @@ msgstr "" msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" msgstr "" +msgid "Total" +msgstr "" + msgid "Try again" msgstr "Intentar otra vez" msgid "Try another method" msgstr "Prueba con otro método" -msgid "Try for 7 days" -msgstr "" +#~ msgid "Try for 7 days" +#~ msgstr "" msgid "Unable to upload" msgstr "" @@ -902,9 +962,12 @@ msgstr "" msgid "Update Shared Folder" msgstr "" -msgid "Upgrade your plan" +msgid "Update credit card" msgstr "" +#~ msgid "Upgrade your plan" +#~ msgstr "" + msgid "Upload" msgstr "Subir" @@ -920,6 +983,9 @@ msgstr "Utilice un método de inicio de sesión diferente" msgid "Use a saved browser" msgstr "Utilice un navegador guardado" +msgid "Use this card" +msgstr "" + msgid "User {0} is both a reader and writer" msgstr "" @@ -980,6 +1046,9 @@ 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" @@ -992,9 +1061,15 @@ msgstr "" msgid "You can't move folders to this path" msgstr "" +msgid "You get access to these features right now." +msgstr "" + msgid "You haven't set a username yet." msgstr "" +msgid "You now have:" +msgstr "" + msgid "You were added to the shared folder ({0}): {1}" msgstr "" @@ -1013,23 +1088,29 @@ msgstr "" msgid "can-edit" msgstr "" +msgid "invoices here" +msgstr "" + msgid "me" msgstr "" +msgid "of storage" +msgstr "" + msgid "on" msgstr "en" -msgid "per day" -msgstr "" +#~ msgid "per day" +#~ msgstr "" -msgid "per month" -msgstr "" +#~ msgid "per month" +#~ msgstr "" -msgid "per week" -msgstr "" +#~ msgid "per week" +#~ msgstr "" -msgid "per year" -msgstr "" +#~ msgid "per year" +#~ msgstr "" msgid "unknown" msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 936d849039..9a8af4ee78 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -26,6 +26,9 @@ msgstr "Un fichier avec ce nom existe déjà" msgid "Accept" msgstr "Accepter" +msgid "Access your billing history in settings or view your" +msgstr "" + msgid "Account" msgstr "Compte" @@ -50,6 +53,9 @@ msgstr "Ajouter par adresse de partage, nom d'utilisateur ou adresse de portefeu msgid "Add card" msgstr "" +msgid "Add credit card" +msgstr "" + msgid "Add more files" msgstr "Ajouter d’autres fichiers" @@ -74,8 +80,8 @@ msgstr "Toute personne ayant le lien peut le faire :" msgid "Approve" msgstr "Accepter" -msgid "Back to plan settings" -msgstr "" +#~ msgid "Back to plan settings" +#~ msgstr "" msgid "Backup secret phrase" msgstr "Phrase secrète de sauvegarde" @@ -83,18 +89,21 @@ msgstr "Phrase secrète de sauvegarde" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "La phrase secrète de sauvegarde est incorrecte, merci de vérifier et réessayer." -msgid "Billed Annually" -msgstr "" +#~ msgid "Billed Annually" +#~ msgstr "" -msgid "Billed Monthly" -msgstr "" +#~ msgid "Billed Monthly" +#~ msgstr "" -msgid "Billed Yearly" -msgstr "" +#~ msgid "Billed Yearly" +#~ msgstr "" msgid "Billing history" msgstr "" +msgid "Billing start time" +msgstr "" + msgid "Bin" msgstr "Corbeille" @@ -131,6 +140,9 @@ msgstr "" msgid "Change password" msgstr "Changer le mot de passe" +msgid "Change plan" +msgstr "" + msgid "Check your inbox! We've sent another email." msgstr "Vérifiez votre boîte de réception ! Nous avons envoyé un autre courriel." @@ -146,6 +158,15 @@ msgstr "Confirmer" msgid "Confirm Password:" msgstr "Confirmer le mot de passe :" +msgid "Confirm plan" +msgstr "" + +msgid "Confirm plan change" +msgstr "" + +msgid "Confirmation" +msgstr "" + msgid "Connect Wallet to Files" msgstr "Connecter un wallet à Files" @@ -215,8 +236,8 @@ msgstr "Créez votre nom d'utilisateur public dans <0>Paramètres !" msgid "Credit card saved" msgstr "" -msgid "Current" -msgstr "" +#~ msgid "Current" +#~ msgstr "" msgid "Dark Theme" msgstr "Thème sombre" @@ -287,6 +308,12 @@ msgstr "Les téléchargements ont échoué" msgid "Drop to upload files" msgstr "Faire glisser pour téléverser un fichier" +msgid "Edit payment method" +msgstr "" + +msgid "Edit plan" +msgstr "" + msgid "Email is required" msgstr "Un courriel est requis" @@ -305,6 +332,9 @@ msgstr "Entrez le code de vérification :" msgid "Failed to add payment method" msgstr "" +msgid "Failed to change subscription" +msgstr "" + msgid "Failed to get signature" msgstr "Échec de l’obtention de la signature" @@ -320,6 +350,9 @@ msgstr "" "Si vous utilisez un contract wallet, veuillez\n" "vérifier que vous avez activé votre wallet." +msgid "Features" +msgstr "" + msgid "File Info" msgstr "Infos du fichier" @@ -356,8 +389,8 @@ msgstr "Pour des raisons de sécurité, chaque fois que vous vous connectez, nou msgid "Forget this browser" msgstr "Oublier ce navigateur" -msgid "Free" -msgstr "" +#~ msgid "Free" +#~ msgstr "" msgid "Free plan" msgstr "" @@ -383,6 +416,9 @@ msgstr "Donner l’autorisation de modifier à :" msgid "Give view-only permission to:" msgstr "Donner l’accès en lecture seule à :" +msgid "Go back" +msgstr "" + msgid "Go back" msgstr "Retour" @@ -461,6 +497,9 @@ msgstr "Gérer le dossier partagé" msgid "Method" msgstr "" +msgid "Monthly billing" +msgstr "" + msgid "Move" msgstr "Déplacer" @@ -581,6 +620,15 @@ msgstr "Les mots de passes de correspondent pas" msgid "Payment and Subscriptions" msgstr "" +msgid "Payment method" +msgstr "" + +msgid "Plan changed successfully" +msgstr "" + +msgid "Plan details" +msgstr "" + msgid "Please enter a file name" msgstr "Veuillez entrer un nom de fichier" @@ -617,8 +665,8 @@ msgstr "Paramètres du profil" msgid "Profile updated" msgstr "Profile mis à jour" -msgid "Purchase with card" -msgstr "" +#~ msgid "Purchase with card" +#~ msgstr "" msgid "Receipt" msgstr "" @@ -707,6 +755,12 @@ msgstr "Sélectionner un wallet" msgid "Select an existing shared folder or your home" msgstr "Sélectionnez un dossier partagé existant ou votre page d'accueil" +msgid "Select payment method" +msgstr "" + +msgid "Select plan" +msgstr "" + msgid "Select this plan" msgstr "" @@ -863,6 +917,9 @@ msgstr "Une erreur s'est produite lors de la restauration de vos données" msgid "There was an error when setting username." msgstr "Une erreur s'est produite lors de la définition du nom d'utilisateur." +msgid "This card will become your default payment method" +msgstr "" + msgid "This is the free product." msgstr "" @@ -881,14 +938,17 @@ msgstr "Ce site web utilise des cookies" msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" msgstr "Ce site web utilise des cookies qui l'aident à fonctionner et à suivre les interactions à des fins d'analyse. Vous avez le droit de refuser notre utilisation des cookies. Pour que nous puissions vous offrir une expérience utilisateur personnalisable, veuillez cliquer sur le bouton Accepter ci-dessous.<0>En savoir plus" +msgid "Total" +msgstr "" + msgid "Try again" msgstr "Essayer de nouveau" msgid "Try another method" msgstr "Essayer une autre méthode" -msgid "Try for 7 days" -msgstr "" +#~ msgid "Try for 7 days" +#~ msgstr "" msgid "Unable to upload" msgstr "" @@ -902,9 +962,12 @@ msgstr "" msgid "Update Shared Folder" msgstr "Mettre à jour le dossier partagé" -msgid "Upgrade your plan" +msgid "Update credit card" msgstr "" +#~ msgid "Upgrade your plan" +#~ msgstr "" + msgid "Upload" msgstr "Téléverser" @@ -920,6 +983,9 @@ msgstr "Utilisez une méthode de connexion différente" msgid "Use a saved browser" msgstr "Utiliser un navigateur enregistré" +msgid "Use this card" +msgstr "" + msgid "User {0} is both a reader and writer" msgstr "L'utilisateur {0} est dans les auteurs et lecteurs" @@ -980,6 +1046,9 @@ msgstr "Quelle belle journée." msgid "What a fine night it is." msgstr "Quelle belle nuit." +msgid "Yearly billing" +msgstr "" + msgid "Yes, save it" msgstr "Oui, l’enregistrer" @@ -992,9 +1061,15 @@ msgstr "Vous pouvez maintenant créer des dossiers partagés pour partager un fi msgid "You can't move folders to this path" msgstr "Vous ne pouvez pas déplacer les dossiers vers ce chemin" +msgid "You get access to these features right now." +msgstr "" + msgid "You haven't set a username yet." msgstr "Vous n’avez pas encore défini de nom d’utilisateur." +msgid "You now have:" +msgstr "" + msgid "You were added to the shared folder ({0}): {1}" msgstr "Vous avez été ajouté(e) au dossier partagé ({0}) : {1}" @@ -1013,23 +1088,29 @@ msgstr "" msgid "can-edit" msgstr "peut-modifier" +msgid "invoices here" +msgstr "" + msgid "me" msgstr "moi" +msgid "of storage" +msgstr "" + msgid "on" msgstr "le" -msgid "per day" -msgstr "" +#~ msgid "per day" +#~ msgstr "" -msgid "per month" -msgstr "" +#~ msgid "per month" +#~ msgstr "" -msgid "per week" -msgstr "" +#~ msgid "per week" +#~ msgstr "" -msgid "per year" -msgstr "" +#~ msgid "per year" +#~ msgstr "" msgid "unknown" msgstr "inconnu" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 421ffb8d44..e6ce104060 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -25,6 +25,9 @@ msgstr "" msgid "Accept" msgstr "" +msgid "Access your billing history in settings or view your" +msgstr "" + msgid "Account" msgstr "Konto" @@ -49,6 +52,9 @@ msgstr "" msgid "Add card" msgstr "" +msgid "Add credit card" +msgstr "" + msgid "Add more files" msgstr "Legg til flere filer" @@ -73,8 +79,8 @@ msgstr "" msgid "Approve" msgstr "Godkjenn" -msgid "Back to plan settings" -msgstr "" +#~ msgid "Back to plan settings" +#~ msgstr "" msgid "Backup secret phrase" msgstr "" @@ -82,18 +88,21 @@ msgstr "" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "" -msgid "Billed Annually" -msgstr "" +#~ msgid "Billed Annually" +#~ msgstr "" -msgid "Billed Monthly" -msgstr "" +#~ msgid "Billed Monthly" +#~ msgstr "" -msgid "Billed Yearly" -msgstr "" +#~ msgid "Billed Yearly" +#~ msgstr "" msgid "Billing history" msgstr "" +msgid "Billing start time" +msgstr "" + msgid "Bin" msgstr "" @@ -130,6 +139,9 @@ msgstr "" msgid "Change password" msgstr "Endre passord" +msgid "Change plan" +msgstr "" + msgid "Check your inbox! We've sent another email." msgstr "" @@ -145,6 +157,15 @@ msgstr "Bekreft" msgid "Confirm Password:" msgstr "Bekreft passord:" +msgid "Confirm plan" +msgstr "" + +msgid "Confirm plan change" +msgstr "" + +msgid "Confirmation" +msgstr "" + msgid "Connect Wallet to Files" msgstr "" @@ -214,8 +235,8 @@ msgstr "" msgid "Credit card saved" msgstr "" -msgid "Current" -msgstr "" +#~ msgid "Current" +#~ msgstr "" msgid "Dark Theme" msgstr "Mørk drakt" @@ -286,6 +307,12 @@ msgstr "" msgid "Drop to upload files" msgstr "Dra for å laste opp filer" +msgid "Edit payment method" +msgstr "" + +msgid "Edit plan" +msgstr "" + msgid "Email is required" msgstr "E-post kreves" @@ -304,6 +331,9 @@ msgstr "Skriv inn bekreftelseskoden:" msgid "Failed to add payment method" msgstr "" +msgid "Failed to change subscription" +msgstr "" + msgid "Failed to get signature" msgstr "" @@ -316,6 +346,9 @@ msgid "" "sure you have activated your wallet." msgstr "" +msgid "Features" +msgstr "" + msgid "File Info" msgstr "Filinfo" @@ -352,8 +385,8 @@ msgstr "" msgid "Forget this browser" msgstr "" -msgid "Free" -msgstr "" +#~ msgid "Free" +#~ msgstr "" msgid "Free plan" msgstr "" @@ -379,6 +412,9 @@ msgstr "" msgid "Give view-only permission to:" msgstr "" +msgid "Go back" +msgstr "" + msgid "Go back" msgstr "Tilbake" @@ -457,6 +493,9 @@ msgstr "" msgid "Method" msgstr "" +msgid "Monthly billing" +msgstr "" + msgid "Move" msgstr "Flytt" @@ -577,6 +616,15 @@ msgstr "Passordene må samsvare" msgid "Payment and Subscriptions" msgstr "" +msgid "Payment method" +msgstr "" + +msgid "Plan changed successfully" +msgstr "" + +msgid "Plan details" +msgstr "" + msgid "Please enter a file name" msgstr "Skriv inn et filnavn" @@ -613,8 +661,8 @@ msgstr "Profilinnstillinger" msgid "Profile updated" msgstr "Profil oppdatert" -msgid "Purchase with card" -msgstr "" +#~ msgid "Purchase with card" +#~ msgstr "" msgid "Receipt" msgstr "" @@ -703,6 +751,12 @@ msgstr "" msgid "Select an existing shared folder or your home" msgstr "" +msgid "Select payment method" +msgstr "" + +msgid "Select plan" +msgstr "" + msgid "Select this plan" msgstr "" @@ -859,6 +913,9 @@ msgstr "" msgid "There was an error when setting username." msgstr "" +msgid "This card will become your default payment method" +msgstr "" + msgid "This is the free product." msgstr "" @@ -877,14 +934,17 @@ msgstr "" msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more" msgstr "" +msgid "Total" +msgstr "" + msgid "Try again" msgstr "Prøv igjen" msgid "Try another method" msgstr "Prøv annen metode" -msgid "Try for 7 days" -msgstr "" +#~ msgid "Try for 7 days" +#~ msgstr "" msgid "Unable to upload" msgstr "" @@ -898,9 +958,12 @@ msgstr "" msgid "Update Shared Folder" msgstr "" -msgid "Upgrade your plan" +msgid "Update credit card" msgstr "" +#~ msgid "Upgrade your plan" +#~ msgstr "" + msgid "Upload" msgstr "Last opp" @@ -916,6 +979,9 @@ msgstr "Bruk en annen innloggingsmetode" msgid "Use a saved browser" msgstr "" +msgid "Use this card" +msgstr "" + msgid "User {0} is both a reader and writer" msgstr "" @@ -976,6 +1042,9 @@ msgstr "" msgid "What a fine night it is." msgstr "" +msgid "Yearly billing" +msgstr "" + msgid "Yes, save it" msgstr "Ja, lagre" @@ -988,9 +1057,15 @@ msgstr "" msgid "You can't move folders to this path" msgstr "" +msgid "You get access to these features right now." +msgstr "" + msgid "You haven't set a username yet." msgstr "Du har ikke satt noe brukernavn enda." +msgid "You now have:" +msgstr "" + msgid "You were added to the shared folder ({0}): {1}" msgstr "" @@ -1009,23 +1084,29 @@ msgstr "" msgid "can-edit" msgstr "" -msgid "me" +msgid "invoices here" msgstr "" -msgid "on" +msgid "me" msgstr "" -msgid "per day" +msgid "of storage" msgstr "" -msgid "per month" +msgid "on" msgstr "" -msgid "per week" -msgstr "" +#~ msgid "per day" +#~ msgstr "" -msgid "per year" -msgstr "" +#~ msgid "per month" +#~ msgstr "" + +#~ msgid "per week" +#~ msgstr "" + +#~ msgid "per year" +#~ msgstr "" msgid "unknown" msgstr "" From 805c901a42336447f1e7485f7d50fcaa1e128db4 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 22:16:01 +0600 Subject: [PATCH 14/39] client updates --- packages/files-ui/package.json | 2 +- packages/storage-ui/package.json | 2 +- yarn.lock | 9 +++++++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index e658ecb5a2..8128727fb9 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "^1.18.20", + "@chainsafe/files-api-client": "^1.18.22", "@chainsafe/web3-context": "1.1.4", "@emeraldpay/hashicon-react": "^0.5.1", "@lingui/core": "^3.7.2", diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index e7ae0c3fba..65cc971e3f 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "^1.18.20", + "@chainsafe/files-api-client": "^1.18.22", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/yarn.lock b/yarn.lock index ce8b61ac3f..445b55c5ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1934,6 +1934,15 @@ "@redocly/openapi-core" "^1.0.0-beta.58" redoc-cli "^0.12.3" +"@chainsafe/files-api-client@^1.18.22": + version "1.18.22" + resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.22.tgz#7e66a43f5c8b4234a53745a2be8172c32a6f0b9d" + integrity sha512-m3RfBMcWKOITyH0goMl7jxg8NY//3N2cglzKS64ksrWhULKeaCARZxe5Auo8NXEfIlTkQCKmazHoozl146UR/g== + dependencies: + "@redocly/openapi-cli" "^1.0.0-beta.58" + "@redocly/openapi-core" "^1.0.0-beta.58" + redoc-cli "^0.12.3" + "@chainsafe/web3-context@1.1.4": version "1.1.4" resolved "https://registry.yarnpkg.com/@chainsafe/web3-context/-/web3-context-1.1.4.tgz#ce0f140af8ccf93af1a189fbdbd6f018b9bf5fb7" From 54ba7c6a6f167d442322d9bebff3273d1fbe7b30 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 22:53:27 +0600 Subject: [PATCH 15/39] API updates --- .../ChangePlan/ChangePlanModal.tsx | 3 +- .../ChangePlan/ConfirmPlan.tsx | 3 +- .../ChangePlan/PlanDetails.tsx | 48 ++++++++++--------- .../Settings/SubscriptionTab/CurrentCard.tsx | 1 - .../files-ui/src/Contexts/BillingContext.tsx | 17 +++++-- 5 files changed, 42 insertions(+), 30 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx index e763503aec..38538ac739 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx @@ -64,8 +64,7 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => { .then(() => { setSlide("planSuccess") }) - .catch((error) => { - console.error(error) + .catch(() => { setIsSubscriptionError(true) }) .finally(() => setIsLoadingChangeSubscription(false)) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx index 4c89437b17..dd4bbb0a38 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx @@ -229,7 +229,7 @@ const ConfirmPlan = ({ component="p" className={classes.boldText} > - {planPrice.currency} ${planPrice.unit_amount} + {planPrice.unit_amount ? planPrice.currency : ""} {planPrice.unit_amount} {planPrice.recurring.interval === "month" ? "/month" : "/year"} @@ -250,6 +250,7 @@ const ConfirmPlan = ({
-
- - {billingPeriod === "monthly" - ? Monthly billing - : Yearly billing - } - -
- - setBillingPeriod(billingPeriod === "monthly" ? "yearly" : "monthly") - } - /> -
-
- + {monthlyPrice && yearlyPrice && + <> +
+ + {billingPeriod === "monthly" + ? Monthly billing + : Yearly billing + } + +
+ + setBillingPeriod(billingPeriod === "monthly" ? "yearly" : "monthly") + } + /> +
+
+ + + }
{billingPeriod === "monthly" - ? `${monthlyPrice?.currency} ${monthlyPrice?.unit_amount}` - : `${yearlyPrice?.currency} ${yearlyPrice?.unit_amount}` + ? `${monthlyPrice?.unit_amount ? monthlyPrice?.currency : ""} ${monthlyPrice?.unit_amount}` + : `${yearlyPrice?.unit_amount ? yearlyPrice?.currency : ""} ${yearlyPrice?.unit_amount}` }{billingPeriod ? "/month" : "/year"}
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx index 53d3650282..be2b392f97 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx @@ -66,7 +66,6 @@ const CurrentCard: React.FC = () => { setIsAddCardModalOpen(false)} - defaultCard={defaultCard} /> ) diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 351848ff51..bd2908f68e 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -5,6 +5,7 @@ import { Card, CurrentSubscription, Product } from "@chainsafe/files-api-client" import { useCallback } from "react" import { t } from "@lingui/macro" import { PaymentMethod } from "@stripe/stripe-js" +import { useFiles } from "./FilesContext" type BillingContextProps = { children: ReactNode | ReactNode[] @@ -45,6 +46,7 @@ const BillingContext = React.createContext( const BillingProvider = ({ children }: BillingContextProps) => { const { filesApiClient, isLoggedIn } = useFilesApi() + const { refreshBuckets } = useFiles() const [currentSubscription, setCurrentSubscription] = useState() const [defaultCard, setDefaultCard] = useState(undefined) @@ -109,11 +111,18 @@ const BillingProvider = ({ children }: BillingContextProps) => { const changeSubscription = useCallback((newPriceId: string) => { if (!currentSubscription?.id) return Promise.resolve() return filesApiClient.updateSubscription(currentSubscription.id, { - price_id: newPriceId + price_id: newPriceId, + payment_method: "stripe" }) - .then(fetchCurrentSubscription) - .catch(console.error) - }, [filesApiClient, currentSubscription, fetchCurrentSubscription]) + .then(() => { + fetchCurrentSubscription() + refreshBuckets() + }) + .catch((error) => { + console.error(error) + return Promise.reject() + }) + }, [filesApiClient, currentSubscription, fetchCurrentSubscription, refreshBuckets]) return ( Date: Fri, 3 Dec 2021 22:57:07 +0600 Subject: [PATCH 16/39] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx index cfb1ccb4af..15da248de5 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx @@ -145,7 +145,7 @@ const AddCardModal = ({ onClose, onCardAdd, footerClassName, submitText }: IAddC
Date: Fri, 3 Dec 2021 22:57:48 +0600 Subject: [PATCH 17/39] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx index acd49c00f7..fd65e76169 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx @@ -108,7 +108,8 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails, onSelectPayment }]} hideHome={true} /> - From 38d536e23122d66da876aff878cc9e8c8ec7c84e Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 22:58:16 +0600 Subject: [PATCH 18/39] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx index fd65e76169..529cc7283e 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx @@ -115,7 +115,8 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails, onSelectPayment > Select payment method - From 910a530ce019498dc26cc5ee76bbef7dc4d372b8 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 3 Dec 2021 22:58:24 +0600 Subject: [PATCH 19/39] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index d6b9d46f2e..6b9a3e719f 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx @@ -197,7 +197,8 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => : plan.description } - - {!desktop &&
- From cad6e966339435610bfca09a077598be8d76023d Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Sat, 4 Dec 2021 00:00:49 +0600 Subject: [PATCH 29/39] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx index c1c3483a3c..e6d5c1ed59 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx @@ -161,7 +161,7 @@ const PlanSuccess = ({
{desktop && - @@ -269,7 +277,7 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => - + }
- {cardAddError && - - {cardAddError} - + {cardAddError && + {cardAddError} + } Date: Tue, 7 Dec 2021 20:22:45 +0200 Subject: [PATCH 34/39] fix loader --- .../SubscriptionTab/ChangePlan/SelectPlan.tsx | 4 +-- .../Settings/SubscriptionTab/CurrentPlan.tsx | 2 +- yarn.lock | 25 ------------------- 3 files changed, 2 insertions(+), 29 deletions(-) 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 index 69cbd40ef1..0443875d6a 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx @@ -146,9 +146,7 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => {!plans &&
- +
}
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx index acbc484b27..3f12d30d9c 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentPlan.tsx @@ -80,7 +80,7 @@ const CurrentProduct = ({ className }: ICurrentProduct) => { : } {storageSummary && diff --git a/yarn.lock b/yarn.lock index 0d35d7f2e4..7ceddbf3c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1925,15 +1925,6 @@ resolved "https://registry.yarnpkg.com/@chainsafe/browser-storage-hooks/-/browser-storage-hooks-1.0.1.tgz#26d32cde1999914db755a631e2643823c54959f7" integrity sha512-Q4b5gQAZnsRXKeADspd5isqfwwhhXjDk70y++YadufA6EZ3tf340oW0OVszp74KaGEw+CAYFGQR4X7bzpZ3x9Q== -"@chainsafe/files-api-client@^1.18.20": - version "1.18.20" - resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.20.tgz#5b184946acfa4026b21c95faa2f0c1c9d9999481" - integrity sha512-OQN4V2bUe0981RsBirjNA2YrkaMzAV/7oWSzBwN27ejhAbM6fRbxDEYTZfLRVuick91/JfM2/TbKc3vHYQRDdg== - dependencies: - "@redocly/openapi-cli" "^1.0.0-beta.58" - "@redocly/openapi-core" "^1.0.0-beta.58" - redoc-cli "^0.12.3" - "@chainsafe/files-api-client@^1.18.22": version "1.18.22" resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.22.tgz#7e66a43f5c8b4234a53745a2be8172c32a6f0b9d" @@ -8015,22 +8006,6 @@ babel-plugin-emotion@^10.0.27: find-root "^1.1.0" source-map "^0.5.7" -babel-plugin-emotion@^10.0.27: - version "10.0.33" - resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03" - integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@emotion/hash" "0.8.0" - "@emotion/memoize" "0.7.4" - "@emotion/serialize" "^0.11.16" - babel-plugin-macros "^2.0.0" - babel-plugin-syntax-jsx "^6.18.0" - convert-source-map "^1.5.0" - escape-string-regexp "^1.0.5" - find-root "^1.1.0" - source-map "^0.5.7" - babel-plugin-istanbul@^5.1.0: version "5.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854" From 77c1683bb4fd9699c8694f691360d9bde0de534d Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Wed, 8 Dec 2021 11:08:40 +0600 Subject: [PATCH 35/39] go back change --- .../SubscriptionTab/AddCard/AddCard.tsx | 25 +++++++++++++++++-- .../ChangePlan/PaymentMethod.tsx | 14 ++--------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx index f06bfc2f76..a95e180708 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCard/AddCard.tsx @@ -69,6 +69,15 @@ const useStyles = makeStyles( error: { marginTop: constants.generalUnit * 2, color: palette.error.main + }, + backButton: { + flex: 1, + display: "flex", + alignItems: "center" + }, + linkButton: { + textDecoration: "underline", + cursor: "pointer" } }) } @@ -78,11 +87,12 @@ interface IAddCardProps { submitText: string onCardAdd?: () => void onClose?: () => void + goBack?: () => void footerClassName?: string } -const AddCard = ({ onClose, onCardAdd, footerClassName, submitText }: IAddCardProps) => { +const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IAddCardProps) => { const classes = useStyles() const stripe = useStripe() const elements = useElements() @@ -203,9 +213,20 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText }: IAddCardPr +
+ {goBack && + + Go back + + } +
{onClose && bottomSection: { display: "flex", flexDirection: "row", - justifyContent: "space-between", + justifyContent: "flex-end", alignItems: "center", marginTop: constants.generalUnit * 4, marginBottom: constants.generalUnit * 3 @@ -160,22 +160,12 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails, onSelectPayment submitText={t`Use this card`} footerClassName={classes.footer} onCardAdd={() => setView("selectPaymentMethod")} + goBack={() => setView("selectPaymentMethod")} />
}
- {view === "addCard" ?
- setView("selectPaymentMethod")} - className={classes.linkButton} - > - Go back - -
:
- }
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx index 021ed68b66..0271261699 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethod.tsx @@ -172,18 +172,14 @@ const PlanDetails = ({ onClose, goToSelectPlan, goToPlanDetails, onSelectPayment onClick={onClose} variant="secondary" > - - Cancel - + Cancel diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx index 2feb9ff0f9..f764ff5137 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanDetails.tsx @@ -73,9 +73,9 @@ interface IPlanDetails { const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlanDetails) => { const classes = useStyles() - const monthlyPrice = plan.prices.find((price) => price.recurring.interval === "month") const yearlyPrice = plan.prices.find((price) => price.recurring.interval === "year") + const currentPlanStorage = formatBytes(Number(monthlyPrice?.metadata?.storage_size_bytes), 2) const [billingPeriod, setBillingPeriod] = useState<"monthly" | "yearly">(monthlyPrice ? "monthly" : "yearly") @@ -117,7 +117,8 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan + className={classes.boldText} + > Features
@@ -127,10 +128,7 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan className={classes.featureSeparator} > {monthlyPrice?.metadata?.storage_size_bytes - ? <> - {formatBytes(Number(monthlyPrice?.metadata?.storage_size_bytes), 2)}  - of storage - + ? {currentPlanStorage} of storage : plan.description } @@ -146,13 +144,17 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan + className={classes.boldText} + > Billing start time
{dayjs().format("DD MMM YYYY")} + component="p" + > + {dayjs().format("DD MMM YYYY")} +
@@ -162,7 +164,8 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan + className={classes.boldText} + > {billingPeriod === "monthly" ? Monthly billing : Yearly billing @@ -172,9 +175,7 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan - setBillingPeriod(billingPeriod === "monthly" ? "yearly" : "monthly") - } + onChange={() => setBillingPeriod(billingPeriod === "monthly" ? "yearly" : "monthly")} /> @@ -185,7 +186,8 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan + className={classes.boldText} + > Total
@@ -193,10 +195,11 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan variant="body1" component="p" className={classes.boldText} - >{billingPeriod === "monthly" + > + {billingPeriod === "monthly" ? `${monthlyPrice?.unit_amount ? monthlyPrice?.currency : ""} ${monthlyPrice?.unit_amount}` : `${yearlyPrice?.unit_amount ? yearlyPrice?.currency : ""} ${yearlyPrice?.unit_amount}` - }{billingPeriod ? "/month" : "/year"} + }{billingPeriod ? t`/month` : t`/year`}
@@ -206,17 +209,13 @@ const PlanDetails = ({ plan, onClose, goToSelectPlan, onSelectPlanPrice }: IPlan onClick={() => onClose()} variant="secondary" > - - Cancel - + Cancel diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx index 78451e266a..c5ac72c970 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx @@ -87,12 +87,9 @@ interface IPlanSuccess { onClose: () => void } -const PlanSuccess = ({ - plan, - onClose, - planPrice -}: IPlanSuccess) => { +const PlanSuccess = ({ plan, onClose, planPrice }: IPlanSuccess) => { const classes = useStyles() + const newPlanCapacity = formatBytes(Number(planPrice?.metadata?.storage_size_bytes), 2) return (
@@ -119,7 +116,7 @@ const PlanSuccess = ({ component="p" className={classes.featuresTitle} > - You now have: + You now have:
@@ -129,10 +126,7 @@ const PlanSuccess = ({ variant="body1" > {planPrice?.metadata?.storage_size_bytes - ? <> - {formatBytes(Number(planPrice?.metadata?.storage_size_bytes), 2)}  - of storage - + ? {newPlanCapacity} of storage : plan.description } @@ -141,7 +135,8 @@ const PlanSuccess = ({ + variant="body1" + > {plan.description}
@@ -168,9 +163,7 @@ const PlanSuccess = ({ onClick={onClose} variant="secondary" > - - Close - + Close
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 index 2ea717baa5..47f1d5c10c 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react" import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import clsx from "clsx" import { Button, ExternalSvg, formatBytes, Link, Loading, Typography } from "@chainsafe/common-components" -import { Trans } from "@lingui/macro" +import { t, Trans } from "@lingui/macro" import { CSFTheme } from "../../../../../Themes/types" import { useBilling } from "../../../../../Contexts/BillingContext" import { Product } from "@chainsafe/files-api-client" @@ -155,65 +155,14 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => const yearly = plan.prices.find((price) => price.recurring.interval === "year") const isPlanSelectable = plan.id !== currentSubscription?.product.id && (monthly?.is_update_allowed || yearly?.is_update_allowed) + const currentStorage = formatBytes(Number(monthly?.metadata?.storage_size_bytes), 2) - return desktop ?
- - {plan.name} - - {monthly && - {monthly.unit_amount - ? <> - {monthly.currency.toUpperCase()} {monthly.unit_amount} - /month - - : "Free"} - - } - {monthly && yearly - ? - {yearly.currency.toUpperCase()} {yearly.unit_amount} - /year - - :
- } - - { - monthly?.metadata?.storage_size_bytes - ? <> - {formatBytes(Number(monthly?.metadata?.storage_size_bytes), 2)}  - of storage - - : plan.description - } - - -
:
isPlanSelectable && setTempSelectedPlan(plan)} - key={`plan-${plan.id}`} - > -
> {plan.name} + {monthly && ( + + {monthly.unit_amount + ? <> + {monthly.currency.toUpperCase()} {monthly.unit_amount} + + /month + + + : t`Free`} + + ) + } + {monthly && yearly + ? ( + + {yearly.currency.toUpperCase()} {yearly.unit_amount} + + /year + + + ) + :
+ } > { monthly?.metadata?.storage_size_bytes - ? <> - {formatBytes(Number(monthly?.metadata?.storage_size_bytes), 2)}  - of storage - + ? {currentStorage} of storage : plan.description } +
-
- {monthly && - {monthly.unit_amount - ? <> - {monthly.currency.toUpperCase()} {monthly.unit_amount} - /month - - : "Free"} - - } - {monthly && yearly - ? - {yearly.currency.toUpperCase()} {yearly.unit_amount} - /year - - :
- } -
-
- }) - } + ) + : ( +
isPlanSelectable && setTempSelectedPlan(plan)} + key={`plan-${plan.id}`} + > +
+ + {plan.name} + + + { + monthly?.metadata?.storage_size_bytes + ? {currentStorage} of storage + : plan.description + } + +
+
+ {monthly && ( + + {monthly.unit_amount + ? <> + {monthly.currency.toUpperCase()} {monthly.unit_amount} + /month + + : t`Free`} + + )} + {monthly && yearly + ? ( + + {yearly.currency.toUpperCase()} {yearly.unit_amount} + /year + + ) + :
+ } +
+
+ )})}
- {desktop && - - - - Not sure what to pick? Learn more about our plans - - - - - } + + Not sure what to pick? Learn more about our plans + + + + )}
- {!desktop && - } + {!desktop && ( + + )}
From 2f3798d8336fa340854a9b21da070794af167066 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 8 Dec 2021 15:39:45 +0100 Subject: [PATCH 38/39] some more nits --- .../files-ui/src/Components/FilesRoutes.tsx | 4 ++- .../ChangePlan/ConfirmPlan.tsx | 2 +- .../ChangePlan/PlanSuccess.tsx | 2 +- .../SubscriptionTab/ChangePlan/SelectPlan.tsx | 27 +++++++++---------- 4 files changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx index 34e79afadb..80a55e6ce0 100644 --- a/packages/files-ui/src/Components/FilesRoutes.tsx +++ b/packages/files-ui/src/Components/FilesRoutes.tsx @@ -15,12 +15,14 @@ import LinkSharingLanding from "./Pages/LinkSharingLanding" export const SETTINGS_BASE = "/settings" export const LINK_SHARING_BASE = "/link-sharing" +const CHAINSAFE_LANDING = "https://chainsafe.io/" export const ROUTE_LINKS = { Landing: "/", PrivacyPolicy: "https://files.chainsafe.io/privacy-policy", Terms: "https://files.chainsafe.io/terms-of-service", - ChainSafe: "https://chainsafe.io/", + ChainSafe: CHAINSAFE_LANDING, + ProductPlans: `${CHAINSAFE_LANDING}`, Drive: (rawCurrentPath: string) => `/drive${rawCurrentPath}`, Bin: (rawBinPath: string) => `/bin${rawBinPath}`, Search: (rawSearchTerm: string) => `/search/${rawSearchTerm}`, diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx index d761342eb6..a076d478a3 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ConfirmPlan.tsx @@ -174,7 +174,7 @@ const ConfirmPlan = ({ className={classes.featureSeparator} > {planPrice?.metadata?.storage_size_bytes - ? {currentPlanStorage} of storage + ? {currentPlanStorage} of storage : plan.description } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx index c5ac72c970..b55c30d97f 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PlanSuccess.tsx @@ -126,7 +126,7 @@ const PlanSuccess = ({ plan, onClose, planPrice }: IPlanSuccess) => { variant="body1" > {planPrice?.metadata?.storage_size_bytes - ? {newPlanCapacity} of storage + ? {newPlanCapacity} of storage : plan.description } 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 index 47f1d5c10c..fdb8d73260 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx @@ -6,6 +6,7 @@ import { t, Trans } from "@lingui/macro" import { CSFTheme } from "../../../../../Themes/types" import { useBilling } from "../../../../../Contexts/BillingContext" import { Product } from "@chainsafe/files-api-client" +import { ROUTE_LINKS } from "../../../../FilesRoutes" const useStyles = makeStyles(({ breakpoints, constants, palette, typography }: CSFTheme) => createStyles({ @@ -140,15 +141,14 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => component="p" variant="h4" > - - Switch Plans - + Switch Plans - {!plans &&
- -
- } + {!plans && ( +
+ +
+ )}
{plans && plans.map((plan) => { const monthly = plan.prices.find((price) => price.recurring.interval === "month") @@ -183,8 +183,7 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => : t`Free`} - ) - } + )} {monthly && yearly ? ( > { monthly?.metadata?.storage_size_bytes - ? {currentStorage} of storage + ? {currentStorage} of storage : plan.description } @@ -239,9 +238,9 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => className={classes.description} > { - monthly?.metadata?.storage_size_bytes - ? {currentStorage} of storage - : plan.description + monthly?.metadata?.storage_size_bytes + ? {currentStorage} of storage + : plan.description } @@ -277,7 +276,7 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => {desktop && ( From 29b1d66b1808a03506cb60be7e5fdf8102879c74 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 8 Dec 2021 16:48:15 +0100 Subject: [PATCH 39/39] anchor not Link for external links --- .../Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 index fdb8d73260..30229862f1 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/SelectPlan.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react" import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import clsx from "clsx" -import { Button, ExternalSvg, formatBytes, Link, Loading, Typography } from "@chainsafe/common-components" +import { Button, ExternalSvg, formatBytes, Loading, Typography } from "@chainsafe/common-components" import { t, Trans } from "@lingui/macro" import { CSFTheme } from "../../../../../Themes/types" import { useBilling } from "../../../../../Contexts/BillingContext" @@ -274,9 +274,9 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) =>
{desktop && ( - @@ -287,7 +287,7 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) => Not sure what to pick? Learn more about our plans - + )}