cole/fixins (#65)

* temp

* add change plan logic; sort available plans

* add charges

* add gap

react/src/api/.openapi-generator/FILES

@@ -39,7 +39,9 @@ models/PlanDetailResponseData.ts
 models/PlanEntitlementResponseData.ts
 models/PlanGroupPlanDetailResponseData.ts
 models/PlanResponseData.ts
+models/PreviewCheckoutResponse.ts
 models/PreviewObject.ts
+models/PreviewSubscriptionChangeResponseData.ts
 models/RuleConditionDetailResponseData.ts
 models/RuleConditionGroupDetailResponseData.ts
 models/RuleConditionGroupResponseData.ts

react/src/api/apis/CheckoutApi.ts

@@ -18,6 +18,7 @@ import type {
   ChangeSubscriptionRequestBody,
   CheckoutResponse,
   HydrateComponentResponse,
+  PreviewCheckoutResponse,
 } from "../models/index";
 import {
   ApiErrorFromJSON,
@@ -28,6 +29,8 @@ import {
   CheckoutResponseToJSON,
   HydrateComponentResponseFromJSON,
   HydrateComponentResponseToJSON,
+  PreviewCheckoutResponseFromJSON,
+  PreviewCheckoutResponseToJSON,
 } from "../models/index";
 
 export interface CheckoutRequest {
@@ -38,6 +41,10 @@ export interface HydrateComponentRequest {
   componentId: string;
 }
 
+export interface PreviewCheckoutRequest {
+  changeSubscriptionRequestBody: ChangeSubscriptionRequestBody;
+}
+
 /**
  *
  */
@@ -152,4 +159,62 @@ export class CheckoutApi extends runtime.BaseAPI {
     );
     return await response.value();
   }
+
+  /**
+   * Preview checkout
+   */
+  async previewCheckoutRaw(
+    requestParameters: PreviewCheckoutRequest,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<PreviewCheckoutResponse>> {
+    if (requestParameters["changeSubscriptionRequestBody"] == null) {
+      throw new runtime.RequiredError(
+        "changeSubscriptionRequestBody",
+        'Required parameter "changeSubscriptionRequestBody" was null or undefined when calling previewCheckout().',
+      );
+    }
+
+    const queryParameters: any = {};
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    headerParameters["Content-Type"] = "application/json";
+
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key",
+      ); // ApiKeyAuth authentication
+    }
+
+    const response = await this.request(
+      {
+        path: `/checkout/preview`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters,
+        body: ChangeSubscriptionRequestBodyToJSON(
+          requestParameters["changeSubscriptionRequestBody"],
+        ),
+      },
+      initOverrides,
+    );
+
+    return new runtime.JSONApiResponse(response, (jsonValue) =>
+      PreviewCheckoutResponseFromJSON(jsonValue),
+    );
+  }
+
+  /**
+   * Preview checkout
+   */
+  async previewCheckout(
+    requestParameters: PreviewCheckoutRequest,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<PreviewCheckoutResponse> {
+    const response = await this.previewCheckoutRaw(
+      requestParameters,
+      initOverrides,
+    );
+    return await response.value();
+  }
 }

react/src/api/models/PreviewCheckoutResponse.ts

@@ -0,0 +1,83 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Schematic API
+ * Schematic API
+ *
+ * The version of the OpenAPI document: 0.1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from "../runtime";
+import type { PreviewSubscriptionChangeResponseData } from "./PreviewSubscriptionChangeResponseData";
+import {
+  PreviewSubscriptionChangeResponseDataFromJSON,
+  PreviewSubscriptionChangeResponseDataFromJSONTyped,
+  PreviewSubscriptionChangeResponseDataToJSON,
+} from "./PreviewSubscriptionChangeResponseData";
+
+/**
+ *
+ * @export
+ * @interface PreviewCheckoutResponse
+ */
+export interface PreviewCheckoutResponse {
+  /**
+   *
+   * @type {PreviewSubscriptionChangeResponseData}
+   * @memberof PreviewCheckoutResponse
+   */
+  data: PreviewSubscriptionChangeResponseData;
+  /**
+   * Input parameters
+   * @type {object}
+   * @memberof PreviewCheckoutResponse
+   */
+  params: object;
+}
+
+/**
+ * Check if a given object implements the PreviewCheckoutResponse interface.
+ */
+export function instanceOfPreviewCheckoutResponse(
+  value: object,
+): value is PreviewCheckoutResponse {
+  if (!("data" in value) || value["data"] === undefined) return false;
+  if (!("params" in value) || value["params"] === undefined) return false;
+  return true;
+}
+
+export function PreviewCheckoutResponseFromJSON(
+  json: any,
+): PreviewCheckoutResponse {
+  return PreviewCheckoutResponseFromJSONTyped(json, false);
+}
+
+export function PreviewCheckoutResponseFromJSONTyped(
+  json: any,
+  ignoreDiscriminator: boolean,
+): PreviewCheckoutResponse {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: PreviewSubscriptionChangeResponseDataFromJSON(json["data"]),
+    params: json["params"],
+  };
+}
+
+export function PreviewCheckoutResponseToJSON(
+  value?: PreviewCheckoutResponse | null,
+): any {
+  if (value == null) {
+    return value;
+  }
+  return {
+    data: PreviewSubscriptionChangeResponseDataToJSON(value["data"]),
+    params: value["params"],
+  };
+}

