From 1665daac181d37f2300ffad03174e4d3258fc0f6 Mon Sep 17 00:00:00 2001
From: Joseph Chrzan <cole@schematichq.com>
Date: Wed, 25 Sep 2024 21:20:31 -0400
Subject: [PATCH] sch-1881 (#74)

* fix checkout help text

* copy adjustments; fix modal sizing

* finalize copy; allow current plan to be selected
---
 .../models/CompanySubscriptionResponseData.ts |  9 ++
 .../elements/plan-manager/CheckoutDialog.tsx  | 96 +++++++++++++------
 components/src/components/ui/modal/Modal.tsx  |  4 +-
 3 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/components/src/api/models/CompanySubscriptionResponseData.ts b/components/src/api/models/CompanySubscriptionResponseData.ts
index b52f0edd..a8a36ee8 100644
--- a/components/src/api/models/CompanySubscriptionResponseData.ts
+++ b/components/src/api/models/CompanySubscriptionResponseData.ts
@@ -74,6 +74,12 @@ export interface CompanySubscriptionResponseData {
    * @memberof CompanySubscriptionResponseData
    */
   products: Array<BillingProductForSubscriptionResponseData>;
+  /**
+   *
+   * @type {string}
+   * @memberof CompanySubscriptionResponseData
+   */
+  status: string;
   /**
    *
    * @type {string}
@@ -101,6 +107,7 @@ export function instanceOfCompanySubscriptionResponseData(
     return false;
   if (!("interval" in value) || value["interval"] === undefined) return false;
   if (!("products" in value) || value["products"] === undefined) return false;
+  if (!("status" in value) || value["status"] === undefined) return false;
   if (
     !("subscriptionExternalId" in value) ||
     value["subscriptionExternalId"] === undefined
@@ -140,6 +147,7 @@ export function CompanySubscriptionResponseDataFromJSONTyped(
     products: (json["products"] as Array<any>).map(
       BillingProductForSubscriptionResponseDataFromJSON,
     ),
+    status: json["status"],
     subscriptionExternalId: json["subscription_external_id"],
     totalPrice: json["total_price"],
   };
@@ -163,6 +171,7 @@ export function CompanySubscriptionResponseDataToJSON(
     products: (value["products"] as Array<any>).map(
       BillingProductForSubscriptionResponseDataToJSON,
     ),
+    status: value["status"],
     subscription_external_id: value["subscriptionExternalId"],
     total_price: value["totalPrice"],
   };
diff --git a/components/src/components/elements/plan-manager/CheckoutDialog.tsx b/components/src/components/elements/plan-manager/CheckoutDialog.tsx
index fe46a603..52e0d883 100644
--- a/components/src/components/elements/plan-manager/CheckoutDialog.tsx
+++ b/components/src/components/elements/plan-manager/CheckoutDialog.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTheme } from "styled-components";
 import pluralize from "pluralize";
 import type {
@@ -100,6 +100,7 @@ export const CheckoutDialog = () => {
     dueNow: number;
     newCharges: number;
     proration: number;
+    periodStart: Date;
   }>();
   const [paymentMethodId, setPaymentMethodId] = useState<string | undefined>();
   const [isLoading, setIsLoading] = useState(false);
@@ -206,10 +207,16 @@ export const CheckoutDialog = () => {
     [selectedPlan, selectPlan],
   );
 
+  useLayoutEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+
   const allowCheckout =
     api &&
     selectedPlan &&
-    selectedPlan?.id !== currentPlan?.id &&
     ((paymentMethod && !showPaymentForm) || paymentMethodId) &&
     !isLoading;
 
@@ -517,20 +524,19 @@ export const CheckoutDialog = () => {
                             </Flex>
                           )}
 
-                          {!(plan.current || plan.id === currentPlan?.id) &&
-                            plan.id !== selectedPlan?.id && (
-                              <StyledButton
-                                disabled={plan.valid === false}
-                                {...(plan.valid === true && {
-                                  onClick: () => selectPlan(plan),
-                                })}
-                                $size="sm"
-                                $color="primary"
-                                $variant="outline"
-                              >
-                                Select
-                              </StyledButton>
-                            )}
+                          {plan.id !== selectedPlan?.id && (
+                            <StyledButton
+                              disabled={plan.valid === false}
+                              {...(plan.valid === true && {
+                                onClick: () => selectPlan(plan),
+                              })}
+                              $size="sm"
+                              $color="primary"
+                              $variant="outline"
+                            >
+                              Select
+                            </StyledButton>
+                          )}
                         </Flex>
                       </Flex>
                     );
@@ -592,14 +598,15 @@ export const CheckoutDialog = () => {
 
         <Flex
           $flexDirection="column"
+          $width="21.5rem"
+          $overflow="auto"
           $backgroundColor={theme.card.background}
           $borderRadius="0 0 0.5rem"
-          $width="21.5rem"
           $boxShadow="0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;"
         >
           <Flex
-            $flexDirection="column"
             $position="relative"
+            $flexDirection="column"
             $gap="1rem"
             $width="100%"
             $height="auto"
@@ -727,7 +734,11 @@ export const CheckoutDialog = () => {
 
             <Flex $flexDirection="column" $gap="0.5rem">
               {currentPlan && (
-                <Flex $justifyContent="space-between" $alignItems="center">
+                <Flex
+                  $justifyContent="space-between"
+                  $alignItems="center"
+                  $gap="1rem"
+                >
                   <Flex
                     {...(selectedPlan && {
                       $opacity: "0.625",
@@ -778,7 +789,11 @@ export const CheckoutDialog = () => {
                     />
                   </Box>
 
-                  <Flex $justifyContent="space-between" $alignItems="center">
+                  <Flex
+                    $justifyContent="space-between"
+                    $alignItems="center"
+                    $gap="1rem"
+                  >
                     <Flex>
                       <Text
                         $font={theme.typography.heading4.fontFamily}
@@ -860,6 +875,7 @@ export const CheckoutDialog = () => {
               </>
             )}
           </Flex>
+
           <Flex
             $flexDirection="column"
             $position="relative"
@@ -869,7 +885,7 @@ export const CheckoutDialog = () => {
             $padding="1.5rem"
           >
             {selectedPlan && subscriptionPrice && (
-              <Flex $justifyContent="space-between">
+              <Flex $justifyContent="space-between" $gap="1rem">
                 <Box $opacity="0.625">
                   <Text
                     $font={theme.typography.text.fontFamily}
@@ -895,7 +911,7 @@ export const CheckoutDialog = () => {
             )}
 
             {charges && (
-              <Flex $justifyContent="space-between">
+              <Flex $justifyContent="space-between" $gap="1rem">
                 <Box $opacity="0.625">
                   <Text
                     $font={theme.typography.text.fontFamily}
@@ -914,7 +930,33 @@ export const CheckoutDialog = () => {
                     $weight={theme.typography.text.fontWeight}
                     $color={theme.typography.text.color}
                   >
-                    {formatCurrency(charges.dueNow)}
+                    {formatCurrency(Math.max(0, charges.dueNow))}
+                  </Text>
+                </Box>
+              </Flex>
+            )}
+
+            {charges?.dueNow && charges.dueNow < 0 && (
+              <Flex $justifyContent="space-between" $gap="1rem">
+                <Box $opacity="0.625">
+                  <Text
+                    $font={theme.typography.text.fontFamily}
+                    $size={theme.typography.text.fontSize}
+                    $weight={theme.typography.text.fontWeight}
+                    $color={theme.typography.text.color}
+                  >
+                    Credits to be applied to future invoices:
+                  </Text>
+                </Box>
+
+                <Box>
+                  <Text
+                    $font={theme.typography.text.fontFamily}
+                    $size={theme.typography.text.fontSize}
+                    $weight={theme.typography.text.fontWeight}
+                    $color={theme.typography.text.color}
+                  >
+                    {formatCurrency(Math.abs(charges.dueNow))}
                   </Text>
                 </Box>
               </Flex>
@@ -998,11 +1040,9 @@ export const CheckoutDialog = () => {
                 $weight={theme.typography.text.fontWeight}
                 $color={theme.typography.text.color}
               >
-                {checkoutStage === "plan"
-                  ? "Discounts & credits applied at checkout"
-                  : subscriptionPrice &&
-                    `You will be billed ${subscriptionPrice} for this subscription
-                    every ${planPeriod} on the ${data.subscription?.latestInvoice?.dueDate && formatOrdinal(new Date(data.subscription.latestInvoice.dueDate).getDate())} ${planPeriod === "year" && data.subscription?.latestInvoice?.dueDate ? `of ${getMonthName(data.subscription.latestInvoice.dueDate)}` : ""} unless you unsubscribe.`}
+                {subscriptionPrice &&
+                  `You will be billed ${subscriptionPrice} for this subscription
+                    every ${planPeriod} ${charges?.periodStart ? `on the ${formatOrdinal(charges.periodStart.getDate())}` : ""} ${planPeriod === "year" && charges?.periodStart ? `of ${getMonthName(charges.periodStart)}` : ""} unless you unsubscribe.`}
               </Text>
             </Box>
           </Flex>
diff --git a/components/src/components/ui/modal/Modal.tsx b/components/src/components/ui/modal/Modal.tsx
index 82fd1384..a5f882c8 100644
--- a/components/src/components/ui/modal/Modal.tsx
+++ b/components/src/components/ui/modal/Modal.tsx
@@ -67,8 +67,8 @@ export const Modal = ({ children, size = "auto", onClose }: ModalProps) => {
           : {
               $width: "100%",
               $height: "100%",
-              $maxWidth: "1366px",
-              $maxHeight: "768px",
+              $maxWidth: "1356px",
+              $maxHeight: "860px",
             })}
         $backgroundColor={theme.card.background}
         $borderRadius="0.5rem"