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

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

@@ -1,37 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,109 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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 };
-}