@stigg/react-sdk 4.2.2 → 4.3.0-beta.0

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from '@emotion/styled/macro';
+import { Grid } from '@mui/material';
+import { Icon } from '../../common/Icon';
+import { Typography } from '../../common/Typography';
+import { Button } from '../components';
+
+const AppliedCouponContainer = styled(Grid)`
+  width: auto;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  padding: 6px 16px;
+  border-radius: ${({ theme }) => theme.stigg.border.radius};
+  border: 1px solid ${({ theme }) => theme.stigg.palette.primary};
+`;
+
+export type AppliedPromotionCodeProps = {
+  promotionCode: string;
+  onClearPromotionCode: () => void;
+};
+
+export const AppliedPromotionCode = ({ promotionCode, onClearPromotionCode }: AppliedPromotionCodeProps) => (
+  <AppliedCouponContainer container>
+    <Grid item>
+      <Typography variant="body1" color="primary.main">
+        {promotionCode}
+      </Typography>
+    </Grid>
+    <Grid item>
+      <Button variant="text" sx={{ minWidth: 'unset', padding: 0 }} onClick={onClearPromotionCode}>
+        <Icon icon="Close" style={{ display: 'flex' }} />
+      </Button>
+    </Grid>
+  </AppliedCouponContainer>
+);

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled/macro';
+import { usePromotionCodeModel } from '../hooks/useCouponModel';
+import { AddPromotionCode } from './AddPromotionCode';
+import { AppliedPromotionCode } from './AppliedPromotionCode';
+import { CheckoutLocalization } from '../textOverrides';
+
+const PromotionCodeSectionContainer = styled.div`
+  margin: 16px 0;
+`;
+
+export const PromotionCodeSection = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
+  const { promotionCode, setPromotionCode } = usePromotionCodeModel();
+
+  const onClearPromotionCode = () => {
+    setPromotionCode('');
+  };
+
+  let content: React.ReactNode = null;
+  if (promotionCode) {
+    content = <AppliedPromotionCode promotionCode={promotionCode} onClearPromotionCode={onClearPromotionCode} />;
+  } else {
+    content = <AddPromotionCode checkoutLocalization={checkoutLocalization} />;
+  }
+
+  return <PromotionCodeSectionContainer>{content}</PromotionCodeSectionContainer>;
+};

package/src/components/checkout/promotionCode/index.ts

@@ -0,0 +1 @@
+export * from './PromotionCodeSection';