react/src/api/models/PreviewSubscriptionChangeResponseData.ts

@@ -0,0 +1,86 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Schematic API
+ * Schematic API
+ *
+ * The version of the OpenAPI document: 0.1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { mapValues } from "../runtime";
+/**
+ * The created resource
+ * @export
+ * @interface PreviewSubscriptionChangeResponseData
+ */
+export interface PreviewSubscriptionChangeResponseData {
+  /**
+   *
+   * @type {number}
+   * @memberof PreviewSubscriptionChangeResponseData
+   */
+  dueNow: number;
+  /**
+   *
+   * @type {number}
+   * @memberof PreviewSubscriptionChangeResponseData
+   */
+  newCharges: number;
+  /**
+   *
+   * @type {number}
+   * @memberof PreviewSubscriptionChangeResponseData
+   */
+  proration: number;
+}
+
+/**
+ * Check if a given object implements the PreviewSubscriptionChangeResponseData interface.
+ */
+export function instanceOfPreviewSubscriptionChangeResponseData(
+  value: object,
+): value is PreviewSubscriptionChangeResponseData {
+  if (!("dueNow" in value) || value["dueNow"] === undefined) return false;
+  if (!("newCharges" in value) || value["newCharges"] === undefined)
+    return false;
+  if (!("proration" in value) || value["proration"] === undefined) return false;
+  return true;
+}
+
+export function PreviewSubscriptionChangeResponseDataFromJSON(
+  json: any,
+): PreviewSubscriptionChangeResponseData {
+  return PreviewSubscriptionChangeResponseDataFromJSONTyped(json, false);
+}
+
+export function PreviewSubscriptionChangeResponseDataFromJSONTyped(
+  json: any,
+  ignoreDiscriminator: boolean,
+): PreviewSubscriptionChangeResponseData {
+  if (json == null) {
+    return json;
+  }
+  return {
+    dueNow: json["due_now"],
+    newCharges: json["new_charges"],
+    proration: json["proration"],
+  };
+}
+
+export function PreviewSubscriptionChangeResponseDataToJSON(
+  value?: PreviewSubscriptionChangeResponseData | null,
+): any {
+  if (value == null) {
+    return value;
+  }
+  return {
+    due_now: value["dueNow"],
+    new_charges: value["newCharges"],
+    proration: value["proration"],
+  };
+}

react/src/api/models/index.ts

@@ -37,7 +37,9 @@ export * from "./PlanDetailResponseData";
 export * from "./PlanEntitlementResponseData";
 export * from "./PlanGroupPlanDetailResponseData";
 export * from "./PlanResponseData";
