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

package/src/components/customerPortal/usage/CustomerUsageData.tsx

@@ -0,0 +1,124 @@
+import { CustomerPortalEntitlement, MeterType, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
+import { useState } from 'react';
+import { compact, keyBy } from 'lodash';
+import { Minus, Plus } from 'react-feather';
+import Grid from '@mui/material/Grid';
+import { useCustomerPortalContext } from '../CustomerPortalContext';
+import { FeatureUsage } from './featureUsage/FeatureUsage';
+import { Footer, CustomerUsageLoader } from './CustomerUsageData.style';
+import { SectionContainer } from '../common/SectionContainer';
+import { SectionHeader } from '../common/SectionHeader';
+import { SectionTitle } from '../common/SectionTitle';
+import { StyledButton } from '../common/StyledButton';
+import { FilterEntitlementsFn, OnBuyMoreCallbackFn } from '../types';
+import { OnManageClick } from '../CustomerPortalContainer';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
+
+const MAX_BOXES = 6;
+
+export type CustomerUsageDataProps = {
+  onManageSubscription?: OnManageClick;
+  onBuyMore?: OnBuyMoreCallbackFn;
+  filterEntitlements?: FilterEntitlementsFn;
+};
+
+export function CustomerUsageData({ onManageSubscription, onBuyMore, filterEntitlements }: CustomerUsageDataProps) {
+  const [showAll, setShowAll] = useState(false);
+  const isMdScreen = useIsScreenWiderThan('md');
+
+  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
+  const isLoadingData = isLoading || !customerPortal;
+  const { entitlements, subscriptions } = customerPortal || {};
+  const meteredEntitlements = entitlements?.filter(
+    (entitlement) =>
+      entitlement.feature?.meterType === MeterType.Fluctuating ||
+      entitlement.feature?.meterType === MeterType.Incremental,
+  );
+  const activeSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.Active);
+  const hasCustomSubscription = activeSubscription?.pricingType === PricingType.Custom;
+  const canUpgradeSubscription = !!customerPortal?.canUpgradeSubscription;
+
+  const subscriptionPriceByFeature = keyBy(activeSubscription?.prices ?? [], 'feature.refId');
+  const entitlementByFeature = keyBy(meteredEntitlements ?? [], 'feature.refId');
+
+  // sort features by prices first, then other entitlements
+  const priceEntitlements: CustomerPortalEntitlement[] = compact(
+    (activeSubscription?.prices ?? []).map(
+      (subscriptionPrice) =>
+        (subscriptionPrice.feature && entitlementByFeature[subscriptionPrice.feature.refId]) || undefined,
+    ),
+  );
+  const otherEntitlements: CustomerPortalEntitlement[] = compact(
+    (meteredEntitlements ?? []).filter((entitlement) => !subscriptionPriceByFeature[entitlement.feature!.refId]),
+  );
+
+  const sortedEntitlements: CustomerPortalEntitlement[] = [...priceEntitlements, ...otherEntitlements].filter(
+    (entitlement) => entitlement.usageLimit !== 0,
+  );
+
+  const filteredEntitlements = filterEntitlements ? filterEntitlements(sortedEntitlements) : sortedEntitlements;
+
+  // 4 -> 3 per row, 6 -> 2 per row
+  const xs = isMdScreen ? (filteredEntitlements.length > 2 ? 4 : 6) : 12;
+
+  const entitlementsToShow = showAll ? filteredEntitlements : filteredEntitlements.slice(0, MAX_BOXES);
+
+  const toggleShowAll = () => setShowAll((prevState) => !prevState);
+
+  if (!isLoadingData && !meteredEntitlements?.length) {
+    return null;
+  }
+
+  return (
+    <SectionContainer
+      className="stigg-subscription-usage-layout"
+      $backgroundColor={theme.backgroundColor}
+      $borderColor={theme.borderColor}>
+      <SectionHeader>
+        <SectionTitle
+          title={textOverrides.usageTabTitle}
+          className="stigg-customer-portal-usage-section-title"
+          isLoading={isLoadingData}
+        />
+      </SectionHeader>
+
+      {isLoadingData ? (
+        <CustomerUsageLoader />
+      ) : (
+        <>
+          <Grid container spacing={4}>
+            {entitlementsToShow.map((entitlement) => (
+              <Grid
+                className={`stigg-entitlement-usage-${entitlement.feature!.refId}`}
+                key={entitlement.feature!.refId}
+                item
+                xs={xs}>
+                <FeatureUsage
+                  key={entitlement.feature!.refId}
+                  subscriptionPrice={subscriptionPriceByFeature[entitlement.feature!.refId]}
+                  entitlement={entitlement}
+                  onManageSubscription={onManageSubscription}
+                  onBuyMore={onBuyMore}
+                  hasCustomSubscription={hasCustomSubscription}
+                  canUpgradeSubscription={canUpgradeSubscription}
+                />
+              </Grid>
+            ))}
+          </Grid>
+
+          {filteredEntitlements.length > MAX_BOXES && (
+            <Footer>
+              <StyledButton
+                className="stigg-usage-toggle-many-button"
+                variant="text"
+                startIcon={showAll ? <Minus /> : <Plus />}
+                onClick={toggleShowAll}>
+                {showAll ? 'Show less' : 'Show more'}
+              </StyledButton>
+            </Footer>
+          )}
+        </>
+      )}
+    </SectionContainer>
+  );
+}

