sch-2035 (#150)

* port styles * fixes * tweak town * undo button update * two fixes * update deps
SchematicHQ · Nov 20, 2024 · 7100494 · 7100494
1 parent 43d1b8c
commit 7100494
Show file tree

Hide file tree

Showing 20 changed files with 432 additions and 346 deletions.
diff --git a/components/package.json b/components/package.json
@@ -29,7 +29,7 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^4.10.0",
+    "@stripe/stripe-js": "^5.2.0",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
@@ -41,7 +41,7 @@
     "@craftjs/core": "^0.2.10",
     "@microsoft/api-extractor": "^7.47.9",
     "@openapitools/openapi-generator-cli": "^2.15.3",
-    "@stripe/react-stripe-js": "^2.9.0",
+    "@stripe/react-stripe-js": "^3.0.0",
     "@types/jest": "^29.5.13",
     "@types/lodash": "^4.17.13",
     "@types/pako": "^2.0.3",
@@ -67,7 +67,7 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "@stripe/react-stripe-js": ">=2",
+    "@stripe/react-stripe-js": ">=3",
     "react": ">=18",
     "react-dom": ">=18"
   },

diff --git a/components/src/components/elements/included-features/IncludedFeatures.tsx b/components/src/components/elements/included-features/IncludedFeatures.tsx
@@ -113,10 +113,10 @@ export const IncludedFeatures = forwardRef<
       ref={ref}
       className={className}
       $flexDirection="column"
