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

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

@@ -1,100 +0,0 @@
-import { ApplySubscription, ApplySubscriptionResults } from '@stigg/js-client-sdk';
-import { useElements, useStripe } from '@stripe/react-stripe-js';
-
-import { useStiggContext } from '../../../../..';
-import { useCheckoutModel } from '../../../hooks';
-import { usePaymentStepModel } from '../../../hooks/usePaymentStepModel';
-import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
-import { CheckoutContainerProps, CheckoutResult } from '../../../CheckoutContainer';
-import { handleNewPaymentMethod, handleStripeFormValidations, handleStripeNextAction } from './stripe.utils';
-
-export type HandleSubmitResult = { results?: ApplySubscriptionResults; errorMessage?: string } | undefined;
-
-export function useSubmit({
-  onCheckout,
-  onCheckoutCompleted,
-}: Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>) {
-  const { stigg } = useStiggContext();
-  const { useNewPaymentMethod } = usePaymentStepModel();
-  const subscriptionState = useSubscriptionState();
-  const { checkoutState, widgetState, setWidgetLoading } = useCheckoutModel();
-  const { setupSecret: setupIntentClientSecret } = checkoutState || {};
-  const stripe = useStripe();
-  const elements = useElements();
-
-  const handleSubmit = async (e: any): Promise<HandleSubmitResult> => {
-    e.preventDefault();
-
-    if (!subscriptionState) {
-      return;
-    }
-
-    let checkoutResults: ApplySubscriptionResults | undefined;
-    let errorMessage: string | undefined;
-    let paymentMethodId: string | undefined;
-
-    setWidgetLoading(true);
-
-    if (useNewPaymentMethod) {
-      const { success } = await handleStripeFormValidations({ elements });
-      if (!success) {
-        setWidgetLoading(false);
-        return;
-      }
-
-      const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
-      if (!paymentMethodResults.success) {
-        errorMessage = paymentMethodResults.errorMessage;
-      }
-
-      paymentMethodId = paymentMethodResults.paymentMethodId;
-    }
-
-    if (!errorMessage) {
-      const checkoutParams: ApplySubscription = { ...subscriptionState, paymentMethodId };
-
-      const checkoutAction = async (): Promise<CheckoutResult> => {
-        try {
-          const applySubscriptionResults = await stigg.applySubscription(checkoutParams);
-          const nextActionResults = await handleStripeNextAction({
-            applySubscriptionResults,
-            stripe,
-          });
-
-          checkoutResults = nextActionResults;
-          if (nextActionResults.errorMessage) {
-            errorMessage = nextActionResults.errorMessage;
-          }
-
-          return { success: !nextActionResults.errorMessage, errorMessage: nextActionResults.errorMessage };
-        } catch (e) {
-          console.error(e);
-          errorMessage = (e as any)?.message;
-          return { success: false, errorMessage };
-        }
-      };
-
-      if (onCheckout) {
-        const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
-        if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
-          errorMessage = externalCheckoutResults.errorMessage;
-        }
-      } else {
-        await checkoutAction();
-      }
-    }
-
-    setWidgetLoading(false);
-
-    if (onCheckoutCompleted) {
-      await onCheckoutCompleted({
-        success: !errorMessage && !!checkoutResults?.subscription,
-        error: errorMessage,
-      });
-    }
-
-    return { results: checkoutResults, errorMessage };
-  };
-
-  return { handleSubmit, isLoading: !!widgetState?.isLoading };
-}

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -1,46 +0,0 @@
-import styled from '@emotion/styled/macro';
-import { Box, Chip } from '@mui/material';
-
-export const BillingPeriodPickerContainer = styled(Box)`
-  padding: 16px 0;
-`;
-
-export const BillingPeriodButton = styled.button<{ $isActive?: boolean; $disabled?: boolean }>`
-  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 80px;
-  border-radius: 10px;
-  border: ${({ theme, $isActive }) =>
-    `1px solid ${$isActive ? theme.stigg.palette.outlinedRestingBorder : theme.stigg.palette.outlinedBorder}`};
-  background: ${({ $isActive }) => ($isActive ? '#e5f2ff' : '#fff')};
-  text-transform: none;
-  text-align: start;
-
-  &.MuiButton-root {
-    padding: 0 16px 0 8px;
-    &:hover {
-      background: none;
-    }
-  }
-`;
-
-export const BillingPeriodOptions = styled(Box)`
-  display: flex;
-  gap: 16px;
-  margin-top: 16px;
-`;
-
-export const BillingPeriodPrice = styled.div`
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-`;
-
-export const DiscountChip = styled(Chip)`
-  & .MuiChip-label {
-    font-size: 12px;
-  }
-`;