package/src/components/customerPortal/usage/featureUsage/EntitlementCTAButton.tsx

@@ -0,0 +1,62 @@
+import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
+import Button from '@mui/material/Button';
+import styled from '@utils/style';
+import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
+import { Typography } from '../../../common/Typography';
+import { CustomerPortalIntentionType, OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
+
+const StyledButton = styled(Button)`
+  text-transform: none;
+  padding: 0;
+  white-space: nowrap;
+`;
+
+export type EntitlementCtaButtonProps = {
+  entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
+  feature: FeatureFragment;
+  onManageSubscription: OnManageClick | undefined;
+  onBuyMore?: OnBuyMoreCallbackFn;
+  canBuyMore: boolean;
+  canUpgradeSubscription: boolean;
+  hasCustomSubscription: boolean;
+};
+
+export function EntitlementCtaButton({
+  entitlement,
+  feature,
+  onManageSubscription,
+  onBuyMore,
+  canBuyMore,
+  canUpgradeSubscription,
+  hasCustomSubscription,
+}: EntitlementCtaButtonProps) {
+  if (hasCustomSubscription || entitlement.hasUnlimitedUsage) {
+    return null;
+  }
+
+  if (getUsagePercentage(entitlement.currentUsage || 0, entitlement.usageLimit!) < USAGE_PERCENTAGE_WARNING_THRESHOLD) {
+    return null;
+  }
+
+  if (canBuyMore) {
+    return onBuyMore ? (
+      <StyledButton variant="text" onClick={() => onBuyMore(feature, entitlement)}>
+        <Typography color="primary.main">Buy more</Typography>
+      </StyledButton>
+    ) : null;
+  }
+
+  if (canUpgradeSubscription) {
+    return onManageSubscription ? (
+      <StyledButton
+        variant="text"
+        onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.UPGRADE_PLAN })}>
+        <Typography color="primary.main">Upgrade</Typography>
+      </StyledButton>
+    ) : null;
+  }
+
+  return null;
+}

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.helper.ts

@@ -0,0 +1,45 @@
+import { CustomerPortalEntitlement, EntitlementResetPeriod } from '@stigg/js-client-sdk';
+import moment, { MomentInput } from 'moment';
+
+export const USAGE_PERCENTAGE_WARNING_THRESHOLD = 70;
+
+export function getUsagePercentage(currentUsage: number, limit: number) {
+  return Math.min(Math.floor((currentUsage / limit) * 100), 100);
+}
+
+export function getUsageProgressStatus(currentUsage: number) {
+  let status: 'standard' | 'warning' | 'error';
+
+  if (currentUsage < USAGE_PERCENTAGE_WARNING_THRESHOLD) {
+    status = 'standard';
+  } else if (currentUsage < 100) {
+    status = 'warning';
+  } else {
+    status = 'error';
+  }
+
+  return status;
+}
+
+export function getResetUsageText(entitlement: CustomerPortalEntitlement) {
+  if (!entitlement.resetPeriod || !entitlement.usagePeriodEnd) {
+    return null;
+  }
+
+  const calculateResetDiff = (unit: 'days' | 'hours' | 'minutes') => {
+    return moment.utc(entitlement.usagePeriodEnd as MomentInput).diff(moment.utc(), unit);
+  };
+
+  switch (entitlement.resetPeriod) {
+    case EntitlementResetPeriod.Month:
+      return `Resets monthly - in ${calculateResetDiff('days')} days`;
+    case EntitlementResetPeriod.Week:
+      return `Resets weekly - in ${calculateResetDiff('days')} days`;
+    case EntitlementResetPeriod.Day:
+      return `Resets daily - in ${calculateResetDiff('hours')} hours`;
+    case EntitlementResetPeriod.Hour:
+      return `Resets hourly - in ${calculateResetDiff('minutes')} minutes`;
+    default:
+      return null;
+  }
+}

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.style.ts

