feat(payment): create Stripe utils package

packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx

@@ -5,7 +5,6 @@ import {
     type Country,
     type ShippingInitializeOptions,
     type ShippingRequestOptions,
-    type StripeShippingEvent
 } from '@bigcommerce/checkout-sdk';
 import { memoizeOne } from '@bigcommerce/memoize';
 import React, { type FunctionComponent, memo, useCallback, useEffect, useState } from 'react';
@@ -17,6 +16,7 @@ import getRecommendedShippingOption from '../getRecommendedShippingOption';
 import hasSelectedShippingOptions from '../hasSelectedShippingOptions';
 import { type SingleShippingFormValues } from '../SingleShippingForm';
 
+import { type StripeShippingEvent } from './stripe-types';
 import StripeShippingAddressDisplay from './StripeShippingAddressDisplay';
 import StripeStateMapper from './StripeStateMapper';
 

packages/core/src/app/shipping/stripeUPE/stripe-types.ts

@@ -0,0 +1,33 @@
+interface StripeEvent {
+    complete: boolean;
+    elementType: string;
+    empty: boolean;
+}
+
+interface StripeAddress {
+    city: string;
+    country: string;
+    line1: string;
+    line2?: string;
+    postal_code: string;
+    state: string;
+}
+
+export interface StripeShippingEvent extends StripeEvent {
+    mode?: string;
+    isNewAddress?: boolean;
+    phoneFieldRequired: boolean;
+    value: {
+        address: StripeAddress;
+        name?: string;
+        firstName?: string;
+        lastName?: string;
+        phone?: string;
+    };
+    fields?: {
+        phone: string;
+    };
+    display?: {
+        name: string;
+    };
+}

packages/stripe-integration/src/index.ts

@@ -2,3 +2,4 @@ export { default as StripeOCSPaymentMethod } from './stripe-ocs/StripeOCSPayment
 export { default as StripeUPEPaymentMethod } from './stripe-upe/StripeUPEPaymentMethod';
 export { default as StripeV3PaymentMethod } from './stripev3/StripeV3PaymentMethod';
 export { default as StripeLinkV2Button } from './stripe-ocs/StripeLinkV2Button';
+export * from './stripe-types';

packages/stripe-integration/src/stripe-ocs/getStripeOCSStyles.ts

@@ -1,8 +1,9 @@
-import { type StripeAppearanceOptions, type StripeCustomFont } from '@bigcommerce/checkout-sdk';
 import { isEmpty } from 'lodash';
 
 import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils';
 
+import type { StripeAppearanceOptions, StripeCustomFont } from '../stripe-types';
+
 const getStylesFromElement = (
     selector: string,
     properties: string[],

packages/stripe-integration/src/stripe-types.ts

@@ -0,0 +1,57 @@
+type StripeAppearanceValues = string | string[] | number | undefined;
+
+export interface StripeAppearanceOptions {
+    variables?: Record<string, StripeAppearanceValues>;
+
+    rules?: Record<string, Record<string, StripeAppearanceValues>>;
+}
+
+interface CssFontSource {
+    cssSrc: string;
+}
+
+interface CustomFontSource {
+    family: string;
+    src: string;
+    display?: string;
+    style?: string;
+    unicodeRange?: string;
+    weight?: string;
+}
+
+export type StripeCustomFont = CssFontSource | CustomFontSource;
+
+interface StripeEvent {
+    complete: boolean;
+    elementType: string;
+    empty: boolean;
+}
+
+interface StripeAddress {
+    city: string;
+    country: string;
+    line1: string;
+    line2?: string;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    postal_code: string;
+    state: string;
+}
+
+export interface StripeShippingEvent extends StripeEvent {
+    mode?: string;
+    isNewAddress?: boolean;
+    phoneFieldRequired: boolean;
+    value: {
+        address: StripeAddress;
+        name?: string;
+        firstName?: string;
+        lastName?: string;
+        phone?: string;
+    };
+    fields?: {
+        phone: string;
+    };
+    display?: {
+        name: string;
+    };
+}