@stigg/react-sdk 4.4.1 → 4.4.3

package/dist/stories/mocks/checkout/mockCheckoutState.d.ts

@@ -1,2 +1,2 @@
-import { GetCheckoutState, GetCheckoutStateResults } from '../../../../../js-client-sdk';
+import { GetCheckoutState, GetCheckoutStateResults } from '@stigg/js-client-sdk';
 export declare function mockCheckoutState(params: GetCheckoutState): GetCheckoutStateResults;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.1",
+  "version": "4.4.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -23,7 +23,11 @@ type StripeManualMode = { mode: 'setup' | 'payment' | 'subscription'; currency:
 
 const getStepProps = (
   currentStep: CheckoutStep,
-  { onBillingAddressChange, onChangePlan }: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'onChangePlan'>,
+  {
+    onBillingAddressChange,
+    onChangePlan,
+    collectPhoneNumber,
+  }: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'onChangePlan' | 'collectPhoneNumber'>,
 ): StepProps => {
   switch (currentStep.key) {
     case CheckoutStepKey.PLAN:
@@ -31,7 +35,11 @@ const getStepProps = (
     case CheckoutStepKey.ADDONS:
       return { content: <CheckoutAddonsStep /> };
     case CheckoutStepKey.PAYMENT:
-      return { content: <PaymentStep onBillingAddressChange={onBillingAddressChange} /> };
+      return {
+        content: (
+          <PaymentStep onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
+        ),
+      };
     default:
       return { content: null };
   }
@@ -50,6 +58,7 @@ export type CheckoutContainerProps = {
   onBillingAddressChange?: (params: { billingAddress: BillingAddress }) => Promise<void>;
   disablePromotionCode?: boolean;
   disableSuccessAnimation?: boolean;
+  collectPhoneNumber?: boolean;
   onMockCheckoutPreview?: MockCheckoutPreviewCallback;
 };
 
@@ -58,6 +67,7 @@ export function CheckoutContainer({
   onCheckoutCompleted,
   onChangePlan,
   onBillingAddressChange,
+  collectPhoneNumber,
   disablePromotionCode,
   disableSuccessAnimation,
   onMockCheckoutPreview,
@@ -76,16 +86,16 @@ export function CheckoutContainer({
     !!activeSubscription &&
     activeSubscription.pricingType !== PricingType.Free;
 
-  const { content } = getStepProps(currentStep, { onBillingAddressChange, onChangePlan });
+  const { content } = getStepProps(currentStep, { onBillingAddressChange, onChangePlan, collectPhoneNumber });
 
   const checkoutContent = (
     <>
       {isFreeDowngrade ? (
         <DowngradeToFreePlan
-          checkoutLocalization={checkoutLocalization}
           freePlan={plan!}
           activeSubscription={activeSubscription!}
           allowChangePlan
+          checkoutLocalization={checkoutLocalization}
           onChangePlan={onChangePlan}
         />
       ) : (

package/src/components/checkout/index.ts

@@ -1,5 +1,11 @@
 export { CheckoutTheme } from './theme';
-export { Checkout, CheckoutProps } from './Checkout';
-export { OnCheckoutCompletedParams, OnCheckoutParams, CheckoutResult } from './CheckoutContainer';
+export {
+  OnCheckoutCompletedParams,
+  OnCheckoutParams,
+  CheckoutResult,
+  CheckoutContainerProps,
+} from './CheckoutContainer';
+export { CheckoutProviderProps } from './CheckoutProvider';
 export { CheckoutLocalization } from './textOverrides';
+export { Checkout, CheckoutProps } from './Checkout';
 export * from './types';

package/src/components/checkout/promotionCode/AppliedPromotionCode.tsx

@@ -16,6 +16,18 @@ const AppliedCouponContainer = styled(Grid)`
   border: 1px solid ${({ theme }) => theme.stigg.palette.primary};
 `;
 
+export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => prop !== 'style' })<{ $shouldFill?: boolean }>`
+  display: flex;
+
+  g {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+
+  path {
+    fill: ${({ theme, $shouldFill }) => ($shouldFill ? theme.stigg.palette.primary : undefined)};
+  }
+`;
+
 export type AppliedPromotionCodeProps = {
   promotionCode: string;
   onClearPromotionCode: () => void;
@@ -24,14 +36,14 @@ export type AppliedPromotionCodeProps = {
 export const AppliedPromotionCode = ({ promotionCode, onClearPromotionCode }: AppliedPromotionCodeProps) => (
   <AppliedCouponContainer container>
     <Grid item display="flex" gap={1} alignItems="center">
-      <Icon icon="Coupon" style={{ display: 'flex' }} />
+      <StyledIcon icon="Coupon" />
       <Typography variant="body1" color="primary.main" lineHeight="auto">
         {promotionCode}
       </Typography>
     </Grid>
     <Grid item>
       <Button variant="text" sx={{ minWidth: 'unset', padding: 0 }} onClick={onClearPromotionCode}>
-        <Icon icon="Close" style={{ display: 'flex' }} />
+        <StyledIcon icon="Close" $shouldFill />
       </Button>
     </Grid>
   </AppliedCouponContainer>

package/src/components/checkout/steps/payment/PaymentMethods.tsx

@@ -29,7 +29,7 @@ export type PaymentMethodProps = Pick<Customer, 'paymentMethodDetails'> &
 export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & {
   onSelect: () => void;
   checkoutLocalization: CheckoutLocalization;
-} & Pick<CheckoutContainerProps, 'onBillingAddressChange'>;
+} & Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>;
 
 function PaymentMethodLayout({ checked, icon, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
   return (
@@ -76,6 +76,7 @@ export function NewPaymentMethod({
   readOnly,
   checkoutLocalization,
   onBillingAddressChange,
+  collectPhoneNumber,
 }: NewPaymentMethodProps) {
   return (
     <NewPaymentMethodContainer item onClick={onSelect} $disabled={readOnly}>
@@ -86,7 +87,7 @@ export function NewPaymentMethod({
         text={<Typography variant="h6">{checkoutLocalization.newPaymentMethodText}</Typography>}
       />
       <Collapse in={checked}>
-        <StripePaymentForm onBillingAddressChange={onBillingAddressChange} />
+        <StripePaymentForm onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
       </Collapse>
     </NewPaymentMethodContainer>
   );

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -12,7 +12,10 @@ const PaymentContainer = styled(Grid)`
   gap: 24px;
 `;
 
-export function PaymentStep({ onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>) {
+export function PaymentStep({
+  onBillingAddressChange,
+  collectPhoneNumber,
+}: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>) {
   const { checkoutState, checkoutLocalization, widgetState } = useCheckoutModel();
   const { customer } = checkoutState || {};
   const { errorMessage, useNewPaymentMethod, setUseNewPaymentMethod } = usePaymentStepModel();
@@ -45,6 +48,7 @@ export function PaymentStep({ onBillingAddressChange }: Pick<CheckoutContainerPr
         checkoutLocalization={checkoutLocalization}
         onSelect={() => handleOnSelect(true)}
         onBillingAddressChange={onBillingAddressChange}
+        collectPhoneNumber={collectPhoneNumber}
       />
     </PaymentContainer>
   );

package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx

@@ -7,11 +7,15 @@ import { Typography } from '../../../../common/Typography';
 import { useCheckoutModel, usePaymentStepModel } from '../../../hooks';
 import { CheckoutContainerProps } from '../../../CheckoutContainer';
 
-export function StripePaymentForm({ onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>) {
+export function StripePaymentForm({
+  onBillingAddressChange,
+  collectPhoneNumber,
+}: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>) {
   const { checkoutState, checkoutLocalization, widgetState, setWidgetReadOnly } = useCheckoutModel();
   const { setBillingAddress } = usePaymentStepModel();
   const { customer, configuration } = checkoutState || {};
   const { readOnly } = widgetState;
+  const shouldCollectPhoneNumber = !!(collectPhoneNumber ?? configuration?.content?.collectPhoneNumber);
 
   const handleAddressChange = (args: StripeAddressElementChangeEvent) => {
     if (!args.complete) {
@@ -47,7 +51,7 @@ export function StripePaymentForm({ onBillingAddressChange }: Pick<CheckoutConta
           onChange={handleAddressChange}
           options={{
             mode: 'billing',
-            fields: { phone: configuration?.content?.collectPhoneNumber ? 'always' : 'auto' },
+            fields: { phone: shouldCollectPhoneNumber ? 'always' : 'auto' },
             defaultValues: {
               ...(customer?.name && { name: customer.name }),
             },

package/src/index.ts

@@ -1,4 +1,5 @@
 import './styles.css';
+
 export * from '@stigg/js-client-sdk';
 export {
   Paywall,
@@ -29,7 +30,22 @@ export {
   StiggContextValue,
   StiggContext,
 } from './components/StiggProvider';
-export { Checkout, CheckoutProps, CheckoutTheme } from './components/checkout';
+export {
+  Checkout,
+  CheckoutProps,
+  CheckoutProviderProps,
+  CheckoutContainerProps,
+  CheckoutLocalization,
+  CheckoutResult,
+  OnCheckoutCompletedParams,
+  OnCheckoutParams,
+  CheckoutTheme,
+  CheckoutMockProps,
+  MockCheckoutPreviewCallback,
+  MockCheckoutStateCallback,
+  BillingInformation,
+  TaxDetailsInput,
+} from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
 export { HorizontalAlignment, TextAlignment } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';

package/src/stories/mocks/checkout/mockCheckoutState.ts

@@ -16,7 +16,7 @@ import {
   PromotionalEntitlement,
   Subscription,
   Addon,
-} from '../../../../../js-client-sdk';
+} from '@stigg/js-client-sdk';
 import {
   BASE_FEE_MONTHLY,
   TIERS_PRICE_MONTHLY,