@@ -0,0 +1,13 @@
+import styled from '@utils/style';
+
+export const FeatureUsageContainer = styled.div<{ $highlight: boolean; $borderColor: string }>`
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
+  border-radius: 10px;
+  row-gap: 16px;
+  height: 100%;
+
+  ${({ theme, $highlight }) => $highlight && `background-color: ${theme.stigg.palette.backgroundSection}`};
+`;

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.tsx

@@ -0,0 +1,96 @@
+import isUndefined from 'lodash/isUndefined';
+import { BillingModel, CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
+import { Typography } from '../../../common/Typography';
+import { useCustomerPortalContext } from '../../CustomerPortalContext';
+import { getResetUsageText, getUsagePercentage } from './FeatureUsage.helper';
+import { getFeatureDisplayName } from '../../../utils/getFeatureName';
+import { FeatureUsageContainer } from './FeatureUsage.style';
+import { FeatureUsageProgressBar } from './FeatureUsageProgressBar';
+import { Icon } from '../../../common/Icon';
+import { InformationTooltip } from '../../../common/InformationTooltip';
+import { LongText } from '../../../common/LongText';
+import { EntitlementCtaButton } from './EntitlementCTAButton';
+import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
+
+export type UsageBoxProps = {
+  entitlement: CustomerPortalEntitlement;
+  subscriptionPrice: CustomerPortalSubscriptionPriceFragment | undefined;
+  onManageSubscription: OnManageClick | undefined;
+  onBuyMore?: OnBuyMoreCallbackFn;
+  hasCustomSubscription: boolean;
+  canUpgradeSubscription: boolean;
+};
+
+export function FeatureUsage({
+  entitlement,
+  subscriptionPrice,
+  onManageSubscription,
+  onBuyMore,
+  hasCustomSubscription,
+  canUpgradeSubscription,
+}: UsageBoxProps) {
+  const { theme } = useCustomerPortalContext();
+
+  const hasOverageUsage = !entitlement.hasUnlimitedUsage && entitlement.currentUsage! > entitlement.usageLimit!;
+
+  if (!entitlement.feature) {
+    return null;
+  }
+
+  return (
+    <FeatureUsageContainer $highlight={!!subscriptionPrice} $borderColor={theme.borderColor}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
+        <LongText variant="body1">{entitlement.feature && getFeatureDisplayName(entitlement.feature)}</LongText>
+        {subscriptionPrice && (
+          <InformationTooltip
+            title={
+              <Typography variant="body1">
+                {subscriptionPrice.billingModel === BillingModel.PerUnit
+                  ? 'Billed for committed usage'
+                  : 'Billed for actual usage'}
+              </Typography>
+            }>
+            <Icon icon="DollarCoin" svgStrokeColor={theme.iconsColor} />
+          </InformationTooltip>
+        )}
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
+        <LongText
+          variant="body1"
+          color={hasOverageUsage ? 'error' : 'primary'}
+          data-testid={`usage-data-${entitlement.feature?.refId}`}>
+          {entitlement.currentUsage?.toLocaleString()}
+          {!entitlement.hasUnlimitedUsage &&
+            ` / ${entitlement.usageLimit?.toLocaleString()} (${getUsagePercentage(
+              entitlement.currentUsage || 0,
+              entitlement.usageLimit!,
+            )}%)`}
+        </LongText>
+
+        <EntitlementCtaButton
+          entitlement={entitlement}
+          feature={entitlement.feature}
+          onBuyMore={onBuyMore}
+          canBuyMore={!!subscriptionPrice}
+          onManageSubscription={onManageSubscription}
+          canUpgradeSubscription={canUpgradeSubscription}
+          hasCustomSubscription={hasCustomSubscription}
+        />
+      </div>
+
+      <FeatureUsageProgressBar entitlement={entitlement} />
+
+      {!entitlement.hasUnlimitedUsage &&
+      !isUndefined(entitlement.usageLimit) &&
+      !isUndefined(entitlement.currentUsage) &&
+      entitlement.resetPeriod &&
+      entitlement.usagePeriodEnd ? (
+        <Typography color="secondary">{getResetUsageText(entitlement)}</Typography>
+      ) : null}
+      {entitlement.hasUnlimitedUsage && <Typography color="secondary">In current billing period</Typography>}
+    </FeatureUsageContainer>
+  );
+}

package/src/components/customerPortal/usage/featureUsage/FeatureUsageProgressBar.tsx

@@ -0,0 +1,56 @@
+import styled from '@utils/style';
+import LinearProgress from '@mui/material/LinearProgress';
+import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import Divider from '@mui/material/Divider';
+import Color from 'color';
+import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
+
+export const StyledLinearProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $progressStatus: 'standard' | 'warning' | 'error';
+}>`
+  height: 4px;
+  background-color: ${({ theme }) => Color(theme.stigg.palette.primary).alpha(0.4).string()};
+
+  span {
+    background-color: ${({ $progressStatus, theme }) => {
+      switch ($progressStatus) {
+        case 'standard':
+          return theme.stigg.palette.primary;
+        case 'warning':
+          return theme.stigg.palette.warning;
+        case 'error':
+          return theme.stigg.palette.error;
+        default:
+          return theme.stigg.palette.primary;
+      }
+    }};
+  }
+`;
+
+export const StyledDivider = styled(Divider)`
+  border-style: dotted;
+  border-bottom-width: 2px;
+  border-color: ${({ theme }) => Color(theme.stigg.palette.outlinedRestingBorder).alpha(0.4).string()};
+`;
+
+export type FeatureUsageProgressBarProps = {
+  entitlement: CustomerPortalEntitlement;
+};
+
+export function FeatureUsageProgressBar({ entitlement }: FeatureUsageProgressBarProps) {
+  if (entitlement.hasUnlimitedUsage) {
+    return <StyledDivider />;
+  }
+
+  const usagePercentage = getUsagePercentage(entitlement.currentUsage || 0, entitlement.usageLimit!);
+  const linearProgressStatus = getUsageProgressStatus(usagePercentage);
+
+  return (
+    <StyledLinearProgress
+      $progressStatus={linearProgressStatus}
+      className={`stigg-feature-usage-progress-bar-${linearProgressStatus.toString()}`}
+      variant="determinate"
+      value={usagePercentage}
+    />
+  );
+}

