fix column/viewport behavior (#66)

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

@@ -32,6 +32,7 @@ models/FeatureUsageDetailResponseData.ts
 models/FeatureUsageResponseData.ts
 models/FlagDetailResponseData.ts
 models/FlagResponseData.ts
+models/GetSetupIntentResponse.ts
 models/HydrateComponentResponse.ts
 models/InvoiceResponseData.ts
 models/PaymentMethodResponseData.ts
@@ -49,6 +50,7 @@ models/RuleConditionResourceResponseData.ts
 models/RuleConditionResponseData.ts
 models/RuleDetailResponseData.ts
 models/RuleResponseData.ts
+models/SetupIntentResponseData.ts
 models/StripeEmbedInfo.ts
 models/index.ts
 runtime.ts

react/src/api/apis/CheckoutApi.ts

@@ -17,6 +17,7 @@ import type {
   ApiError,
   ChangeSubscriptionRequestBody,
   CheckoutResponse,
+  GetSetupIntentResponse,
   HydrateComponentResponse,
   PreviewCheckoutResponse,
 } from "../models/index";
@@ -27,6 +28,8 @@ import {
   ChangeSubscriptionRequestBodyToJSON,
   CheckoutResponseFromJSON,
   CheckoutResponseToJSON,
+  GetSetupIntentResponseFromJSON,
+  GetSetupIntentResponseToJSON,
   HydrateComponentResponseFromJSON,
   HydrateComponentResponseToJSON,
   PreviewCheckoutResponseFromJSON,
@@ -37,6 +40,10 @@ export interface CheckoutRequest {
   changeSubscriptionRequestBody: ChangeSubscriptionRequestBody;
 }
 
+export interface GetSetupIntentRequest {
+  componentId: string;
+}
+
 export interface HydrateComponentRequest {
   componentId: string;
 }
@@ -104,6 +111,62 @@ export class CheckoutApi extends runtime.BaseAPI {
     return await response.value();
   }
 
+  /**
+   * Get setup intent
+   */
+  async getSetupIntentRaw(
+    requestParameters: GetSetupIntentRequest,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<GetSetupIntentResponse>> {
+    if (requestParameters["componentId"] == null) {
+      throw new runtime.RequiredError(
+        "componentId",
+        'Required parameter "componentId" was null or undefined when calling getSetupIntent().',
+      );
+    }
+
+    const queryParameters: any = {};
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    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: `/components/{component_id}/setup-intent`.replace(
+          `{${"component_id"}}`,
+          encodeURIComponent(String(requestParameters["componentId"])),
+        ),
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters,
+      },
+      initOverrides,
+    );
+
+    return new runtime.JSONApiResponse(response, (jsonValue) =>
+      GetSetupIntentResponseFromJSON(jsonValue),
+    );
+  }
+
+  /**
+   * Get setup intent
+   */
+  async getSetupIntent(
+    requestParameters: GetSetupIntentRequest,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<GetSetupIntentResponse> {
+    const response = await this.getSetupIntentRaw(
+      requestParameters,
+      initOverrides,
+    );
+    return await response.value();
+  }
+
   /**
    * Hydrate component
    */

react/src/api/models/GetSetupIntentResponse.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 { SetupIntentResponseData } from "./SetupIntentResponseData";
+import {
+  SetupIntentResponseDataFromJSON,
+  SetupIntentResponseDataFromJSONTyped,
+  SetupIntentResponseDataToJSON,
+} from "./SetupIntentResponseData";
+
+/**
+ *
+ * @export
+ * @interface GetSetupIntentResponse
+ */
+export interface GetSetupIntentResponse {
+  /**
+   *
+   * @type {SetupIntentResponseData}
+   * @memberof GetSetupIntentResponse
+   */
+  data: SetupIntentResponseData;
+  /**
+   * Input parameters
+   * @type {object}
+   * @memberof GetSetupIntentResponse
+   */
+  params: object;
+}
+
+/**
+ * Check if a given object implements the GetSetupIntentResponse interface.
+ */
+export function instanceOfGetSetupIntentResponse(
+  value: object,
+): value is GetSetupIntentResponse {
+  if (!("data" in value) || value["data"] === undefined) return false;
+  if (!("params" in value) || value["params"] === undefined) return false;
+  return true;
+}
+
+export function GetSetupIntentResponseFromJSON(
+  json: any,
+): GetSetupIntentResponse {
+  return GetSetupIntentResponseFromJSONTyped(json, false);
+}
+
+export function GetSetupIntentResponseFromJSONTyped(
+  json: any,
+  ignoreDiscriminator: boolean,
+): GetSetupIntentResponse {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: SetupIntentResponseDataFromJSON(json["data"]),
+    params: json["params"],
+  };
+}
+
+export function GetSetupIntentResponseToJSON(
+  value?: GetSetupIntentResponse | null,
+): any {
+  if (value == null) {
+    return value;
+  }
+  return {
+    data: SetupIntentResponseDataToJSON(value["data"]),
+    params: value["params"],
+  };
+}

react/src/api/models/SetupIntentResponseData.ts

@@ -0,0 +1,79 @@
+/* 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 returned resource
+ * @export
+ * @interface SetupIntentResponseData
+ */
+export interface SetupIntentResponseData {
+  /**
+   *
+   * @type {string}
+   * @memberof SetupIntentResponseData
+   */
+  publishableKey: string;
+  /**
+   *
+   * @type {string}
+   * @memberof SetupIntentResponseData
+   */
+  setupIntentClientSecret?: string | null;
+}
+
+/**
+ * Check if a given object implements the SetupIntentResponseData interface.
+ */
+export function instanceOfSetupIntentResponseData(
+  value: object,
+): value is SetupIntentResponseData {
+  if (!("publishableKey" in value) || value["publishableKey"] === undefined)
+    return false;
+  return true;
+}
+
+export function SetupIntentResponseDataFromJSON(
+  json: any,
+): SetupIntentResponseData {
+  return SetupIntentResponseDataFromJSONTyped(json, false);
+}
+
+export function SetupIntentResponseDataFromJSONTyped(
+  json: any,
+  ignoreDiscriminator: boolean,
+): SetupIntentResponseData {
+  if (json == null) {
+    return json;
+  }
+  return {
+    publishableKey: json["publishable_key"],
+    setupIntentClientSecret:
+      json["setup_intent_client_secret"] == null
+        ? undefined
+        : json["setup_intent_client_secret"],
+  };
+}
+
+export function SetupIntentResponseDataToJSON(
+  value?: SetupIntentResponseData | null,
+): any {
+  if (value == null) {
+    return value;
+  }
+  return {
+    publishable_key: value["publishableKey"],
+    setup_intent_client_secret: value["setupIntentClientSecret"],
+  };
+}

react/src/api/models/StripeEmbedInfo.ts

@@ -19,12 +19,6 @@ import { mapValues } from "../runtime";
  * @interface StripeEmbedInfo
  */
 export interface StripeEmbedInfo {
-  /**
-   *
-   * @type {string}
-   * @memberof StripeEmbedInfo
-   */
-  customerEkey?: string | null;
   /**
    *
    * @type {string}
@@ -62,8 +56,6 @@ export function StripeEmbedInfoFromJSONTyped(
     return json;
   }
   return {
-    customerEkey:
-      json["customer_ekey"] == null ? undefined : json["customer_ekey"],
     publishableKey: json["publishable_key"],
     setupIntentClientSecret:
       json["setup_intent_client_secret"] == null
@@ -77,7 +69,6 @@ export function StripeEmbedInfoToJSON(value?: StripeEmbedInfo | null): any {
     return value;
   }
   return {
-    customer_ekey: value["customerEkey"],
     publishable_key: value["publishableKey"],
     setup_intent_client_secret: value["setupIntentClientSecret"],
   };

react/src/api/models/index.ts

@@ -30,6 +30,7 @@ export * from "./FeatureUsageDetailResponseData";
 export * from "./FeatureUsageResponseData";
 export * from "./FlagDetailResponseData";
 export * from "./FlagResponseData";
+export * from "./GetSetupIntentResponse";
 export * from "./HydrateComponentResponse";
 export * from "./InvoiceResponseData";
 export * from "./PaymentMethodResponseData";
@@ -47,4 +48,5 @@ export * from "./RuleConditionResourceResponseData";
 export * from "./RuleConditionResponseData";
 export * from "./RuleDetailResponseData";
 export * from "./RuleResponseData";
+export * from "./SetupIntentResponseData";
 export * from "./StripeEmbedInfo";

react/src/components/layout/column/styles.ts

@@ -2,4 +2,6 @@ import styled from "styled-components";
 
 export const StyledColumn = styled.div`
   flex-grow: 1;
+  flex-basis: ${({ theme }) =>
+    `calc(${100 / theme.numberOfColumns}% - ${(theme.numberOfColumns - 1) / theme.numberOfColumns}rem)`};
 `;

react/src/components/layout/viewport/styles.ts

@@ -5,6 +5,7 @@ export const StyledViewport = styled.div<{
 }>`
   display: flex;
   flex-wrap: wrap;
+  place-content: start;
   margin-left: auto;
   margin-right: auto;
   gap: 1rem;