package/src/components/checkout/steps/addons/CheckoutAddonsStep.style.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled/macro';
+import { Grid } from '@mui/material';
+
+import { Button } from '../../components';
+
+export const CheckoutAddonsContainer = styled(Grid)`
+  width: 100%;
+  margin-top: 32px;
+  gap: 8px;
+`;
+
+export const AddonListItemContainer = styled(Grid)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 80px;
+`;
+
+export const TrashButton = styled(Button)`
+  min-width: unset;
+  width: 41px;
+  height: 41px;
+  padding: 0;
+`;

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import { Grid } from '@mui/material';
+import { Addon, BillingPeriod, SubscriptionAddon } from '@stigg/js-client-sdk';
+
+import { Icon } from '../../../common/Icon';
+import { Typography } from '../../../common/Typography';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { Button, InputField } from '../../components';
+import { useAddonsStepModel } from '../../hooks/useAddonsStepModel';
+import { usePlanStepModel } from '../../hooks/usePlanStepModel';
+import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './CheckoutAddonsStep.style';
+import { CheckoutLocalization } from '../../textOverrides';
+import { useCheckoutModel } from '../../hooks';
+
+type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
+
+type AddonListItemProps = {
+  addon: Addon;
+  addonState?: SubscriptionAddon;
+  initialAddonState?: SubscriptionAddon;
+  billingPeriod: BillingPeriod;
+  setAddon: UseAddonsStepModel['setAddon'];
+  removeAddon: UseAddonsStepModel['removeAddon'];
+  checkoutLocalization: CheckoutLocalization;
+};
+
+function AddonListItem({
+  addon,
+  billingPeriod,
+  addonState,
+  initialAddonState,
+  setAddon,
+  removeAddon,
+  checkoutLocalization,
+}: AddonListItemProps) {
+  const addonPrice = addon.pricePoints.find((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+  const isAdded = !!addonState;
+  const hasChanges =
+    (!!addonState && !!initialAddonState && addonState.quantity !== initialAddonState.quantity) ||
+    (!initialAddonState && !!addonState) ||
+    (!!initialAddonState && !addonState);
+
+  const handleQuantityChange = (quantity?: number) => {
+    setAddon(addon, quantity || 1);
+  };
+
+  const handleUndo = () => {
+    initialAddonState ? setAddon(addon, initialAddonState.quantity) : removeAddon(addon.id);
+  };
+
+  return (
+    <AddonListItemContainer container>
+      <Grid item>
+        <Typography variant="h6" lineHeight="24px">
+          {addon.displayName}
+        </Typography>
+        {!!addonPrice && (
+          <Typography variant="body1" lineHeight="20px" color="secondary">
+            {`${currencyPriceFormatter({
+              amount: addonPrice.amount!,
+              currency: addonPrice.currency,
+            })}/${billingPeriod === BillingPeriod.Annually ? 'year' : 'month'}`}
+          </Typography>
+        )}
+      </Grid>
+      <Grid item>
+        {hasChanges && (
+          <Button variant="text" size="small" sx={{ padding: '8px', minWidth: 'unset' }} onClick={handleUndo}>
+            <Typography color="primary.main" variant="body1">
+              Undo
+            </Typography>
+          </Button>
+        )}
+        {isAdded && (
+          <>
+            <InputField
+              id={`${addon.id}-input`}
+              type="number"
+              sx={{ width: 120, marginX: 2 }}
+              value={addonState?.quantity || 1}
+              onChange={(event) => handleQuantityChange(event?.target?.value ? Number(event?.target?.value) : 1)}
+            />
+            <TrashButton color="error" onClick={() => removeAddon(addon.id)}>
+              <Icon icon="Trash" style={{ display: 'flex' }} />
+            </TrashButton>
+          </>
+        )}
+        {!isAdded && (
+          <Button sx={{ paddingX: '22px', paddingY: '8px' }} onClick={() => handleQuantityChange()}>
+            {checkoutLocalization.addAddonText}
+          </Button>
+        )}
+      </Grid>
+    </AddonListItemContainer>
+  );
+}
+
+export function CheckoutAddonsStep() {
+  const { checkoutLocalization } = useCheckoutModel();
+  const { billingPeriod } = usePlanStepModel();
+  const { initialAddons, addons, availableAddons, setAddon, removeAddon } = useAddonsStepModel();
+
+  return (
+    <CheckoutAddonsContainer container>
+      {availableAddons?.map((addon) => {
+        const addonState = addons.find((x) => x.addon.id === addon.id);
+        const initialAddonState = initialAddons?.find((x) => x.addon.id === addon.id);
+
+        return (
+          <AddonListItem
+            key={addon.id}
+            addon={addon}
+            billingPeriod={billingPeriod}
+            addonState={addonState}
+            initialAddonState={initialAddonState}
+            setAddon={setAddon}
+            removeAddon={removeAddon}
+            checkoutLocalization={checkoutLocalization}
+          />
+        );
+      })}
+    </CheckoutAddonsContainer>
+  );
+}

package/src/components/checkout/steps/addons/addon.utils.ts

@@ -0,0 +1,68 @@
+import sortBy from 'lodash/sortBy';
+import { Addon, BillingPeriod, Currency, SubscriptionAddon } from '@stigg/js-client-sdk';
+
+type filterAddonsBaseProps = {
+  billingPeriod: BillingPeriod;
+  currency: Currency;
+  billingCountryCode?: string;
+};
+
+export const sortAddons = (addons: Addon[]) => {
+  return sortBy(addons, 'displayName');
+};
+
+export const sortSubscriptionAddons = (addons: SubscriptionAddon[]) => {
+  return sortBy(addons, 'addon.displayName');
+};
+
+export function filterAddons({
+  addons,
+  billingPeriod,
+  billingCountryCode,
+  currency,
+}: { addons?: Addon[] } & filterAddonsBaseProps): Addon[] {
+  return (
+    addons
+      ?.filter(addon => filterAddonPricePointsByBillingPeriod(addon, billingPeriod))
+      ?.map(addon => mapAddonPricePointsByBillingCountryCode({ addon, currency, billingCountryCode })) || []
+  );
+}
+
+export function filterSubscriptionAddons({
+  addons,
+  billingPeriod,
+  billingCountryCode,
+  currency,
+}: { addons?: SubscriptionAddon[] } & filterAddonsBaseProps): SubscriptionAddon[] {
+  return (
+    addons
+      ?.filter(addon => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod))
+      ?.map(addon => ({
+        ...addon,
+        addon: mapAddonPricePointsByBillingCountryCode({ addon: addon.addon, currency, billingCountryCode }),
+      })) || []
+  );
+}
+
+function filterAddonPricePointsByBillingPeriod(addon: Addon, billingPeriod: BillingPeriod) {
+  return addon.pricePoints.some(pricePoint => pricePoint.billingPeriod === billingPeriod);
+}
+
+function mapAddonPricePointsByBillingCountryCode({
+  addon,
+  currency,
+  billingCountryCode,
+}: {
+  addon: Addon;
+  currency: Currency;
+  billingCountryCode?: string;
+}) {
+  return {
+    ...addon,
+    pricePoints: addon.pricePoints.filter(
+      pricePoint =>
+        pricePoint.currency === currency &&
+        (billingCountryCode ? pricePoint.billingCountryCode === billingCountryCode : true),
+    ),
+  };
+}

package/src/components/checkout/steps/addons/index.ts

@@ -0,0 +1 @@
+export * from './CheckoutAddonsStep';

package/src/components/checkout/steps/payment/PaymentMethods.style.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { Grid } from '@mui/material';
+
+export const PaymentMethodContainer = styled(Grid)`
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  cursor: pointer;
+`;
+
+export const NewPaymentMethodContainer = styled(PaymentMethodContainer)`
+  flex-direction: column;
+  align-items: unset;
+`;
+
+export const PaymentMethodLayoutContainer = styled(Grid)`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 12px;
+`;
+
+export const PaymentMethodTextContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+`;

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

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { Collapse, Grid, Radio } from '@mui/material';
+import { Customer } from '@stigg/js-client-sdk';
+
+import { Icon, Icons } from '../../../common/Icon';
+import { Typography } from '../../../common/Typography';
+import {
+  NewPaymentMethodContainer,
+  PaymentMethodContainer,
+  PaymentMethodLayoutContainer,
+  PaymentMethodTextContainer,
+} from './PaymentMethods.style';
+import { StripePaymentForm } from './stripe';
+import { CheckoutLocalization } from '../../textOverrides';
+
+export type PaymentMethodLayoutProps = {
+  checked: boolean;
+  icon: Icons;
+  text: React.ReactNode;
+  subtitle?: React.ReactNode;
+};
+
+export type PaymentMethodProps = Pick<Customer, 'paymentMethodDetails'> &
+  Pick<PaymentMethodLayoutProps, 'checked'> & { onSelect: () => void };
+
+export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked'> & {
+  onSelect: () => void;
+  checkoutLocalization: CheckoutLocalization;
+};
+
+function PaymentMethodLayout({ checked, icon, text, subtitle }: PaymentMethodLayoutProps) {
+  return (
+    <PaymentMethodLayoutContainer>
+      <Radio checked={checked} />
+      <Icon icon={icon} style={{ display: 'contents' }} />
+      <PaymentMethodTextContainer container>
+        <Grid item>{text}</Grid>
+        {subtitle && <Grid item>{subtitle}</Grid>}
+      </PaymentMethodTextContainer>
+    </PaymentMethodLayoutContainer>
+  );
+}
+
+export function ExistingPaymentMethod({ checked, paymentMethodDetails, onSelect }: PaymentMethodProps) {
+  if (!paymentMethodDetails) {
+    return null;
+  }
+  const { last4Digits, expirationMonth, expirationYear } = paymentMethodDetails;
+
+  return (
+    <PaymentMethodContainer item onClick={onSelect}>
+      <PaymentMethodLayout
+        checked={checked}
+        icon="PaymentMethod"
+        text={<Typography variant="h6">{`Ending in ${last4Digits}`}</Typography>}
+        subtitle={
+          !!expirationMonth &&
+          !!expirationYear && (
+            <Typography variant="body1">{`Exp. ${expirationMonth
+              .toString()
+              .padStart(2, '0')}/${expirationYear}`}</Typography>
+          )
+        }
+      />
+    </PaymentMethodContainer>
+  );
+}
+
+export function NewPaymentMethod({ checked, onSelect, checkoutLocalization }: NewPaymentMethodProps) {
+  return (
+    <NewPaymentMethodContainer item onClick={onSelect}>
+      <PaymentMethodLayout
+        checked={checked}
+        icon="PaymentMethod"
+        text={<Typography variant="h6">{checkoutLocalization.newPaymentMethodText}</Typography>}
+      />
+      <Collapse in={checked}>
+        <StripePaymentForm />
+      </Collapse>
+    </NewPaymentMethodContainer>
+  );
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import { Alert, Grid } from '@mui/material';
+
+import { useCheckoutModel, usePaymentStepModel } from '../../hooks';
+import { ExistingPaymentMethod, NewPaymentMethod } from './PaymentMethods';
+import { Typography } from '../../../common/Typography';
+
+const PaymentContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 32px 0;
+`;
+
+export function PaymentStep() {
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { customer } = checkoutState || {};
+  const { errorMessage, useNewPaymentMethod, setUseNewPaymentMethod } = usePaymentStepModel();
+
+  return (
+    <PaymentContainer container>
+      {!!errorMessage && (
+        <Alert severity="error" sx={{ alignItems: 'center' }}>
+          <Typography overrideColor="inherit">{errorMessage}</Typography>
+        </Alert>
+      )}
+      <ExistingPaymentMethod
+        checked={!useNewPaymentMethod}
+        onSelect={() => setUseNewPaymentMethod(false)}
+        paymentMethodDetails={customer?.paymentMethodDetails}
+      />
+      <NewPaymentMethod
+        checked={useNewPaymentMethod}
+        checkoutLocalization={checkoutLocalization}
+        onSelect={() => setUseNewPaymentMethod(true)}
+      ></NewPaymentMethod>
+    </PaymentContainer>
+  );
+}

package/src/components/checkout/steps/payment/index.ts

@@ -0,0 +1 @@
+export * from './PaymentStep';

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import { AddressElement, PaymentElement } from '@stripe/react-stripe-js';
+import { Typography } from '../../../../common/Typography';
+import { useCheckoutModel } from '../../../hooks';
+
+export function StripePaymentForm() {
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { customer } = checkoutState || {};
+
+  return (
+    <Grid flexDirection="column" container gap={3} padding="16px">
+      <Grid flexDirection="column" container gap={2}>
+        <Typography variant="h6">{checkoutLocalization.newPaymentMethodBillingAddressTitle}</Typography>
+        <AddressElement
+          options={{
+            mode: 'billing',
+            fields: { phone: 'always' },
+            defaultValues: {
+              ...(customer?.name && { name: customer.name }),
+            },
+          }}
+        />
+      </Grid>
+      <Grid flexDirection="column" container gap={2}>
+        <Typography variant="h6">{checkoutLocalization.newPaymentMethodCardTitle}</Typography>
+        <PaymentElement
+          onChange={() => {}}
+          onReady={() => {}}
+          options={{
+            terms: { card: 'never' },
+            defaultValues: {
+              billingDetails: {
+                ...(customer?.name && { name: customer.name }),
+                ...(customer?.email && { email: customer.email }),
+              },
+            },
+          }}
+        />
+      </Grid>
+    </Grid>
+  );
+}

package/src/components/checkout/steps/payment/stripe/index.ts

@@ -0,0 +1,3 @@
+export * from './StripePaymentForm';
+export * from './useStripeIntegration';
+export * from './useSubmit';

package/src/components/checkout/steps/payment/stripe/stripe.utils.ts

@@ -0,0 +1,109 @@
+import { ApplySubscriptionResults, PaymentCollection } from '@stigg/js-client-sdk';
+import { Stripe, StripeElements } from '@stripe/stripe-js';
+
+type StripeElementsProps = {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+};
+
+export async function handleStripeFormValidations({ elements }: Pick<StripeElementsProps, 'elements'>) {
+  if (!elements) {
+    console.error('Stripe elements not initialized');
+    return { success: false };
+  }
+
+  const { error: elementsError } = await elements.submit();
+
+  if (elementsError) {
+    console.log(elementsError.message);
+    return { success: false };
+  }
+
+  return { success: true };
+}
+
+export async function handleNewPaymentMethod({
+  stripe,
+  elements,
+  setupIntentClientSecret,
+}: {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+  setupIntentClientSecret?: string;
+}) {
+  if (!stripe || !elements || !setupIntentClientSecret) {
+    return { success: false };
+  }
+
+  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
+    stripe,
+    elements,
+    clientSecret: setupIntentClientSecret,
+  });
+
+  return { success: !!newPaymentMethodId, paymentMethodId: newPaymentMethodId, errorMessage: setupErrorMessage };
+}
+
+export async function handleStripeNextAction({
+  applySubscriptionResults,
+  stripe,
+}: {
+  applySubscriptionResults: ApplySubscriptionResults;
+  stripe: Stripe | null;
+}) {
+  const paymentIntentClientSecret = applySubscriptionResults?.subscription?.latestInvoice?.paymentSecret;
+  if (
+    stripe &&
+    paymentIntentClientSecret &&
+    applySubscriptionResults?.subscription?.paymentCollection === PaymentCollection.ActionRequired
+  ) {
+    const { error: NextActionError } = await stripe.handleNextAction({ clientSecret: paymentIntentClientSecret });
+    if (NextActionError) {
+      return { errorMessage: NextActionError.message || '' };
+    }
+  }
+
+  return { subscription: applySubscriptionResults?.subscription };
+}
+
+async function handleStripeSetup({
+  stripe,
+  elements,
+  clientSecret,
+}: {
+  stripe: Stripe;
+  elements: StripeElements;
+  clientSecret: string;
+}) {
+  let newPaymentMethodId: string | undefined;
+  let setupErrorMessage: string | undefined;
+
+  const { error: setupError } = await stripe.confirmSetup({
+    elements,
+    confirmParams: { return_url: window.location.href },
+    redirect: 'if_required',
+  });
+
+  if (setupError) {
+    if (setupError.type === 'card_error' || setupError.type === 'validation_error') {
+      if (setupError.type === 'card_error') {
+        // Set some error message
+        setupErrorMessage = setupError.message || '';
+      }
+    } else {
+      setupErrorMessage = 'An unexpected error occurred.';
+    }
+  } else {
+    try {
+      const { setupIntent } = await stripe.retrieveSetupIntent(clientSecret);
+      if (setupIntent?.payment_method) {
+        newPaymentMethodId = setupIntent.payment_method as string;
+      }
+    } catch (e) {
+      setupErrorMessage = 'An unexpected error occurred.';
+      console.error(e);
+    }
+  }
+
+  return { newPaymentMethodId, setupErrorMessage };
+}

package/src/components/checkout/steps/payment/stripe/useStripeIntegration.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+import { BillingVendorIdentifier } from '@stigg/js-client-sdk';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+
+import { useCheckoutModel } from '../../../hooks';
+
+export function useStripeIntegration() {
+  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);
+  const { checkoutState } = useCheckoutModel();
+  const { billingIntegration, setupSecret } = checkoutState || {};
+
+  useEffect(() => {
+    if (billingIntegration) {
+      const { billingIdentifier, credentials } = billingIntegration;
+      if (billingIdentifier !== BillingVendorIdentifier.Stripe) {
+        console.error('Currently only stripe integration is supported');
+        return;
+      }
+
+      const { accountId, publicKey } = credentials;
+      setStripePromise(loadStripe(publicKey, { stripeAccount: accountId }));
+    }
+  }, [billingIntegration]);
+
+  return { stripePromise, setupIntentClientSecret: setupSecret };
+}