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

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

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

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

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

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

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

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