sch-1926 (#86)

* init * more form work * kinda finalize payment method styles * lil better * midas touch * api ups * space master * add functions logic
SchematicHQ · Oct 7, 2024 · 591fe20 · 591fe20
1 parent 6dd9c4d
commit 591fe20
Show file tree

Hide file tree

Showing 8 changed files with 355 additions and 355 deletions.
diff --git a/components/src/components/elements/payment-method/PaymentMethod.tsx b/components/src/components/elements/payment-method/PaymentMethod.tsx
diff --git a/components/src/components/elements/plan-manager/CheckoutDialog.tsx b/components/src/components/elements/plan-manager/CheckoutDialog.tsx
@@ -643,6 +643,10 @@ export const CheckoutDialog = () => {
                     clientSecret: setupIntent.setupIntentClientSecret,
                   }}
                 >
+                  <Box $width="100%" $marginBottom="1.5rem">
+                    <Text $size={18}>Add payment method</Text>
+                  </Box>
+
                   <PaymentForm
                     plan={selectedPlan}
                     period={planPeriod}
@@ -652,12 +656,9 @@ export const CheckoutDialog = () => {
                   />
 
                   {data.subscription?.paymentMethod && (
-                    <Box
-                      tabIndex={0}
-                      onClick={() => setShowPaymentForm(false)}
-                      $cursor="pointer"
-                    >
+                    <Box>
                       <Text
+                        onClick={() => setShowPaymentForm(false)}
                         $font={theme.typography.link.fontFamily}
                         $size={theme.typography.link.fontSize}
                         $weight={theme.typography.link.fontWeight}
@@ -672,12 +673,9 @@ export const CheckoutDialog = () => {
                 <>
                   <PaymentMethod />
 
-                  <Box
-                    tabIndex={0}
-                    onClick={() => setShowPaymentForm(true)}
-                    $cursor="pointer"
-                  >
+                  <Box>
                     <Text
+                      onClick={() => setShowPaymentForm(true)}
                       $font={theme.typography.link.fontFamily}
                       $size={theme.typography.link.fontSize}
                       $weight={theme.typography.link.fontWeight}

diff --git a/components/src/components/elements/plan-manager/PaymentForm.tsx b/components/src/components/elements/plan-manager/PaymentForm.tsx
@@ -1,21 +1,18 @@
 import { useState } from "react";
-import {
-  LinkAuthenticationElement,
-  PaymentElement,
-} from "@stripe/react-stripe-js";
+import { PaymentElement } from "@stripe/react-stripe-js";
 import { useStripe, useElements } from "@stripe/react-stripe-js";
 import type { CompanyPlanDetailResponseData } from "../../../api";
 import { useEmbed } from "../../../hooks";
-import { Box, Flex, Text } from "../../ui";
+import { Box, Text } from "../../ui";
 import { StyledButton } from "./styles";
 
 interface PaymentFormProps {
-  plan: CompanyPlanDetailResponseData;
-  period: string;
+  plan?: CompanyPlanDetailResponseData;
+  period?: string;
   onConfirm?: (paymentMethodId: string) => void;
 }
 
-export const PaymentForm = ({ plan, period, onConfirm }: PaymentFormProps) => {
+export const PaymentForm = ({ onConfirm }: PaymentFormProps) => {
   const stripe = useStripe();
   const elements = useElements();
 
@@ -30,9 +27,7 @@ export const PaymentForm = ({ plan, period, onConfirm }: PaymentFormProps) => {
   ) => {
     event.preventDefault();
 
-    const priceId =
-      period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
-    if (!api || !stripe || !elements || !priceId) {
+    if (!api || !stripe || !elements) {
       return;
     }
 
@@ -77,28 +72,6 @@ export const PaymentForm = ({ plan, period, onConfirm }: PaymentFormProps) => {
         overflowY: "auto",
       }}
     >
-      <Box $width="100%" $marginBottom="1.5rem">
-        <Text $size={18}>Add payment method</Text>
-      </Box>
-
-      <Flex
-        $flexDirection="column"
-        $gap="1.5rem"
-        $width="100%"
-        $marginBottom="1.5rem"
-      >
-        <LinkAuthenticationElement
-          id="link-authentication-element"
-          // Access the email value like so:
-          // onChange={(event) => {
-          //  setEmail(event.value.email);
-          // }}
-          //
-          // Prefill the email field like so:
-          // options={{defaultValues: {email: 'foo@bar.com'}}}
-        />
-      </Flex>
-
       <Box $marginBottom="1.5rem">
         <PaymentElement id="payment-element" />
       </Box>

diff --git a/components/src/components/elements/plan-manager/PlanManager.tsx b/components/src/components/elements/plan-manager/PlanManager.tsx
@@ -90,85 +90,68 @@ export const PlanManager = forwardRef<
   }, [data.company, data.activePlans]);
 
   return (
-    <div ref={ref} className={className}>
-      <Flex
-        $flexDirection="column"
-        $gap="0.75rem"
-        {...(canChangePlan && { $margin: "0 0 0.5rem" })}
-      >
-        {props.header.isVisible && currentPlan && (
-          <Flex
-            $justifyContent="space-between"
-            $alignItems="center"
-            $gap="1rem"
-            $width="100%"
-            {...(canChangePlan && { $margin: "0 0 1.5rem" })}
-          >
-            <div>
-              <Box $margin="0 0 0.75rem">
-                <Text
-                  $font={
-                    theme.typography[props.header.title.fontStyle].fontFamily
-                  }
-                  $size={
-                    theme.typography[props.header.title.fontStyle].fontSize
-                  }
-                  $weight={
-                    theme.typography[props.header.title.fontStyle].fontWeight
-                  }
-                  $color={theme.typography[props.header.title.fontStyle].color}
-                  $lineHeight={1}
-                >
-                  {currentPlan.name}
-                </Text>
-              </Box>
-
-              {props.header.description.isVisible &&
-                currentPlan.description && (
-                  <Text
-                    $font={
-                      theme.typography[props.header.description.fontStyle]
-                        .fontFamily
-                    }
-                    $size={
-                      theme.typography[props.header.description.fontStyle]
-                        .fontSize
-                    }
-                    $weight={
-                      theme.typography[props.header.description.fontStyle]
-                        .fontWeight
-                    }
-                    $color={
-                      theme.typography[props.header.description.fontStyle].color
-                    }
-                  >
-                    {currentPlan.description}
-                  </Text>
-                )}
-            </div>
+    <Flex ref={ref} className={className} $flexDirection="column" $gap="2rem">
+      {props.header.isVisible && currentPlan && (
+        <Flex
+          $justifyContent="space-between"
+          $alignItems="center"
+          $width="100%"
+        >
+          <Flex $flexDirection="column" $gap="1rem">
+            <Text
+              as={Box}
+              $font={theme.typography[props.header.title.fontStyle].fontFamily}
+              $size={theme.typography[props.header.title.fontStyle].fontSize}
+              $weight={
+                theme.typography[props.header.title.fontStyle].fontWeight
+              }
+              $color={theme.typography[props.header.title.fontStyle].color}
+              $lineHeight={1}
+            >
+              {currentPlan.name}
+            </Text>
 
-            {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>
-              )}
+            {props.header.description.isVisible && currentPlan.description && (
+              <Text
+                as={Box}
+                $font={
+                  theme.typography[props.header.description.fontStyle]
+                    .fontFamily
+                }
+                $size={
+                  theme.typography[props.header.description.fontStyle].fontSize
+                }
+                $weight={
+                  theme.typography[props.header.description.fontStyle]
+                    .fontWeight
+                }
+                $color={
+                  theme.typography[props.header.description.fontStyle].color
+                }
+              >
+                {currentPlan.description}
+              </Text>
+            )}
           </Flex>
-        )}
-      </Flex>
+
+          {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>
+            )}
+        </Flex>
+      )}
 
       {canChangePlan && props.callToAction.isVisible && (
         <StyledButton
@@ -185,6 +168,6 @@ export const PlanManager = forwardRef<
       {canChangePlan &&
         layout === "checkout" &&
         createPortal(<CheckoutDialog />, portal || document.body)}
-    </div>
+    </Flex>
   );
 });
diff --git a/components/src/components/elements/plan-manager/index.ts b/components/src/components/elements/plan-manager/index.ts
@@ -1 +1,2 @@
+export * from "./PaymentForm";
 export * from "./PlanManager";
diff --git a/components/src/components/elements/upcoming-bill/UpcomingBill.tsx b/components/src/components/elements/upcoming-bill/UpcomingBill.tsx
@@ -81,7 +81,7 @@ export const UpcomingBill = forwardRef<
         <Flex
           $justifyContent="space-between"
           $alignItems="center"
-          $margin="0 0 0.75rem"
+          $margin="0 0 1rem"
         >
           <Text
             $font={theme.typography[props.header.fontStyle].fontFamily}

diff --git a/components/src/components/ui/modal/Modal.tsx b/components/src/components/ui/modal/Modal.tsx
@@ -66,11 +66,14 @@ export const Modal = ({ children, size = "auto", onClose }: ModalProps) => {
         $flexDirection="column"
         $overflow="hidden"
         {...(size === "auto"
-          ? { $width: "min-content", $height: "min-content" }
+          ? { $width: "fit-content", $height: "fit-content" }
           : {
               $width: "100%",
-              $height: "100%",
-              $maxWidth: "1356px",
+              ...(size === "lg"
+                ? { $height: "100%" }
+                : { $height: "fit-content" }),
+              $maxWidth:
+                size === "sm" ? "480px" : size === "md" ? "688px" : "1356px",
               $maxHeight: "860px",
             })}
         $backgroundColor={theme.card.background}

diff --git a/components/src/components/ui/text/styles.ts b/components/src/components/ui/text/styles.ts
@@ -12,7 +12,9 @@ export interface TextProps extends ComponentProps {
   $lineHeight?: ComponentProps["$lineHeight"];
 }
 
-export const Text = styled.span<TextProps>`
+export const Text = styled.span.attrs(({ onClick }) => ({
+  ...(onClick && { tabIndex: 0 }),
+}))<TextProps>`
   font-family: ${({ $font = "Inter" }) => `${$font}, sans-serif`};
   font-size: ${({ $size = 16 }) =>
     typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
@@ -28,4 +30,13 @@ export const Text = styled.span<TextProps>`
     outline: 2px solid ${({ theme }) => theme.primary};
     outline-offset: 2px;
   }
+
+  ${({ onClick }) =>
+    onClick &&
+    css`
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    `}
 `;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from "./PaymentForm";
		export * from "./PlanManager";