@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

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

@@ -0,0 +1,223 @@
+import React, { useEffect, useState } from 'react';
+
+import Box from '@mui/material/Box';
+import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
+import { BillingModel, BillingPeriod, Plan, Price } from '@stigg/js-client-sdk';
+import styled from '@utils/style';
+
+import { mq } from '../../../common/mediaQuery';
+import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
+import { Typography } from '../../../common/Typography';
+import { useChargesSort } from '../../../hooks/useChargeSort';
+import { calculateUnitQuantityText } from '../../../paywall/utils/calculateUnitQuantityText';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
+import { getValidPriceQuantity } from '../../../utils/priceUtils';
+import { InputField } from '../../components';
+import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../hooks';
+import { OnBillableFeatureChangeCallback } from '../../types';
+
+export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
+
+type CheckoutChargeListProps = {
+  plan?: Plan;
+  billingPeriod: BillingPeriod;
+  onBillableFeatureChange?: OnBillableFeatureChangeCallback;
+};
+
+const StyledPlanCharge = styled.div`
+  display: flex;
+  min-height: 60px;
+  margin-top: 16px;
+  flex-direction: column;
+
+  ${mq.md} {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+`;
+
+const StyledPlanLabel = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 42px;
+`;
+
+const StyledPlanChargeRow = styled(Typography)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: 42px;
+`;
+
+const getValidationText = (charge: Price, quantity?: number) => {
+  const { minUnitQuantity, maxUnitQuantity } = charge;
+  if (!quantity || quantity < (minUnitQuantity || 1)) {
+    return `Minimum ${minUnitQuantity || 1}`;
+  }
+
+  if (maxUnitQuantity && quantity > maxUnitQuantity) {
+    return `Maximum ${maxUnitQuantity}`;
+  }
+
+  return '';
+};
+
+export function PlanCharge({
+  charge,
+  setBillableFeature,
+  billableFeature,
+  onValidationChange,
+  onBillableFeatureChange,
+}: {
+  charge: Price;
+  billableFeature?: BillableFeatureInput;
+  setBillableFeature: UsePlanStepModel['setBillableFeature'];
+  onValidationChange: ({ featureId, isValid }: { featureId: string; isValid: boolean }) => void;
+  onBillableFeatureChange?: OnBillableFeatureChangeCallback;
+}) {
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+  const featureId = charge.feature?.featureId;
+  const isBaseCharge = !featureId;
+  const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
+  const displayName = isBaseCharge
+    ? 'Base charge'
+    : getFeatureDisplayNameText(charge.feature?.displayName || '', charge.feature?.units, charge.feature?.unitsPlural);
+  const hasQuantityRestrictions = !!(charge?.minUnitQuantity || charge?.maxUnitQuantity);
+
+  const handleQuantityChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (isBaseCharge || !featureId) return;
+
+    const { minUnitQuantity, maxUnitQuantity } = charge;
+    const value = event?.target?.value ? Number(event?.target?.value) : null;
+    if (
+      !value ||
+      value <= 0 ||
+      (minUnitQuantity && value < minUnitQuantity) ||
+      (maxUnitQuantity && value > maxUnitQuantity)
+    ) {
+      onValidationChange({ featureId, isValid: false });
+      setErrorMessage(getValidationText(charge, value ?? undefined));
+      // Reset the input value to null
+      // @ts-ignore
+      setBillableFeature(featureId, value ?? null);
+      return;
+    }
+    const quantity = getValidPriceQuantity(charge, value);
+    const result = await onBillableFeatureChange?.({ feature: charge.feature!, quantity });
+    setErrorMessage(result?.errorMessage);
+    onValidationChange({ featureId, isValid: !result?.disableNextStep });
+    setBillableFeature(featureId, quantity);
+  };
+
+  let chargeRow;
+
+  if (isBaseCharge || isPayAsYouGo) {
+    const formattedAmount = currencyPriceFormatter({
+      amount: charge.amount!,
+      currency: charge.currency,
+      locale: 'en-us',
+      minimumFractionDigits: 2,
+    });
+
+    chargeRow = `${formattedAmount}`;
+    if (isPayAsYouGo) {
+      chargeRow += ' / unit';
+    }
+  } else if (charge.isTieredPrice && charge.tiersMode && featureId) {
+    const quantity = billableFeature?.quantity || 1;
+    chargeRow = (
+      <TiersSelectContainer
+        componentId={`${featureId}-tiers`}
+        tiers={charge.tiers}
+        tiersMode={charge.tiersMode}
+        value={quantity}
+        errorMessage={errorMessage}
+        handleChange={async (quantity: number) => {
+          const result = await onBillableFeatureChange?.({ feature: charge.feature!, quantity });
+          setErrorMessage(result?.errorMessage);
+          onValidationChange({ featureId, isValid: !result?.disableNextStep });
+          setBillableFeature(featureId, quantity);
+        }}
+        width={'100%'}
+      />
+    );
+  } else {
+    chargeRow = (
+      <InputField
+        sx={{ width: '100%' }}
+        id={`${featureId}-input`}
+        type="number"
+        onWheel={ON_WHEEL_BLUR}
+        error={!!errorMessage}
+        helperText={errorMessage}
+        FormHelperTextProps={{ sx: { margin: '4px' } }}
+        value={billableFeature?.quantity ?? ''}
+        onChange={handleQuantityChange}
+      />
+    );
+  }
+
+  return (
+    <StyledPlanCharge>
+      <StyledPlanLabel>
+        <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>
+        )}
+      </StyledPlanLabel>
+
+      <StyledPlanChargeRow variant="h6" color="primary">
+        {chargeRow}
+      </StyledPlanChargeRow>
+    </StyledPlanCharge>
+  );
+}
+
+export function CheckoutChargeList({ plan, billingPeriod, onBillableFeatureChange }: CheckoutChargeListProps) {
+  const { billableFeatures, setBillableFeature } = usePlanStepModel();
+  const { setIsDisabled } = useProgressBarModel();
+  const { setIsValid } = useCheckoutModel();
+  const planCharges = useChargesSort(plan?.pricePoints?.filter((p) => p.billingPeriod === billingPeriod) || []);
+  const [chargesValidation, setChargesValidation] = useState(
+    planCharges?.reduce<Record<string, boolean>>((acc, curr) => {
+      acc[curr.feature?.featureId || 'base-charge'] = true;
+      return acc;
+    }, {}),
+  );
+
+  useEffect(() => {
+    const isDisabled = Object.values(chargesValidation).some((x) => !x);
+    setIsDisabled(isDisabled);
+    setIsValid(!isDisabled);
+  }, [chargesValidation, setIsDisabled, setIsValid]);
+
+  return (
+    <>
+      {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}
+            onValidationChange={({ featureId, isValid }: { featureId: string; isValid: boolean }) =>
+              setChargesValidation((prev) => ({ ...prev, [featureId]: isValid }))
+            }
+            onBillableFeatureChange={onBillableFeatureChange}
+          />
+        );
+      })}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,31 @@
+import { CheckoutContainerProps } from '../../CheckoutContainer';
+
+import { useCheckoutModel } from '../../hooks/useCheckoutModel';
+import { usePlanStepModel } from '../../hooks/usePlanStepModel';
+import { PlanHeader } from '../../planHeader';
+import { BillingPeriodPicker } from './BillingPeriodPicker';
+import { CheckoutChargeList } from './CheckoutChargeList';
+import { CheckoutPlanContainer } from './CheckoutPlanStep.style';
+
+export const CheckoutPlanStep = ({
+  onChangePlan,
+  onBillableFeatureChange,
+}: Pick<CheckoutContainerProps, 'onChangePlan' | 'onBillableFeatureChange'>) => {
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan } = checkoutState || {};
+  const { billingPeriod } = usePlanStepModel();
+
+  return (
+    <>
+      <PlanHeader allowChangePlan onChangePlan={onChangePlan} />
+      <CheckoutPlanContainer>
+        <BillingPeriodPicker plan={plan} checkoutLocalization={checkoutLocalization} />
+        <CheckoutChargeList
+          plan={plan}
+          billingPeriod={billingPeriod}
+          onBillableFeatureChange={onBillableFeatureChange}
+        />
+      </CheckoutPlanContainer>
+    </>
+  );
+};

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

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

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -0,0 +1,82 @@
+import styled from '@utils/style';
+import Box from '@mui/material/Box';
+import Color from 'color';
+import { useEffect, useRef } from 'react';
+import Lottie from 'react-lottie';
+import animationData from '../../../assets/lottie/checkout-success.json';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../configurations/textOverrides';
+
+export const ANIMATION_DURATION = 5000;
+
+const CheckoutSuccessContainer = styled(Box)`
+  @keyframes blurFade {
+    0% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0).toString()};
+      backdrop-filter: blur(0px);
+    }
+    100% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+      backdrop-filter: blur(6.5px);
+    }
+  }
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 5;
+  background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+  animation: blurFade 2s ease-in forwards;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  * rect {
+    fill: transparent;
+  }
+
+  & path {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+const CheckoutSuccessText = styled(Typography)`
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  align-self: center;
+  animation: fadeIn 5s ease-in forwards;
+`;
+
+export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
+  const containerRef = useRef<HTMLDivElement>();
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    }
+  }, []);
+  return (
+    <CheckoutSuccessContainer className="stigg-checkout-success-container" ref={containerRef}>
+      <Lottie
+        options={{ animationData, loop: false, autoplay: true }}
+        width={350}
+        height="auto"
+        style={{ display: 'flex', justifyContent: 'center' }}
+      />
+      <CheckoutSuccessText variant="h1" color="primary.main">
+        {checkoutLocalization.summary.checkoutSuccessText}
+      </CheckoutSuccessText>
+    </CheckoutSuccessContainer>
+  );
+}