[SCH-3924] Trial checkout bug (#492)

tenub · web-flow · commit 74edbc06cf45 · 2025-07-21T15:02:17.000-04:00
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -46,14 +46,14 @@
     "@eslint/json": "^0.13.0",
     "@eslint/markdown": "^7.0.0",
     "@microsoft/api-extractor": "^7.52.8",
-    "@openapitools/openapi-generator-cli": "^2.21.2",
+    "@openapitools/openapi-generator-cli": "^2.21.3",
     "@stripe/react-stripe-js": "^3.7.0",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "esbuild": "^0.25.6",
+    "esbuild": "^0.25.8",
     "eslint": "^9.31.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
diff --git a/components/src/components/elements/metered-features/PriceDetails.tsx b/components/src/components/elements/metered-features/PriceDetails.tsx
@@ -51,10 +51,7 @@ export const PriceDetails = ({
         : currentTier?.perUnitPrice,
   };
 
-  if (
-    typeof feature === "undefined" ||
-    typeof currentTierPerUnitPrice !== "number"
-  ) {
+  if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
 
diff --git a/components/src/components/elements/payment-method/PaymentMethodDetails.tsx b/components/src/components/elements/payment-method/PaymentMethodDetails.tsx
@@ -326,9 +326,7 @@ export const PaymentMethodDetails = ({
                   ))}
                 </Flex>
 
-                {(!setupIntent ||
-                  !currentPaymentMethod ||
-                  showDifferentPaymentMethods) && (
+                {(!setupIntent || !currentPaymentMethod) && (
                   <Button
                     type="button"
                     onClick={initializePaymentMethod}
diff --git a/components/src/components/elements/plan-manager/AddOn.tsx b/components/src/components/elements/plan-manager/AddOn.tsx
@@ -25,7 +25,7 @@ export const AddOn = ({ addOn, currency, layout }: AddOnProps) => {
     >
       <Text display={layout.addOns.fontStyle}>{addOn.name}</Text>
 
-      {addOn.planPrice && addOn.planPeriod && (
+      {typeof addOn.planPrice === "number" && addOn.planPeriod && (
         <Text>
           {formatCurrency(addOn.planPrice, currency)}
           <sub>
diff --git a/components/src/components/elements/plan-manager/PlanManager.tsx b/components/src/components/elements/plan-manager/PlanManager.tsx
@@ -92,7 +92,7 @@ export const PlanManager = forwardRef<
 
   const isLightBackground = useIsLightBackground();
 
-  const trialEndDays = useTrialEnd();
+  const trialEnd = useTrialEnd();
 
   /**
    * Can change plan if there is:
@@ -171,9 +171,9 @@ export const PlanManager = forwardRef<
               : lighten(settings.theme.card.background, 0.04)
           }
         >
-          {trialEndDays && (
+          {typeof trialEnd.formatted !== "undefined" && (
             <Text as="h3" display="heading3">
-              {t("Trial ends in", { days: trialEndDays })}
+              {trialEnd.formatted}
             </Text>
           )}
 
@@ -207,7 +207,7 @@ export const PlanManager = forwardRef<
               {t("Subscription canceled")}
             </Text>
 
-            {billingSubscription?.cancelAt && (
+            {typeof billingSubscription?.cancelAt === "number" && (
               <Text
                 as="p"
                 $size={0.8125 * settings.theme.typography.text.fontSize}
diff --git a/components/src/components/elements/pricing-table/Plan.tsx b/components/src/components/elements/pricing-table/Plan.tsx
@@ -60,7 +60,7 @@ export const Plan = ({
 
   const isLightBackground = useIsLightBackground();
 
-  const trialEndDays = useTrialEnd();
+  const trialEnd = useTrialEnd();
 
   const {
     currentPeriod,
@@ -73,7 +73,8 @@ export const Plan = ({
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
       const isTrialSubscription = billingSubscription?.status === "trialing";
-      const willSubscriptionCancel = billingSubscription?.cancelAt;
+      const willSubscriptionCancel =
+        typeof billingSubscription?.cancelAt === "number";
 
       return {
         currentPeriod: data.company?.plan?.planPeriod || "month",
@@ -192,8 +193,10 @@ export const Plan = ({
                 hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF"
               }
             >
-              {isTrialSubscription && !willSubscriptionCancel && trialEndDays
-                ? t("Trial ends in", { days: trialEndDays })
+              {isTrialSubscription &&
+              !willSubscriptionCancel &&
+              typeof trialEnd !== "undefined"
+                ? trialEnd.formatted
                 : t("Active")}
             </Text>
           </Flex>
diff --git a/components/src/components/elements/upcoming-bill/UpcomingBill.tsx b/components/src/components/elements/upcoming-bill/UpcomingBill.tsx
@@ -237,7 +237,7 @@ export const UpcomingBill = forwardRef<
                                         })
                                       : t("Amount off", {
                                           amount: formatCurrency(
-                                            discount.amountOff as number,
+                                            discount.amountOff as number, // we already checked for `number` type
                                             discount?.currency,
                                           ),
                                         })}
diff --git a/components/src/components/layout/viewport/Viewport.tsx b/components/src/components/layout/viewport/Viewport.tsx
@@ -62,11 +62,13 @@ export const Viewport = forwardRef<HTMLDivElement | null, ViewportProps>(
         {canCheckout &&
           layout === "checkout" &&
           createPortal(<CheckoutDialog top={top} />, portal || document.body)}
+
         {layout === "unsubscribe" &&
           createPortal(
             <UnsubscribeDialog top={top} />,
             portal || document.body,
           )}
+
         {layout === "payment" &&
           createPortal(<PaymentDialog top={top} />, portal || document.body)}
       </>
diff --git a/components/src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx b/components/src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { type BillingProductPriceTierResponseData } from "../../../api/checkoutexternal";
+import { TiersMode } from "../../../const";
 import { useEmbed, useIsLightBackground } from "../../../hooks";
 import type { Feature } from "../../../types";
 import { Box, Flex, Icon, Text, Tooltip } from "../../ui";
@@ -103,7 +104,9 @@ export const PricingTiersTooltip = ({
               );
             })}
           </dl>
-          {tiersMode && (
+
+          {(tiersMode === TiersMode.Volume ||
+            tiersMode === TiersMode.Graduated) && (
             <>
               <hr
                 style={{
@@ -115,7 +118,7 @@ export const PricingTiersTooltip = ({
               <Box>
                 <Text>
                   ℹ️{" "}
-                  {tiersMode === "volume"
+                  {tiersMode === TiersMode.Volume
                     ? t("Price by unit based on final tier reached.")
                     : t("Tiers apply progressively as quantity increases.")}
                 </Text>
diff --git a/components/src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx b/components/src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
@@ -100,11 +100,9 @@ export const UnsubscribeDialog = ({ top = 0 }: UnsubscribeDialogProps) => {
               {t(
                 "You will retain access to your plan until the end of the billing period, on",
               )}{" "}
-              {cancelDate
-                ? toPrettyDate(cancelDate, {
-                    month: "numeric",
-                  })
-                : ""}
+              {toPrettyDate(cancelDate, {
+                month: "numeric",
+              })}
             </Text>
           </Flex>
 
diff --git a/components/src/components/ui/progress-bar/ProgressBar.tsx b/components/src/components/ui/progress-bar/ProgressBar.tsx
@@ -66,7 +66,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
           />
         </Box>
 
-        {total && (
+        {total > 0 && (
           <Text $size={14} $weight={500}>
             {formatNumber(value)}/{formatNumber(total)}
           </Text>
diff --git a/components/src/const/api.ts b/components/src/const/api.ts
@@ -5,6 +5,11 @@ export enum PriceBehavior {
   Tiered = "tier",
 }
 
+export enum TiersMode {
+  Volume = "volume",
+  Graduated = "graduated",
+}
+
 export enum EntitlementValueType {
   Boolean = "boolean",
   Numeric = "numeric",
diff --git a/components/src/const/date.ts b/components/src/const/date.ts
@@ -0,0 +1,4 @@
+export const SECONDS_IN_MS = 1000;
+export const MINUTES_IN_MS = SECONDS_IN_MS * 60;
+export const HOURS_IN_MS = MINUTES_IN_MS * 60;
+export const DAYS_IN_MS = HOURS_IN_MS * 24;
diff --git a/components/src/const/index.ts b/components/src/const/index.ts
@@ -1,5 +1,6 @@
 export * from "./api";
 export * from "./components";
+export * from "./date";
 export * from "./debounce";
 export * from "./string";
 export * from "./style";
diff --git a/components/src/hooks/useTrialEnd.ts b/components/src/hooks/useTrialEnd.ts
@@ -1,23 +1,62 @@
-import { isCheckoutData } from "../utils";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  DAYS_IN_MS,
+  HOURS_IN_MS,
+  MINUTES_IN_MS,
+  SECONDS_IN_MS,
+} from "../const";
+import { isCheckoutData, pluralize } from "../utils";
 
 import { useEmbed } from ".";
 
 export function useTrialEnd() {
+  const { t } = useTranslation();
+
   const { data } = useEmbed();
 
-  const billingSubscription = isCheckoutData(data)
-    ? data.company?.billingSubscription
-    : undefined;
-  const trialEndDate =
-    typeof billingSubscription?.trialEnd === "number"
-      ? new Date(billingSubscription.trialEnd * 1000)
+  const { endDate, formatted } = useMemo(() => {
+    const billingSubscription = isCheckoutData(data)
+      ? data.company?.billingSubscription
       : undefined;
-  if (trialEndDate) {
-    const todayDate = new Date();
-    const trialEndDays = Math.floor(
-      (trialEndDate.getTime() - todayDate.getTime()) / (1000 * 60 * 60 * 24),
-    );
-
-    return trialEndDays;
-  }
+
+    const end =
+      typeof billingSubscription?.trialEnd === "number"
+        ? new Date(billingSubscription.trialEnd * 1000)
+        : undefined;
+
+    let formatted: string | undefined;
+
+    if (end) {
+      const today = new Date();
+      const difference = end.getTime() - today.getTime();
+
+      let amount: number | undefined;
+      let unit: string | undefined;
+
+      if (difference >= DAYS_IN_MS) {
+        amount = Math.floor(difference / DAYS_IN_MS);
+        unit = "day";
+      } else if (difference >= HOURS_IN_MS) {
+        amount = Math.floor(difference / HOURS_IN_MS);
+        unit = "hour";
+      } else if (difference >= MINUTES_IN_MS) {
+        amount = Math.floor(difference / MINUTES_IN_MS);
+        unit = "minute";
+      } else {
+        amount = Math.floor(difference / SECONDS_IN_MS);
+        unit = "second";
+      }
+
+      formatted = t("Trial ends in", {
+        amount,
+        units: pluralize(unit, amount),
+      });
+    }
+
+    return { endDate: end, formatted };
+  }, [t, data]);
+
+  return { endDate, formatted };
 }
diff --git a/components/src/localization/en.json b/components/src/localization/en.json
@@ -103,7 +103,7 @@
     "There was a problem retrieving your invoices.": "There was a problem retrieving your invoices.",
     "Tiers apply progressively as quantity increases.": "Tiers apply progressively as quantity increases.",
     "Total": "Total",
-    "Trial ends in": "Trial ends in {{days}} days",
+    "Trial ends in": "Trial ends in {{amount}} {{units}}",
     "Trial in progress": "Trial in progress",
     "Trial selected": "Trial selected",
     "Trial": "Trial",

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export const AddOn = ({ addOn, currency, layout }: AddOnProps) => {`
`25`	`25`	`>`
`26`	`26`	`<Text display={layout.addOns.fontStyle}>{addOn.name}</Text>`
`27`	`27`
`28`		`- {addOn.planPrice && addOn.planPeriod && (`
	`28`	`+ {typeof addOn.planPrice === "number" && addOn.planPeriod && (`
`29`	`29`	`<Text>`
`30`	`30`	`{formatCurrency(addOn.planPrice, currency)}`
`31`	`31`	`<sub>`