-      $gap="1.5rem"
+      $gap="1rem"
     >
       {props.header.isVisible && (
-        <Box>
+        <Box $marginBottom="0.5rem">
           <Text
             $font={theme.typography[props.header.fontStyle].fontFamily}
             $size={theme.typography[props.header.fontStyle].fontSize}
@@ -175,7 +175,7 @@ export const IncludedFeatures = forwardRef<
                   $textAlign={shouldWrapChildren ? "left" : "right"}
                 >
                   {props.entitlement.isVisible && (
-                    <Box>
+                    <Box $whiteSpace="nowrap">
                       <Text
                         $font={
                           theme.typography[props.entitlement.fontStyle]

diff --git a/components/src/components/elements/payment-method/PaymentMethod.tsx b/components/src/components/elements/payment-method/PaymentMethod.tsx
@@ -228,20 +228,12 @@ export const PaymentMethod = forwardRef<
     }
   }, [stripe, setupIntent?.publishableKey]);
 
-  useEffect(() => {
-    document.body.style.overflow = layout === "payment" ? "hidden" : "";
-
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [layout]);
-
   useLayoutEffect(() => {
     const parent = portal || document.body;
     const value = Math.abs(parent.getBoundingClientRect().top ?? 0);
     setTop(value);
 
-    parent.style.overflow = "hidden";
+    parent.style.overflow = layout === "payment" ? "hidden" : "";
 
     return () => {
       parent.style.overflow = "";

diff --git a/components/src/components/elements/plan-manager/PlanManager.tsx b/components/src/components/elements/plan-manager/PlanManager.tsx
@@ -148,18 +148,38 @@ export const PlanManager = forwardRef<
           {props.header.price.isVisible &&
             typeof currentPlan.planPrice === "number" &&
             currentPlan.planPeriod && (
-              <Text
-                $font={
-                  theme.typography[props.header.price.fontStyle].fontFamily
-                }
-                $size={theme.typography[props.header.price.fontStyle].fontSize}
-                $weight={
-                  theme.typography[props.header.price.fontStyle].fontWeight
-                }
-                $color={theme.typography[props.header.price.fontStyle].color}
-              >
-                {formatCurrency(currentPlan.planPrice)}/{currentPlan.planPeriod}
-              </Text>
+              <Box>
+                <Text
+                  $font={
+                    theme.typography[props.header.price.fontStyle].fontFamily
+                  }
+                  $size={
+                    theme.typography[props.header.price.fontStyle].fontSize
+                  }
+                  $weight={
+                    theme.typography[props.header.price.fontStyle].fontWeight
+                  }
+                  $color={theme.typography[props.header.price.fontStyle].color}
+                >
+                  {formatCurrency(currentPlan.planPrice)}
+                </Text>
+
+                <Text
+                  $font={
+                    theme.typography[props.header.price.fontStyle].fontFamily
+                  }
+                  $size={
+                    (16 / 30) *
+                    theme.typography[props.header.price.fontStyle].fontSize
+                  }
+                  $weight={
+                    theme.typography[props.header.price.fontStyle].fontWeight
+                  }
+                  $color={theme.typography[props.header.price.fontStyle].color}
+                >
+                  /{currentPlan.planPeriod}
+                </Text>
+              </Box>
             )}
         </Flex>
       )}

diff --git a/components/src/components/elements/pricing-table/PricingTable.tsx b/components/src/components/elements/pricing-table/PricingTable.tsx
@@ -12,7 +12,7 @@ import {
 import type { ElementProps, RecursivePartial } from "../../../types";
 import { formatCurrency, formatNumber, hexToHSL } from "../../../utils";
 import { cardBoxShadow, FussyChild } from "../../layout";
-import { CheckoutDialog, PeriodToggle, Savings } from "../../shared";
+import { CheckoutDialog, PeriodToggle } from "../../shared";
 import {
   Box,
   Flex,
@@ -93,12 +93,12 @@ const resolveDesignProps = (
     },
     upgrade: {
       isVisible: props.upgrade?.isVisible ?? true,
-      buttonSize: props.upgrade?.buttonSize ?? "sm",
+      buttonSize: props.upgrade?.buttonSize ?? "md",
       buttonStyle: props.upgrade?.buttonStyle ?? "primary",
     },
     downgrade: {
       isVisible: props.downgrade?.isVisible ?? true,
-      buttonSize: props.downgrade?.buttonSize ?? "sm",
+      buttonSize: props.downgrade?.buttonSize ?? "md",
       buttonStyle: props.downgrade?.buttonStyle ?? "primary",
     },
   };
@@ -135,47 +135,48 @@ export const PricingTable = forwardRef<
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
 
   const currentPlanIndex = plans.findIndex((plan) => plan.current);
-  const currentPlan = plans[currentPlanIndex];
 
   return (
     <FussyChild
       ref={ref}
       className={className}
       as={Flex}
       $flexDirection="column"
-      $gap="3rem"
+      $gap="2rem"
     >
       <Box>
         <Flex
-          $justifyContent="space-between"
+          $flexDirection="column"
+          $justifyContent="center"
           $alignItems="center"
-          $marginBottom="2rem"
+          $gap="1rem"
+          $marginBottom="1rem"
+          $viewport={{
+            sm: {
+              $flexDirection: "row",
+              $justifyContent: "space-between",
+            },
+          }}
         >
           <Text
             $font={theme.typography[props.header.fontStyle].fontFamily}
             $size={theme.typography[props.header.fontStyle].fontSize}
             $weight={theme.typography[props.header.fontStyle].fontWeight}
-            $color={theme.typography[props.header.fontStyle].color}
+            $color={theme.card.background}
           >
             {props.header.isVisible &&
               props.plans.isVisible &&
               plans.length > 0 &&
               "Plans"}
           </Text>
 
-          <Flex $alignItems="center" $gap="1rem">
-            {props.showDiscount && (
-              <Savings plan={currentPlan} period={selectedPeriod} />
-            )}
-
-            {props.showPeriodToggle && (
-              <PeriodToggle
-                options={periods}
-                selectedOption={selectedPeriod}
-                onChange={(period) => setSelectedPeriod(period)}
-              />
-            )}
-          </Flex>
+          {props.showPeriodToggle && (
+            <PeriodToggle
+              options={periods}
+              selectedOption={selectedPeriod}
+              onChange={(period) => setSelectedPeriod(period)}
+            />
+          )}
         </Flex>
 
         {props.plans.isVisible && plans.length > 0 && (
@@ -311,7 +312,7 @@ export const PricingTable = forwardRef<
                         $position="absolute"
                         $right="1rem"
                         $top="1rem"
-                        $fontSize="0.625rem"
+                        $fontSize="0.75rem"
                         $color={
                           hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF"
                         }
@@ -332,7 +333,7 @@ export const PricingTable = forwardRef<
                     $padding={`${0.75 * cardPadding}rem ${cardPadding}rem 0`}
                   >
                     {props.plans.showEntitlements && (
-                      <Flex $flexDirection="column" $gap="0.5rem" $flexGrow="1">
+                      <Flex $flexDirection="column" $gap="1rem" $flexGrow="1">
                         {props.plans.showInclusionText && index > 0 && (
                           <Box $marginBottom="1.5rem">
                             <Text
@@ -477,13 +478,13 @@ export const PricingTable = forwardRef<
               <Flex
                 $justifyContent="space-between"
                 $alignItems="center"
-                $marginBottom="2rem"
+                $marginBottom="1rem"
               >
                 <Text
                   $font={theme.typography[props.header.fontStyle].fontFamily}
                   $size={theme.typography[props.header.fontStyle].fontSize}
                   $weight={theme.typography[props.header.fontStyle].fontWeight}
-                  $color={theme.typography[props.header.fontStyle].color}
+                  $color={theme.card.background}
                 >
                   Add-ons
                 </Text>
@@ -623,7 +624,7 @@ export const PricingTable = forwardRef<
                           $position="absolute"
                           $right="1rem"
                           $top="1rem"
-                          $fontSize="0.625rem"
+                          $fontSize="0.75rem"
                           $color={
                             hexToHSL(theme.primary).l > 50
                               ? "#000000"
@@ -648,7 +649,7 @@ export const PricingTable = forwardRef<
                         <Flex
                           $flexDirection="column"
                           $position="relative"
-                          $gap="0.5rem"
+                          $gap="1rem"
                           $flexGrow="1"
                         >
                           {addOn.entitlements.map((entitlement) => {

diff --git a/components/src/components/elements/upcoming-bill/UpcomingBill.tsx b/components/src/components/elements/upcoming-bill/UpcomingBill.tsx
@@ -113,7 +113,7 @@ export const UpcomingBill = forwardRef<
           </Flex>
         )}
 
-        <Box $maxWidth="10rem" $textAlign="right">
+        <Box $lineHeight={1.15} $maxWidth="10rem" $textAlign="right">
           <Text
             $font={theme.typography[props.contractEndDate.fontStyle].fontFamily}
             $size={theme.typography[props.contractEndDate.fontStyle].fontSize}

diff --git a/components/src/components/layout/viewport/styles.ts b/components/src/components/layout/viewport/styles.ts
@@ -1,12 +1,12 @@
 import styled from "styled-components";
+import { Flex } from "../../ui";
 
-export const StyledViewport = styled.div<{
+export const StyledViewport = styled(Flex)<{
   $numberOfColumns?: 1 | 2 | 3;
 }>`
-  display: flex;
   flex-wrap: wrap;
   place-content: start;
   margin-left: auto;
   margin-right: auto;
-  gap: 1rem;
+  gap: 2rem;
 `;
diff --git a/components/src/components/shared/checkout-dialog/AddOns.tsx b/components/src/components/shared/checkout-dialog/AddOns.tsx
@@ -21,31 +21,6 @@ export const AddOns = ({ addOns, toggle, isLoading, period }: AddOnsProps) => {
 
   return (
     <>
-      <Flex $flexDirection="column" $gap="1rem" $marginBottom="1rem">
-        <Text
-          as="h3"
-          id="select-addons-dialog-label"
-          $font={theme.typography.heading3.fontFamily}
-          $size={theme.typography.heading3.fontSize}
-          $weight={theme.typography.heading3.fontWeight}
-          $color={theme.typography.heading3.color}
-          $marginBottom="0.5rem"
-        >
-          Customize with add-ons
-        </Text>
-
-        <Text
-          as="p"
-          id="select-addons-dialog-description"
-          $font={theme.typography.text.fontFamily}
-          $size={theme.typography.text.fontSize}
-          $weight={theme.typography.text.fontWeight}
-          $color={theme.typography.text.color}
-        >
-          Optionally add features to your subscription
-        </Text>
-      </Flex>
-
       <Box
         $display="grid"
         $gridTemplateColumns="repeat(auto-fill, minmax(300px, 1fr))"
@@ -123,7 +98,7 @@ export const AddOns = ({ addOns, toggle, isLoading, period }: AddOnsProps) => {
                     $position="absolute"
                     $right="1rem"
                     $top="1rem"
-                    $fontSize="0.625rem"
+                    $fontSize="0.75rem"
                     $color={
                       hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF"
                     }