Proration and credit calculated amounts

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

@@ -12,6 +12,7 @@ import PlanSuccess from "./PlanSuccess"
 import DowngradeDetails from "./DowngradeDetails"
 import { PaymentMethod } from "../../../../../Contexts/BillingContext"
 import CryptoPayment from "./CryptoPayment"
+
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
     root: {

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

@@ -1,12 +1,13 @@
-import React, { useMemo } from "react"
+import React, { useState, useEffect, useMemo } from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
-import { Product, ProductPrice } from "@chainsafe/files-api-client"
+import { CheckSubscriptionUpdate, Product, ProductPrice } from "@chainsafe/files-api-client"
 import { Button, CreditCardIcon, Divider, formatBytes, Typography } from "@chainsafe/common-components"
 import { t, Trans } from "@lingui/macro"
 import dayjs from "dayjs"
 import { PaymentMethod, useBilling } from "../../../../../Contexts/BillingContext"
 import clsx from "clsx"
+import { useFilesApi } from "../../../../../Contexts/FilesApiContext"
 
 const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
   createStyles({
@@ -114,12 +115,22 @@ const ConfirmPlan = ({
   const classes = useStyles()
   const { defaultCard } = useBilling()
   const { currentSubscription } = useBilling()
+  const { filesApiClient } = useFilesApi()
+  const [checkSubscriptionUpdate, setCheckSubscriptionUpdate] = useState<CheckSubscriptionUpdate  | undefined>()
   const newPlanStorage = formatBytes(Number(planPrice?.metadata?.storage_size_bytes), 2)
+
   const isDowngrade = useMemo(() => {
     const currentPrice = currentSubscription?.product?.price?.unit_amount
     return currentPrice && currentPrice > planPrice.unit_amount
-  }, [currentSubscription, planPrice]
-  )
+  }, [currentSubscription, planPrice])
+
+  useEffect(() => {
+    if (!currentSubscription) return
+    filesApiClient.checkSubscriptionUpdate(currentSubscription?.id, {
+      payment_method: paymentMethod === "creditCard" ? "stripe" : "crypto",
+      price_id: planPrice.id
+    }).then(setCheckSubscriptionUpdate).catch(console.error)
+  }, [currentSubscription, paymentMethod, filesApiClient, planPrice])
 
   return (
     <article className={classes.root}>
@@ -256,20 +267,17 @@ const ConfirmPlan = ({
           </Typography>
         </div>
       </div>
-      <Divider className={classes.divider} />
       <div className={classes.rowBox}>
         <Typography
-          component="h5"
-          variant="h5"
-          className={classes.boldText}
+          component="p"
+          variant="body1"
         >
-          <Trans>Total</Trans>
+          <Trans>Plan price</Trans>
         </Typography>
         <div className={classes.pushRightBox}>
           <Typography
             variant="body1"
             component="p"
-            className={classes.boldText}
           >
             {planPrice.unit_amount ? planPrice.currency : ""} {planPrice.unit_amount}
             <span className={classes.normalWeightText}>
@@ -278,6 +286,36 @@ const ConfirmPlan = ({
           </Typography>
         </div>
       </div>
+      <Divider className={classes.divider} />
+      <div className={classes.rowBox}>
+        <Typography
+          component="h5"
+          variant="h5"
+          className={classes.boldText}
+        >
+          <Trans>Payment amount</Trans>
+        </Typography>
+        <div className={classes.pushRightBox}>
+          {checkSubscriptionUpdate && <div  className={classes.pushRightBox}>
+            <Typography
+              variant="h5"
+              component="h5"
+              className={classes.boldText}
+            >
+              {planPrice.currency} {checkSubscriptionUpdate.amount_remaining.toFixed(2)}
+            </Typography>
+            {checkSubscriptionUpdate.amount_balance > 0 && <Typography
+              component="p"
+              variant="body2"
+            >
+              (<Trans>Previous balance</Trans> : {planPrice.currency} {checkSubscriptionUpdate.amount_balance.toFixed(2)})
+            </Typography>
+
+            }
+          </div>
+          }
+        </div>
+      </div>
       {isSubscriptionError &&
         <Typography
           component="p"
@@ -299,7 +337,7 @@ const ConfirmPlan = ({
           <Button
             variant="primary"
             loading={loadingChangeSubscription}
-            disabled={loadingChangeSubscription}
+            disabled={loadingChangeSubscription || !checkSubscriptionUpdate}
             onClick={onChangeSubscription}
           >
             {paymentMethod === "creditCard"

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

@@ -658,6 +658,9 @@ msgstr ""
 msgid "Pay with {0}"
 msgstr ""
 
+msgid "Payment amount"
+msgstr ""
+
 msgid "Payment and Subscriptions"
 msgstr ""
 
@@ -667,6 +670,9 @@ msgstr ""
 msgid "Plan changed successfully"
 msgstr ""
 
+msgid "Plan price"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Bitte geben Sie einen Dateinamen ein"
 
@@ -691,6 +697,9 @@ msgstr "Vorschau"
 msgid "Previous"
 msgstr "Vorherige"
 
+msgid "Previous balance"
+msgstr ""
+
 msgid "Privacy Policy"
 msgstr "Datenschutzrichtlinie"
 

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

@@ -661,6 +661,9 @@ msgstr "Pay with crypto"
 msgid "Pay with {0}"
 msgstr "Pay with {0}"
 
+msgid "Payment amount"
+msgstr "Payment amount"
+
 msgid "Payment and Subscriptions"
 msgstr "Payment and Subscriptions"
 
@@ -670,6 +673,9 @@ msgstr "Payment method"
 msgid "Plan changed successfully"
 msgstr "Plan changed successfully"
 
+msgid "Plan price"
+msgstr "Plan price"
+
 msgid "Please enter a file name"
 msgstr "Please enter a file name"
 
@@ -694,6 +700,9 @@ msgstr "Preview"
 msgid "Previous"
 msgstr "Previous"
 
+msgid "Previous balance"
+msgstr "Previous balance"
+
 msgid "Privacy Policy"
 msgstr "Privacy Policy"
 

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

@@ -662,6 +662,9 @@ msgstr ""
 msgid "Pay with {0}"
 msgstr ""
 
+msgid "Payment amount"
+msgstr ""
+
 msgid "Payment and Subscriptions"
 msgstr ""
 
@@ -671,6 +674,9 @@ msgstr ""
 msgid "Plan changed successfully"
 msgstr ""
 
+msgid "Plan price"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Ingrese un nombre de archivo"
 
@@ -695,6 +701,9 @@ msgstr "Avance"
 msgid "Previous"
 msgstr "Anterior"
 
+msgid "Previous balance"
+msgstr ""
+
 msgid "Privacy Policy"
 msgstr "Política de privacidad"
 

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

@@ -662,6 +662,9 @@ msgstr ""
 msgid "Pay with {0}"
 msgstr ""
 
+msgid "Payment amount"
+msgstr ""
+
 msgid "Payment and Subscriptions"
 msgstr "Paiements et souscriptions"
 
@@ -671,6 +674,9 @@ msgstr "Méthode de paiement"
 msgid "Plan changed successfully"
 msgstr "Formule changée"
 
+msgid "Plan price"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Veuillez entrer un nom de fichier"
 
@@ -695,6 +701,9 @@ msgstr "Aperçu"
 msgid "Previous"
 msgstr "Précédent"
 
+msgid "Previous balance"
+msgstr ""
+
 msgid "Privacy Policy"
 msgstr "Politique de confidentialité"
 

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

@@ -658,6 +658,9 @@ msgstr ""
 msgid "Pay with {0}"
 msgstr ""
 
+msgid "Payment amount"
+msgstr ""
+
 msgid "Payment and Subscriptions"
 msgstr ""
 
@@ -667,6 +670,9 @@ msgstr ""
 msgid "Plan changed successfully"
 msgstr ""
 
+msgid "Plan price"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Skriv inn et filnavn"
 
@@ -691,6 +697,9 @@ msgstr "Forhåndsvis"
 msgid "Previous"
 msgstr "Forrige"
 
+msgid "Previous balance"
+msgstr ""
+
 msgid "Privacy Policy"
 msgstr "Personvernspraksis"