package/src/components/checkout/steps/plan/BillingPeriodPicker.tsx

@@ -1,63 +0,0 @@
-import { partition } from 'lodash';
-import React from 'react';
-import { FontWeight } from 'styled-typography';
-
-import { Box, Radio } from '@mui/material';
-import { BillingPeriod, Plan } from '@stigg/js-client-sdk';
-
-import { Typography } from '../../../common/Typography';
-import { formatBillingPeriod } from '../../formatting';
-import { usePlanStepModel } from '../../hooks/usePlanStepModel';
-import { BillingPeriodButton, BillingPeriodOptions, BillingPeriodPickerContainer } from './BillingPeriodPicker.style';
-import { CheckoutLocalization } from '../../textOverrides';
-
-const BillingPeriodOption = ({ billingPeriod }: { billingPeriod: BillingPeriod }) => {
-  const { billingPeriod: selectedBillingPeriod, setBillingPeriod } = usePlanStepModel();
-  const isActive = selectedBillingPeriod === billingPeriod;
-
-  return (
-    <BillingPeriodButton onClick={() => setBillingPeriod(billingPeriod)} $isActive={isActive}>
-      <Radio
-        checked={isActive}
-        onChange={() => setBillingPeriod(billingPeriod)}
-        value={billingPeriod}
-        inputProps={{ 'aria-label': formatBillingPeriod(billingPeriod) }}
-      />
-
-      <Box>
-        <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
-          {formatBillingPeriod(billingPeriod)}
-        </Typography>
-      </Box>
-    </BillingPeriodButton>
-  );
-};
-
-type BillingPeriodPickerProps = {
-  plan?: Plan;
-  checkoutLocalization: CheckoutLocalization;
-};
-
-export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPeriodPickerProps) => {
-  const [monthlyPrices, annualPrices] = partition(
-    plan?.pricePoints,
-    (price) => price.billingPeriod === BillingPeriod.Monthly,
-  );
-
-  return (
-    <BillingPeriodPickerContainer>
-      <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
-        {checkoutLocalization.billingPeriodsTitle}
-      </Typography>
-
-      <BillingPeriodOptions>
-        {!!monthlyPrices?.length && (
-          <BillingPeriodOption key={BillingPeriod.Monthly} billingPeriod={BillingPeriod.Monthly} />
-        )}
-        {!!annualPrices?.length && (
-          <BillingPeriodOption key={BillingPeriod.Annually} billingPeriod={BillingPeriod.Annually} />
-        )}
-      </BillingPeriodOptions>
-    </BillingPeriodPickerContainer>
-  );
-};

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-
-import styled from '@emotion/styled';
-import { Box } from '@mui/material';
-import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
-import { BillingModel, BillingPeriod, Plan, Price, PriceTierFragment } from '@stigg/js-client-sdk';
-
-import { Typography } from '../../../common/Typography';
-import { useChargesSort } from '../../../hooks/useChargeSort';
-import { calculateUnitQuantityText } from '../../../paywall/utils/calculateUnitQuantityText';
-import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { InputField } from '../../components';
-import { usePlanStepModel } from '../../hooks';
-import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
-import { getPriceFeatureUnit, getTierByQuantity } from '../../../utils/priceTierUtils';
-import { getValidPriceQuantity } from '../../../utils/priceUtils';
-
-export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
-
-type CheckoutChargeListProps = {
-  plan?: Plan;
-  billingPeriod: BillingPeriod;
-};
-
-const StyledPlanCharge = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 60px;
-  margin-top: 16px;
-`;
-
-export function PlanCharge({
-  charge,
-  setBillableFeature,
-  billableFeature,
-}: {
-  charge: Price;
-  billableFeature?: BillableFeatureInput;
-  setBillableFeature: UsePlanStepModel['setBillableFeature'];
-}) {
-  const featureId = charge.feature?.featureId;
-  const isBaseCharge = !featureId;
-  const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
-  const displayName = isBaseCharge ? 'Base charge' : charge.feature?.displayName;
-  const hasQuantityRestrictions = !!(charge?.minUnitQuantity || charge?.maxUnitQuantity);
-
-  const handleQuantityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (isBaseCharge || !featureId) return;
-
-    const value = event?.target?.value ? Number(event?.target?.value) : charge.minUnitQuantity || 1;
-    const quantity = getValidPriceQuantity(charge, value || 1);
-
-    setBillableFeature(featureId, quantity);
-  };
-
-  let chargeRow;
-
-  if (isBaseCharge || isPayAsYouGo) {
-    const formattedAmount = currencyPriceFormatter({
-      amount: charge.amount!,
-      currency: charge.currency,
-      locale: 'en-us',
-    });
-
-    chargeRow = `${formattedAmount}`;
-    if (isPayAsYouGo) {
-      chargeRow += ' / unit';
-    }
-  } else if (charge.isTieredPrice) {
-    const tier = getTierByQuantity(charge.tiers!, billableFeature!.quantity || 1);
-    chargeRow = (
-      <TiersSelectContainer
-        componentId={`${featureId}-tiers`}
-        tiers={charge.tiers}
-        tierUnits={getPriceFeatureUnit(charge)}
-        selectedTier={tier}
-        handleTierChange={(tier: PriceTierFragment) => {
-          setBillableFeature(featureId!, tier!.upTo);
-        }}
-      />
-    );
-  } else {
-    chargeRow = (
-      <InputField
-        sx={{ width: 120 }}
-        id={`${featureId}-input`}
-        type="number"
-        InputProps={
-          hasQuantityRestrictions ? { inputProps: { min: charge.minUnitQuantity, max: charge.maxUnitQuantity } } : {}
-        }
-        value={billableFeature?.quantity || charge.minUnitQuantity || 1}
-        onChange={handleQuantityChange}
-      />
-    );
-  }
-
-  return (
-    <StyledPlanCharge>
-      <Box display="flex" flexDirection="column">
-        <Typography variant="h6" color="primary" lineHeight="24px">
-          {displayName}
-        </Typography>
-        {hasQuantityRestrictions && (
-          <Typography variant="body1" color="secondary" lineHeight="20px">
-            {calculateUnitQuantityText(charge.minUnitQuantity, charge.maxUnitQuantity, charge.feature?.unitsPlural)}
-          </Typography>
-        )}
-      </Box>
-
-      <Typography variant="h6" color="primary">
-        {chargeRow}
-      </Typography>
-    </StyledPlanCharge>
-  );
-}
-
-export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListProps) {
-  const { billableFeatures, setBillableFeature } = usePlanStepModel();
-  const planCharges = useChargesSort(plan?.pricePoints?.filter(p => p.billingPeriod === billingPeriod) || []);
-
-  return (
-    <div>
-      {planCharges?.map(charge => {
-        const billableFeature = billableFeatures.find(x => x.featureId === charge.feature?.featureId);
-        return (
-          <PlanCharge
-            key={charge.feature?.featureId || 'base-charge'}
-            charge={charge}
-            setBillableFeature={setBillableFeature}
-            billableFeature={billableFeature}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/components/checkout/steps/plan/CheckoutPlanStep.style.tsx

@@ -1,6 +0,0 @@
-import styled from '@emotion/styled/macro';
-import { Box } from '@mui/material';
-
-export const CheckoutPlanContainer = styled(Box)`
-  width: 100%;
-`;

package/src/components/checkout/steps/plan/CheckoutPlanStep.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { useCheckoutModel } from '../../hooks/useCheckoutModel';
-import { usePlanStepModel } from '../../hooks/usePlanStepModel';
-import { BillingPeriodPicker } from './BillingPeriodPicker';
-import { CheckoutChargeList } from './CheckoutChargeList';
-import { CheckoutPlanContainer } from './CheckoutPlanStep.style';
-
-type CheckoutPlanStepProps = {};
-
-export const CheckoutPlanStep = ({}: CheckoutPlanStepProps) => {
-  const { checkoutState, checkoutLocalization } = useCheckoutModel();
-  const { plan } = checkoutState || {};
-  const { billingPeriod } = usePlanStepModel();
-
-  return (
-    <CheckoutPlanContainer>
-      <BillingPeriodPicker plan={plan} checkoutLocalization={checkoutLocalization} />
-      <CheckoutChargeList plan={plan} billingPeriod={billingPeriod} />
-    </CheckoutPlanContainer>
-  );
-};

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

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

package/src/components/checkout/steps/surprise/SurpriseStep.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import NyanCat from '../../../../assets/nyancat.svg';
-import styled from '@emotion/styled/macro';
-
-const StyledNyanCat = styled(NyanCat)`
-  background: #000;
-  width: 100%;
-  max-width: 920px;
-  height: 548px;
-`;
-
-const SurpriseContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  justify-content: center;
-  min-height: 430px;
-  width: 100%;
-`;
-
-export const SurpriseStep = () => {
-  return (
-    <SurpriseContainer>
-      <StyledNyanCat />
-    </SurpriseContainer>
-  );
-};

