@stigg/react-sdk 4.3.1 → 4.4.0-beta.0

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

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+
+import styled from '@emotion/styled/macro';
+import { CircularProgress, Grid } from '@mui/material';
+
+import { Icon } from '../../common/Icon';
+import { Typography } from '../../common/Typography';
+import { Button, InputField } from '../components';
+import { usePreviewSubscriptionAction } from '../hooks';
+import { usePromotionCodeModel } from '../hooks/useCouponModel';
+import { AddPromotionCodeButton } from './AddPromotionCodeButton';
+import { CheckoutLocalization } from '../textOverrides';
+
+const CouponCodeAddButton = styled(Button)`
+  padding: 4px 10px;
+  min-width: unset;
+  border-radius: ${({ theme }) => theme.stigg.border.radius};
+  display: flex;
+  align-items: center;
+`;
+
+export const AddPromotionCode = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
+  const { setPromotionCode: persistPromotionCode } = usePromotionCodeModel();
+  const [showInput, setShowInput] = useState(false);
+  const [promotionCode, setPromotionCode] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
+  const { previewSubscriptionAction } = usePreviewSubscriptionAction();
+
+  const handlePromotionCode = async () => {
+    setIsLoading(true);
+    setErrorMessage('');
+
+    const { subscriptionPreview, errorMessage } = await previewSubscriptionAction({ promotionCode });
+
+    if (!errorMessage && subscriptionPreview?.discount) {
+      persistPromotionCode(promotionCode.toUpperCase());
+      setShowInput(false);
+    } else if (!!errorMessage) {
+      setErrorMessage(errorMessage);
+    }
+    setIsLoading(false);
+  };
+
+  if (!showInput) {
+    return <AddPromotionCodeButton onAddClick={() => setShowInput(true)} checkoutLocalization={checkoutLocalization} />;
+  }
+
+  return (
+    <Grid>
+      <Typography variant="body1" color={errorMessage ? 'error' : 'primary.main'}>
+        {checkoutLocalization.couponCodeTitle}
+      </Typography>
+
+      <InputField
+        autoFocus
+        variant="outlined"
+        fullWidth
+        error={!!errorMessage}
+        value={promotionCode}
+        onChange={(e) => {
+          setPromotionCode(e.target.value);
+        }}
+        inputProps={{ maxLength: 20 }}
+        InputProps={{
+          endAdornment: (
+            <CouponCodeAddButton
+              variant="contained"
+              disableRipple={isLoading}
+              $isLoading={isLoading}
+              onClick={handlePromotionCode}
+            >
+              {isLoading ? <CircularProgress size={18} /> : <Icon style={{ display: 'flex' }} icon="ArrowForward" />}
+            </CouponCodeAddButton>
+          ),
+        }}
+      />
+      {!!errorMessage && (
+        <Typography variant="body1" color="error">
+          {errorMessage}
+        </Typography>
+      )}
+    </Grid>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from '@emotion/styled/macro';
+
+import PlusIcon from '../../../assets/plus-icon.svg';
+import { Typography } from '../../common/Typography';
+import { Button } from '../components';
+import { CheckoutLocalization } from '../textOverrides';
+
+const StyledPlusIcon = styled(PlusIcon)`
+  path {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+export type AddPromotionCodeButtonProps = {
+  onAddClick: () => void;
+  checkoutLocalization: CheckoutLocalization;
+};
+
+export const AddPromotionCodeButton = ({ onAddClick, checkoutLocalization }: AddPromotionCodeButtonProps) => (
+  <Button
+    fullWidth
+    className="stigg-checkout-summary-add-coupon-code-button"
+    sx={{ textTransform: 'none', justifyContent: 'flex-start' }}
+    variant="text"
+    size="medium"
+    onClick={onAddClick}
+  >
+    <StyledPlusIcon className="stigg-checkout-summary-add-coupon-code-button-icon" />
+    <Typography
+      className="stigg-checkout-change-plan-button-text"
+      color="primary.main"
+      style={{ lineHeight: '24px' }}
+      variant="body1"
+    >
+      {checkoutLocalization.addCouponCodeText}
+    </Typography>
+  </Button>
+);

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)<{ $disabled?: boolean }>`
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : '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,86 @@
+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;
+  readOnly?: boolean;
+};
+
+export type PaymentMethodProps = Pick<Customer, 'paymentMethodDetails'> &
+  Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & { onSelect: () => void };
+
+export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & {
+  onSelect: () => void;
+  checkoutLocalization: CheckoutLocalization;
+};
+
+function PaymentMethodLayout({ checked, icon, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
+  return (
+    <PaymentMethodLayoutContainer>
+      <Radio checked={checked} disabled={readOnly} />
+      <Icon icon={icon} style={{ display: 'contents' }} />
+      <PaymentMethodTextContainer container>
+        <Grid item>{text}</Grid>
+        {subtitle && <Grid item>{subtitle}</Grid>}
+      </PaymentMethodTextContainer>
+    </PaymentMethodLayoutContainer>
+  );
+}
+
+export function ExistingPaymentMethod({ checked, paymentMethodDetails, readOnly, onSelect }: PaymentMethodProps) {
+  if (!paymentMethodDetails) {
+    return null;
+  }
+  const { last4Digits, expirationMonth, expirationYear } = paymentMethodDetails;
+
+  return (
+    <PaymentMethodContainer item onClick={onSelect} $disabled={readOnly}>
+      <PaymentMethodLayout
+        checked={checked}
+        readOnly={readOnly}
+        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, readOnly, checkoutLocalization }: NewPaymentMethodProps) {
+  return (
+    <NewPaymentMethodContainer item onClick={onSelect} $disabled={readOnly}>
+      <PaymentMethodLayout
+        checked={checked}
+        readOnly={readOnly}
+        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,50 @@
+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, widgetState } = useCheckoutModel();
+  const { customer } = checkoutState || {};
+  const { errorMessage, useNewPaymentMethod, setUseNewPaymentMethod } = usePaymentStepModel();
+  const { readOnly } = widgetState;
+
+  const handleOnSelect = (openNewPaymentMethod: boolean) => {
+    if (readOnly) {
+      return;
+    }
+
+    setUseNewPaymentMethod(openNewPaymentMethod);
+  };
+
+  return (
+    <PaymentContainer container>
+      {!!errorMessage && (
+        <Alert severity="error" sx={{ alignItems: 'center' }}>
+          <Typography overrideColor="inherit">{errorMessage}</Typography>
+        </Alert>
+      )}
+      <ExistingPaymentMethod
+        readOnly={readOnly}
+        checked={!useNewPaymentMethod}
+        paymentMethodDetails={customer?.paymentMethodDetails}
+        onSelect={() => handleOnSelect(false)}
+      />
+      <NewPaymentMethod
+        readOnly={readOnly}
+        checked={useNewPaymentMethod}
+        checkoutLocalization={checkoutLocalization}
+        onSelect={() => handleOnSelect(true)}
+      />
+    </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,45 @@
+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, widgetState } = useCheckoutModel();
+  const { customer, configuration } = checkoutState || {};
+  const { readOnly } = widgetState;
+
+  return (
+    <Grid flexDirection="column" container gap={3} padding="16px" sx={{ pointerEvents: readOnly ? 'none' : undefined }}>
+      <Grid flexDirection="column" container gap={2}>
+        <Typography variant="h6">{checkoutLocalization.newPaymentMethodBillingAddressTitle}</Typography>
+        <AddressElement
+          options={{
+            mode: 'billing',
+            fields: { phone: !!configuration?.content?.collectPhoneNumber ? 'always' : 'auto' },
+            defaultValues: {
+              ...(customer?.name && { name: customer.name }),
+            },
+          }}
+        />
+      </Grid>
+      <Grid flexDirection="column" container gap={2}>
+        <Typography variant="h6">{checkoutLocalization.newPaymentMethodCardTitle}</Typography>
+        <PaymentElement
+          onChange={() => {}}
+          onReady={() => {}}
+          options={{
+            readOnly,
+            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';