package/src/components/guards/BooleanEntitlementGuard.tsx

@@ -0,0 +1,21 @@
+import { GetBooleanEntitlement } from '@stigg/js-client-sdk';
+import { useBooleanEntitlement } from '../../hooks';
+
+type BooleanEntitlementGuardProps = GetBooleanEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function BooleanEntitlementGuard({
+  noAccessComponent,
+  children,
+  ...rest
+}: BooleanEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useBooleanEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/guards/EnumEntitlementGuard.tsx

@@ -0,0 +1,17 @@
+import { GetEnumEntitlement } from '@stigg/js-client-sdk';
+import { useEnumEntitlement } from '../../hooks';
+
+type EnumEntitlementGuardProps = GetEnumEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function EnumEntitlementGuard({ noAccessComponent, children, ...rest }: EnumEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useEnumEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/guards/MeteredEntitlementGuard.tsx

@@ -0,0 +1,21 @@
+import { GetMeteredEntitlement } from '@stigg/js-client-sdk';
+import { useMeteredEntitlement } from '../../hooks';
+
+type MeteredEntitlementGuardProps = GetMeteredEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function MeteredEntitlementGuard({
+  noAccessComponent,
+  children,
+  ...rest
+}: MeteredEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useMeteredEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/guards/NumericEntitlementGuard.tsx

@@ -0,0 +1,21 @@
+import { GetNumericEntitlement } from '@stigg/js-client-sdk';
+import { useNumericEntitlement } from '../../hooks';
+
+type NumericEntitlementGuardProps = GetNumericEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function NumericEntitlementGuard({
+  noAccessComponent,
+  children,
+  ...rest
+}: NumericEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useNumericEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/hooks/index.ts

@@ -0,0 +1 @@
+export { useWaitForCheckoutCompleted, ProvisionStatus } from './useWaitForCheckoutCompleted';

package/src/components/hooks/useChargeSort.ts

@@ -0,0 +1,17 @@
+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<Price>(charges, [
+    (charge: Price) => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
+    (charge: Price) => charge.feature?.displayName,
+  ]);
+};
+
+export const useChargesSort = (charges: Price[]) => {
+  return useMemo(() => sortCharges(charges), [charges]);
+};

package/src/components/hooks/useIsScreenWiderThan.ts

@@ -0,0 +1,6 @@
+import { useMediaQuery as useMediaQueryMui } from '@mui/material';
+import { Breakpoint, mqMinWidth } from '../common/mediaQuery';
+
+export function useIsScreenWiderThan(breakpoint: Breakpoint) {
+  return useMediaQueryMui(mqMinWidth(breakpoint));
+}

package/src/components/hooks/usePagination.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { CursorPaging, PageInfoFragment } from '@stigg/js-client-sdk';
+
+export const usePagination = (
+  pageInfo: PageInfoFragment | undefined | null,
+  setCursor: (paging: CursorPaging) => void,
+  pageSize: number,
+) => {
+  const [lastVisitedPage, setLastVisitedPage] = useState(0);
+  const [pageNumber, setPageNumber] = useState(0);
+
+  const pageChangeFunc = (_: any, nextPage: number) => {
+    const newCursor: CursorPaging =
+      nextPage > pageNumber
+        ? {
+            after: pageInfo?.endCursor as string,
+            first: pageSize,
+          }
+        : {
+            before: pageInfo?.startCursor as string,
+            last: pageSize,
+          };
+    setCursor(newCursor);
+    setLastVisitedPage(pageNumber);
+    setPageNumber(nextPage);
+  };
+
+  return {
+    pageNumber,
+    lastVisitedPage,
+    pageChangeFunc,
+  };
+};

package/src/components/hooks/useWaitForCheckoutCompleted.ts

@@ -0,0 +1,65 @@
+import { Subscription } from '@stigg/js-client-sdk';
+import { useEffect, useMemo, useState } from 'react';
+import { useStiggContext } from '../../hooks/useStiggContext';
+
+function useQueryParams(paramName?: string) {
+  return useMemo(() => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    return paramName ? urlSearchParams.get(paramName) : urlSearchParams;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paramName, window.location.search]);
+}
+
+export enum ProvisionStatus {
+  IN_PROGRESS = 'IN_PROGRESS',
+  SUCCEEDED = 'SUCCEEDED',
+  FAILED = 'FAILED',
+}
+
+export const useWaitForCheckoutCompleted = ({
+  onProvisionStart,
+  onProvisionSucceeded,
+  onProvisionFailed,
+}: {
+  onProvisionStart?: () => void;
+  onProvisionSucceeded?: (subscription?: Subscription | null) => void;
+  onProvisionFailed?: (err?: any) => void;
+} = {}) => {
+  const { stigg } = useStiggContext();
+  const [provisionStatus, setProvisionStatus] = useState(ProvisionStatus.IN_PROGRESS);
+  const [isAwaitingCheckout, setIsAwaitingCheckout] = useState(false);
+  const checkoutCompleted = useQueryParams('checkoutCompleted') as string;
+
+  useEffect(() => {
+    const waitForCheckoutToComplete = async () => {
+      if (!checkoutCompleted || checkoutCompleted.toLowerCase() === 'false' || isAwaitingCheckout) {
+        return;
+      }
+
+      setIsAwaitingCheckout(true);
+      if (onProvisionStart) {
+        onProvisionStart();
+      }
+      try {
+        const subscription = await stigg.waitForCheckoutCompleted();
+        setProvisionStatus(ProvisionStatus.SUCCEEDED);
+        if (onProvisionSucceeded) {
+          onProvisionSucceeded(subscription);
+        }
+      } catch (err) {
+        console.error('Failed to wait for checkout to complete', err);
+        setProvisionStatus(ProvisionStatus.FAILED);
+        if (onProvisionFailed) {
+          onProvisionFailed(err);
+        }
+      } finally {
+        setIsAwaitingCheckout(false);
+      }
+    };
+
+    void waitForCheckoutToComplete();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stigg, checkoutCompleted]);
+
+  return { isAwaitingCheckout, provisionStatus };
+};