package/src/components/checkout/textOverrides.ts

@@ -1,58 +0,0 @@
-import { BillingPeriod } from '@stigg/js-client-sdk';
-import moment from 'moment';
-import merge from 'lodash/merge';
-import { DeepPartial } from '../../types';
-import { formatBillingPeriod } from './formatting';
-
-export type CheckoutLocalization = {
-  changePlan: string;
-  billingPeriodsTitle: string;
-  addAddonText: string;
-  newPaymentMethodText: string;
-  newPaymentMethodCardTitle: string;
-  newPaymentMethodBillingAddressTitle: string;
-  baseChargeText: string | ((params: { billingPeriod: BillingPeriod }) => string);
-  totalText: string;
-  subTotalText: string;
-  addCouponCodeText: string;
-  couponCodeTitle: string;
-  addonsSectionTitle: string;
-  changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
-  checkoutButton: {
-    nextText: string;
-    downgradeText: string;
-    upgradeText: string;
-    purchaseText: string;
-  };
-};
-
-export function getResolvedCheckoutLocalize(
-  localizeOverride?: DeepPartial<CheckoutLocalization>,
-): CheckoutLocalization {
-  const checkoutDefaultLocalization: CheckoutLocalization = {
-    changePlan: 'Change plan',
-    billingPeriodsTitle: 'Billing cycle',
-    addAddonText: 'Add',
-    newPaymentMethodText: 'New payment method',
-    newPaymentMethodBillingAddressTitle: 'Billing address',
-    newPaymentMethodCardTitle: 'Payment method',
-    baseChargeText: ({ billingPeriod }) => `${formatBillingPeriod(billingPeriod)} charge`,
-    totalText: 'Total due today',
-    subTotalText: 'Subtotal',
-    addCouponCodeText: 'Add coupon code',
-    couponCodeTitle: 'Coupon code',
-    addonsSectionTitle: 'Add-ons',
-    changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
-      `Your changes will apply on the end of your current billing cycle on ${moment(billingPeriodEnd).format(
-        'MMM D, YYYY',
-      )}.`,
-    checkoutButton: {
-      nextText: 'Next',
-      downgradeText: 'Downgrade',
-      upgradeText: 'Upgrade',
-      purchaseText: 'Purchase',
-    },
-  };
-
-  return merge(checkoutDefaultLocalization, localizeOverride);
-}

