@stigg/react-sdk 4.4.0 → 4.4.2

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.0",
+  "version": "4.4.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import { PricingType, BillingAddress, ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
@@ -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}
         />
       ) : (
@@ -94,9 +104,10 @@ export function CheckoutContainer({
     </>
   );
 
-  const stripeElementsMode: StripeClientSecret | StripeManualMode = setupIntentClientSecret
-    ? { clientSecret: setupIntentClientSecret }
-    : { mode: 'setup', currency: 'usd' };
+  const stripeElementsMode: StripeClientSecret | StripeManualMode = useMemo(
+    () => (setupIntentClientSecret ? { clientSecret: setupIntentClientSecret } : { mode: 'setup', currency: 'usd' }),
+    [setupIntentClientSecret],
+  );
 
   return (
     <Elements

package/src/components/checkout/components/InputField.tsx

@@ -19,4 +19,7 @@ export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => (
     color: theme.stigg.palette.text.primary,
     ...theme.stigg.typography.body,
   },
+  '& .Mui-error': {
+    fontFamily: theme.stigg.typography.fontFamily,
+  },
 }));

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/progressBar/CheckoutProgressBar.style.ts

@@ -25,11 +25,10 @@ export const StyledStepButton = styled(Button)(() => ({
 
 export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
   $disabled?: boolean;
-  $shouldStroke?: boolean;
   $shouldFill?: boolean;
-}>(({ theme, $disabled, $shouldStroke = true, $shouldFill }) => ({
+}>(({ theme, $disabled, $shouldFill }) => ({
   circle: {
-    stroke: $shouldStroke ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
+    stroke: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
     fill: $shouldFill ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
   },
 }));

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -37,7 +37,6 @@ export const CheckoutProgressBar = () => {
                         <StyledIcon
                           icon={isCompleted ? checkedIcon : 'OutlinedCircle'}
                           $disabled={isDisabled}
-                          $shouldStroke={(isCompleted && !isDisabled) || isDisabled}
                           $shouldFill={isCompleted}
                         />
                       }

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/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,