+export * from "./PreviewCheckoutResponse";
 export * from "./PreviewObject";
+export * from "./PreviewSubscriptionChangeResponseData";
 export * from "./RuleConditionDetailResponseData";
 export * from "./RuleConditionGroupDetailResponseData";
 export * from "./RuleConditionGroupResponseData";

react/src/components/elements/included-features/IncludedFeatures.tsx

@@ -1,10 +1,10 @@
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useLayoutEffect, useMemo, useRef } from "react";
 import { useTheme } from "styled-components";
 import pluralize from "pluralize";
 import { useEmbed } from "../../../hooks";
 import { type FontStyle } from "../../../context";
 import type { RecursivePartial, ElementProps } from "../../../types";
-import { hexToHSL } from "../../../utils";
+import { hexToHSL, formatNumber } from "../../../utils";
 import { Box, Flex, IconRound, Text, type IconNameTypes } from "../../ui";
 
 interface DesignProps {
@@ -64,6 +64,8 @@ export const IncludedFeatures = forwardRef<
   const theme = useTheme();
   const { data } = useEmbed();
 
+  const elements = useRef<HTMLElement[]>([]);
+
   const features = useMemo(() => {
     return (data.featureUsage?.features || []).map(
       ({
@@ -96,6 +98,43 @@ export const IncludedFeatures = forwardRef<
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
 
+  useLayoutEffect(() => {
+    const assignRows = (parent: Element) => {
+      let isWrapped = true;
+      [...parent.children].forEach((el) => {
+        if (!(el instanceof HTMLElement)) {
+          return;
+        }
+
+        if (
+          !el.previousElementSibling ||
+          el.offsetLeft <= (el.previousElementSibling as HTMLElement).offsetLeft
+        ) {
+          isWrapped = !isWrapped;
+        }
+
+        if (isWrapped) {
+          el.style.textAlign = "left";
+        } else if (el.previousElementSibling) {
+          el.style.textAlign = "right";
+        }
+      });
+    };
+
+    elements.current.forEach((el) => {
+      if (!el) return;
+
+      const observer = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          assignRows(entry.target);
+        });
+      });
+
+      observer.observe(el);
+      assignRows(el);
+    });
+  }, [elements.current.length]);
+
   return (
     <Flex ref={ref} className={className} $flexDirection="column" $gap="1.5rem">
       {props.header.isVisible && (
@@ -125,6 +164,7 @@ export const IncludedFeatures = forwardRef<
             ...acc,
             <Flex
               key={index}
+              ref={(el) => elements.current.push(el!)}
               $flexWrap="wrap"
               $justifyContent="space-between"
               $alignItems="center"
@@ -161,7 +201,7 @@ export const IncludedFeatures = forwardRef<
               </Flex>
 
               {allocationType === "numeric" && feature?.name && (
-                <Box $textAlign="right">
+                <Box $textAlign="right" $paddingLeft="3.5rem">
                   {props.entitlement.isVisible && (
                     <Text
                       as={Box}
@@ -180,7 +220,7 @@ export const IncludedFeatures = forwardRef<
                       }
                     >
                       {typeof allocation === "number"
-                        ? pluralize(feature.name, allocation, true)
+                        ? `${formatNumber(allocation)} ${pluralize(feature.name, allocation)}`
                         : `Unlimited ${pluralize(feature.name)}`}
                     </Text>
                   )}
@@ -196,9 +236,13 @@ export const IncludedFeatures = forwardRef<
                       $lineHeight={1.5}
                       $color={theme.typography[props.usage.fontStyle].color}
                     >
-                      {typeof allocation === "number"
-                        ? `${usage} of ${allocation} used`
-                        : `${usage} used`}
+                      {typeof usage === "number" && (
+                        <>
+                          {typeof allocation === "number"
+                            ? `${formatNumber(usage)} of ${formatNumber(allocation)} used`
+                            : `${formatNumber(usage)} used`}
+                        </>
+                      )}
                     </Text>
                   )}
                 </Box>