package/src/components/checkout/theme.ts

@@ -1,26 +0,0 @@
-import { StiggTheme } from '../../theme/types';
-import { DeepPartial } from '../../types';
-import { CheckoutConfiguration } from './types';
-
-export type CheckoutTheme = {
-  // sectionTitleColor: string;
-  // planNameColor: string;
-  backgroundColor: string;
-  borderColor: string;
-  // listItemBackgroundColor: string;
-  // tabMaxHeight: string;
-  // iconsColor: string;
-};
-
-export function getResolvedCheckoutTheme(
-  _globalTheme: StiggTheme,
-  themeOverride?: DeepPartial<CheckoutTheme>,
-  remoteConfiguration?: CheckoutConfiguration | null,
-) {
-  // todo: implement theme customization
-  const checkoutDefaultTheme: CheckoutTheme = {
-    backgroundColor: themeOverride?.backgroundColor || remoteConfiguration?.palette?.backgroundColor || 'white',
-    borderColor: themeOverride?.borderColor || remoteConfiguration?.palette?.borderColor || 'rgba(0, 30, 108, 0.15)',
-  };
-  return checkoutDefaultTheme;
-}

package/src/components/checkout/types.ts

@@ -1,7 +0,0 @@
-/** placeholder types until we have backend support **/
-export type CheckoutConfiguration = {
-  palette?: {
-    backgroundColor: string;
-    borderColor: string;
-  };
-};

package/src/components/hooks/useChargeSort.ts

@@ -1,17 +0,0 @@
-import sortBy from 'lodash/sortBy';
-import { useMemo } from 'react';
-
-import { BillingModel, Price } from '@stigg/js-client-sdk';
-
-const CHARGES_BILLING_MODEL_ORDER = [BillingModel.FlatFee, BillingModel.PerUnit, BillingModel.UsageBased];
-
-export const sortCharges = (charges: Price[]) => {
-  return sortBy(charges, [
-    charge => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
-    charge => charge.feature?.displayName,
-  ]);
-};
-
-export const useChargesSort = (charges: Price[]) => {
-  return useMemo(() => sortCharges(charges), [charges]);
-};

package/src/components/utils/priceUtils.ts

@@ -1,10 +0,0 @@
-import { Price } from '@stigg/js-client-sdk';
-
-export const getValidPriceQuantity = (price: Price, quantity: number) => {
-  if (price.minUnitQuantity && quantity < price.minUnitQuantity) {
-    return price.minUnitQuantity;
-  } else if (price.maxUnitQuantity && quantity > price.maxUnitQuantity) {
-    return price.maxUnitQuantity;
-  }
-  return quantity;
-};

package/src/stories/Checkout.stories.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled/macro';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Checkout } from '../components/checkout';
-import { StiggProvider } from '../components/StiggProvider';
-import { defaultArgsWithCustomer } from './baseArgs';
-
-export default {
-  title: 'Stigg React SDK/Checkout',
-  component: Checkout,
-  decorators: [
-    (Story, { args }) => (
-      <StiggProvider
-        apiKey={args.apiKey}
-        customerId={args.customerId}
-        theme={args.theme}
-        locale={args.locale}
-        baseUri={args.baseUri}
-        enableEdge={args.disableEdge}
-      >
-        <Story />
-      </StiggProvider>
-    ),
-  ],
-} as ComponentMeta<typeof Checkout>;
-
-const Wrapper = styled.div`
-  width: 1000px;
-`;
-
-const Template: ComponentStory<any> = args => (
-  <Wrapper>
-    <Checkout
-      planId={args.planId}
-      preferredBillingPeriod={args.preferredBillingPeriod}
-      billingCountryCode={args.billingCountryCode}
-      resourceId={args.resourceId}
-      onCheckoutCompleted={results => {
-        console.log('checkout finished!', results);
-        return Promise.resolve();
-      }}
-      onCheckout={async ({ checkoutParams, checkoutAction }) => {
-        console.log('checkout started!', checkoutParams);
-        const { success, errorMessage } = await checkoutAction();
-        return { success, errorMessage };
-      }}
-      billableFeatures={[{ featureId: 'feature-seat', quantity: 30 }]}
-      onChangePlan={({ currentPlan }) => {
-        console.log('plan changed clicked!', { currentPlan });
-      }}
-    />
-  </Wrapper>
-);
-
-export const DefaultCheckout = Template.bind({});
-DefaultCheckout.args = {
-  ...defaultArgsWithCustomer,
-  planId: 'plan-revvenu-essentials',
-};