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

package/src/components/customerPortal/billing/PaymentDetailsSection.tsx

@@ -1,140 +0,0 @@
-import { ReactElement } from 'react';
-import Divider from '@mui/material/Divider';
-import { padStart } from 'lodash';
-import Skeleton from 'react-loading-skeleton';
-import { useCustomerPortalContext } from '../CustomerPortalContext';
-import { SectionTitle } from '../common/SectionTitle';
-import { SectionContainer } from '../common/SectionContainer';
-import { ExternalLinkButton } from '../common/ExternalLinkButton';
-import { InformationGrid, InformationGridContainer } from './InformationGrid';
-import { SectionHeader } from '../common/SectionHeader';
-import { SkeletonButton } from '../common/SkeletonButton';
-import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
-
-export const EMPTY_CHAR = '-';
-
-export function PaymentDetailsSection() {
-  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
-  const isScreenWiderThanMd = useIsScreenWiderThan('md');
-  const { billingInformation } = customerPortal || {};
-  const isLoadingData = !billingInformation || isLoading;
-
-  const items: ReactElement[] = [];
-
-  if (isLoadingData) {
-    items.push(
-      ...[
-        <InformationGridContainer key="information-loading-data-top">
-          <Skeleton width={220} height={12} />
-          <Skeleton width={220} height={12} />
-          <Skeleton width={220} height={12} />
-        </InformationGridContainer>,
-        <Divider
-          key="information-loading-data-divider"
-          orientation="vertical"
-          style={{ minHeight: 93, display: isScreenWiderThanMd ? 'block' : 'none' }}
-        />,
-        <InformationGridContainer key="information-loading-data-bottom">
-          <Skeleton width={220} height={12} />
-          <Skeleton width={220} height={12} />
-          <Skeleton width={220} height={12} />
-        </InformationGridContainer>,
-      ],
-    );
-  } else {
-    items.push(
-      <InformationGrid
-        key="information-billing-data-billed-to"
-        title="Billed to"
-        rows={[
-          {
-            classNamePrefix: 'stigg-customer-name',
-            label: 'Name',
-            value: billingInformation?.name || EMPTY_CHAR,
-            valueTypographyProps: billingInformation?.name ? {} : { color: 'disabled' },
-          },
-          {
-            classNamePrefix: 'stigg-customer-email',
-            label: 'Email',
-            value: billingInformation?.email || EMPTY_CHAR,
-            valueTypographyProps: billingInformation?.email ? {} : { color: 'disabled' },
-          },
-        ]}
-      />,
-    );
-
-    if (
-      billingInformation?.defaultPaymentMethodId &&
-      billingInformation.defaultPaymentMethodLast4Digits &&
-      billingInformation.defaultPaymentExpirationMonth &&
-      billingInformation.defaultPaymentExpirationYear
-    ) {
-      items.unshift(
-        <Divider
-          key="information-billing-data-divider"
-          orientation="vertical"
-          style={{ minHeight: 93, display: isScreenWiderThanMd ? 'block' : 'none' }}
-        />,
-      );
-      items.unshift(
-        <InformationGrid
-          key="information-billing-data-payment-method"
-          title="Payment method"
-          rows={[
-            {
-              classNamePrefix: 'stigg-credit-card',
-              label: 'Card',
-              value: `Ending in ${billingInformation.defaultPaymentMethodLast4Digits}`,
-            },
-            {
-              classNamePrefix: 'stigg-credit-card-expiration',
-              label: 'Expires',
-              value: `${padStart(billingInformation.defaultPaymentExpirationMonth.toString(), 2, '0')}/${
-                billingInformation.defaultPaymentExpirationYear
-              }`,
-            },
-          ]}
-        />,
-      );
-    }
-  }
-
-  if (
-    !isLoadingData &&
-    !billingInformation?.name &&
-    !billingInformation?.email &&
-    !billingInformation?.defaultPaymentMethodId
-  ) {
-    return null;
-  }
-
-  const editButton = isLoadingData ? (
-    <SkeletonButton />
-  ) : customerPortal?.billingPortalUrl ? (
-    <ExternalLinkButton
-      url={customerPortal.billingPortalUrl}
-      text={textOverrides.editPaymentDetails}
-      className="stigg-edit-payment-details-button"
-    />
-  ) : null;
-
-  return (
-    <SectionContainer
-      className="stigg-payment-details-section-layout"
-      $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}>
-      <SectionHeader className="stigg-payment-details-section-header">
-        <SectionTitle
-          isLoading={isLoadingData}
-          className="stigg-payment-details-section-title"
-          title="Payment details"
-        />
-        {editButton}
-      </SectionHeader>
-
-      <div style={{ display: 'flex', alignItems: 'stretch', gap: isScreenWiderThanMd ? 64 : 32, flexWrap: 'wrap' }}>
-        {items}
-      </div>
-    </SectionContainer>
-  );
-}

package/src/components/customerPortal/common/ExternalLinkButton.tsx

@@ -1,34 +0,0 @@
-import styled from '@utils/style';
-import { ExternalLink as ExternalLinkIcon } from 'react-feather';
-import { Typography } from '../../common/Typography';
-import { StyledButton } from './StyledButton';
-
-const ExternalLinkText = styled(Typography)`
-  text-transform: none;
-`;
-
-const LinkIcon = styled(ExternalLinkIcon)`
-  color: ${({ theme }) => theme.stigg.palette.primary};
-`;
-
-export type ExternalLinkButtonProps = {
-  text: string;
-  url: string;
-  className: string;
-};
-
-export function ExternalLinkButton({ text, url, className }: ExternalLinkButtonProps) {
-  const onClick = () => {
-    window.open(url, '_blank');
-  };
-
-  return (
-    <StyledButton
-      className={className}
-      variant="outlined"
-      startIcon={<LinkIcon size={20} strokeWidth={2.5} />}
-      onClick={onClick}>
-      <ExternalLinkText color="primary.main">{text}</ExternalLinkText>
-    </StyledButton>
-  );
-}

package/src/components/customerPortal/common/SectionContainer.tsx

@@ -1,22 +0,0 @@
-import styled from '@utils/style';
-import { mq } from '../../common/mediaQuery';
-
-export const SectionContainer = styled.div<{ $backgroundColor: string; $borderColor: string }>`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  background-color: ${({ $backgroundColor }) => $backgroundColor};
-  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
-
-  padding: 16px;
-  ${mq.sm} {
-    padding: 32px;
-  }
-  ${mq.md} {
-    padding: 48px;
-  }
-  ${mq.lg} {
-    padding: 64px;
-  }
-`;

package/src/components/customerPortal/common/SectionHeader.ts

@@ -1,15 +0,0 @@
-import styled from '@utils/style';
-
-export const SectionHeader = styled.div<{ $disableMargin?: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  ${({ $disableMargin }) =>
-    !$disableMargin &&
-    `
-    &:not(:last-child) {
-      margin-bottom: 32px;
-    }
-  `};
-`;

package/src/components/customerPortal/common/SectionTitle.tsx

@@ -1,23 +0,0 @@
-import Skeleton from 'react-loading-skeleton';
-import { Typography } from '../../common/Typography';
-import { useCustomerPortalContext } from '../CustomerPortalContext';
-
-export type SectionTitleProps = {
-  title: string;
-  className: string;
-  isLoading?: boolean;
-};
-
-export function SectionTitle({ title, className, isLoading }: SectionTitleProps) {
-  const { theme } = useCustomerPortalContext();
-
-  if (isLoading) {
-    return <Skeleton width={120} />;
-  }
-
-  return (
-    <Typography className={className} overrideColor={theme.sectionTitleColor} variant="h3" bold>
-      {title}
-    </Typography>
-  );
-}

package/src/components/customerPortal/common/SkeletonButton.tsx

@@ -1,5 +0,0 @@
-import Skeleton from 'react-loading-skeleton';
-
-export function SkeletonButton() {
-  return <Skeleton width={220} height={42} />;
-}

package/src/components/customerPortal/common/StyledButton.tsx

@@ -1,13 +0,0 @@
-import styled from '@utils/style';
-import MuiButton from '@mui/material/Button';
-
-export const StyledButton = styled(MuiButton)`
-  border-radius: 10px;
-  padding: 8px 16px;
-  text-transform: none;
-
-  &,
-  &:hover {
-    border-color: ${({ theme }) => theme.stigg.palette.outlinedRestingBorder};
-  }
-`;

package/src/components/customerPortal/customerPortalTextOverrides.ts

@@ -1,39 +0,0 @@
-import merge from 'lodash/merge';
-import { DeepPartial } from '../../types';
-
-export type CustomerPortalLocalization = {
-  manageSubscription: string;
-  usageTabTitle: string;
-  addonsTabTitle: string;
-  promotionsTabTitle: string;
-  promotionsSubtitle: string;
-  contactSupportTitle: string;
-  contactSupportLink: string;
-  editBilling: string;
-  invoicesTitle: string;
-  viewInvoiceHistory: string;
-  editPaymentDetails: string;
-  paywallSectionTitle: string;
-  cancelScheduledUpdatesButtonTitle: string;
-};
-
-export function getResolvedCustomerPortalLocalize(
-  localizeOverride?: DeepPartial<CustomerPortalLocalization>,
-): CustomerPortalLocalization {
-  const customerPortalDefaultLocalization: CustomerPortalLocalization = {
-    manageSubscription: 'Manage',
-    usageTabTitle: 'Usage',
-    addonsTabTitle: 'Add-ons',
-    promotionsTabTitle: 'Promotions',
-    promotionsSubtitle: 'You were granted access to additional functionality at no additional cost.',
-    contactSupportTitle: 'Have questions about your subscription?',
-    contactSupportLink: 'Contact support',
-    editBilling: 'Edit billing details',
-    invoicesTitle: 'Invoices',
-    viewInvoiceHistory: 'View invoice history',
-    editPaymentDetails: 'Edit',
-    paywallSectionTitle: 'Plans',
-    cancelScheduledUpdatesButtonTitle: 'Cancel',
-  };
-  return merge(customerPortalDefaultLocalization, localizeOverride);
-}

package/src/components/customerPortal/customerPortalTheme.ts

@@ -1,35 +0,0 @@
-import { CustomerPortalConfiguration } from '@stigg/js-client-sdk';
-import { StiggTheme } from '../../theme/types';
-import { DeepPartial } from '../../types';
-
-export type CustomerPortalTheme = {
-  sectionTitleColor: string;
-  planNameColor: string;
-  backgroundColor: string;
-  borderColor: string;
-  listItemBackgroundColor: string;
-  tabMaxHeight: string;
-  iconsColor?: string;
-  iconsBackgroundColor?: string;
-};
-
-export function getResolvedCustomerPortalTheme(
-  globalTheme: StiggTheme,
-  themeOverride?: DeepPartial<CustomerPortalTheme>,
-  remoteConfiguration?: CustomerPortalConfiguration | null,
-) {
-  const customerPortalDefaultTheme: CustomerPortalTheme = {
-    sectionTitleColor: themeOverride?.sectionTitleColor || globalTheme.palette.text.secondary,
-    planNameColor: themeOverride?.planNameColor || globalTheme.palette.text.primary,
-    backgroundColor: themeOverride?.backgroundColor || remoteConfiguration?.palette?.backgroundColor || 'white',
-    borderColor: themeOverride?.borderColor || remoteConfiguration?.palette?.borderColor || 'rgba(0, 30, 108, 0.15)',
-    listItemBackgroundColor: themeOverride?.backgroundColor || remoteConfiguration?.palette?.backgroundColor || 'white',
-    tabMaxHeight: themeOverride?.tabMaxHeight || '380px',
-
-    // add icons background color and apply to scheduled updates and customer support icons
-    iconsColor: themeOverride?.iconsColor || remoteConfiguration?.palette?.iconsColor || undefined,
-    iconsBackgroundColor: themeOverride?.iconsBackgroundColor,
-  };
-
-  return customerPortalDefaultTheme;
-}

package/src/components/customerPortal/hooks/useCustomerPortal.ts

@@ -1,39 +0,0 @@
-import { CustomerPortal } from '@stigg/js-client-sdk';
-import { useEffect, useState } from 'react';
-import logger from '../../../services/logger';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-
-type UseCustomerPortalProps = {
-  resourceId?: string;
-  productId?: string;
-};
-
-export function useCustomerPortal({ resourceId, productId }: UseCustomerPortalProps) {
-  const { stigg, customerPortalUpdatedAt } = useStiggContext();
-  const [isLoading, setIsLoading] = useState(false);
-  const [customerPortal, setCustomerPortal] = useState<CustomerPortal | null>();
-
-  useEffect(() => {
-    const loadCustomerPortal = async () => {
-      if (stigg.isCustomerLoaded) {
-        try {
-          setIsLoading(true);
-          const customerPortalData = await stigg.getCustomerPortal({ resourceId, productId });
-          setCustomerPortal(customerPortalData);
-        } catch (err) {
-          logger.error(`Failed to load customer portal ${(err as any)?.message}`, err as Error);
-        } finally {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    void loadCustomerPortal();
-  }, [stigg, stigg.isCustomerLoaded, customerPortalUpdatedAt, resourceId, productId]);
-
-  return {
-    customerPortal,
-    showWatermark: stigg.getShowWatermark(),
-    isLoading,
-  };
-}

package/src/components/customerPortal/index.ts

@@ -1,16 +0,0 @@
-export { CustomerPortal } from './CustomerPortal';
-export type { CustomerPortalProps, CustomerPortalSection } from './CustomerPortal';
-export { SubscriptionsOverview } from './subscriptionOverview/SubscriptionsOverview';
-export type { SubscriptionsOverviewProps } from './subscriptionOverview/SubscriptionsOverview';
-export { PaymentDetailsSection } from './billing/PaymentDetailsSection';
-export { InvoicesSection } from './billing/InvoicesSection';
-export { CustomerUsageData } from './usage/CustomerUsageData';
-export type { CustomerUsageDataProps } from './usage/CustomerUsageData';
-export { AddonsList } from './subscriptionOverview/tabs/AddonsList';
-export { Promotions } from './subscriptionOverview/tabs/Promotions';
-export { CustomerPortalProvider } from './CustomerPortalProvider';
-export { useCustomerPortalContext, CustomerPortalContext, useCheckContextExists } from './CustomerPortalContext';
-export type { CustomerPortalContextValue } from './CustomerPortalContext';
-export type { CustomerPortalLocalization } from './customerPortalTextOverrides';
-export type { CustomerPortalTheme } from './customerPortalTheme';
-export * from './types';

package/src/components/customerPortal/paywall/CustomerPortalPaywall.style.ts

@@ -1,33 +0,0 @@
-import styled from '@utils/style';
-import { STIGG_WATERMARK_CLASSNAME } from '../../common/PoweredByStigg';
-import { SectionContainer } from '../common/SectionContainer';
-
-export const CustomerPortalPaywallLayout = styled(SectionContainer)<{
-  $backgroundColor: string;
-  $borderColor: string;
-}>`
-  position: relative;
-
-  .stigg-paywall-layout {
-    width: 100%;
-  }
-
-  .stigg-paywall-plans-layout {
-    flex-wrap: nowrap;
-    width: 100%;
-    overflow-x: auto;
-    justify-content: unset;
-    padding: 10px 0px 0px 0px;
-  }
-
-  .stigg-paywall-plans-layout .stigg-plan-offering-container:first-of-type {
-    margin-left: auto;
-  }
-  .stigg-paywall-plans-layout .stigg-plan-offering-container:last-child {
-    margin-right: auto;
-  }
-
-  .${STIGG_WATERMARK_CLASSNAME} {
-    display: none;
-  }
-`;

package/src/components/customerPortal/paywall/CustomerPortalPaywall.tsx

@@ -1,36 +0,0 @@
-import { forwardRef, ReactNode } from 'react';
-import { CustomerPortalTheme } from '../customerPortalTheme';
-import { CustomerPortalPaywallLayout } from './CustomerPortalPaywall.style';
-import { SectionTitle } from '../common/SectionTitle';
-import { SectionHeader } from '../common/SectionHeader';
-
-type CustomerPortalPaywallProps = {
-  paywallComponent?: ReactNode;
-  theme: CustomerPortalTheme;
-  title: string;
-  isLoading: boolean;
-};
-
-export const CustomerPortalPaywall = forwardRef<HTMLDivElement, CustomerPortalPaywallProps>(
-  ({ paywallComponent, theme, title, isLoading }, ref) => {
-    if (!paywallComponent) {
-      return null;
-    }
-
-    return (
-      <CustomerPortalPaywallLayout
-        className="stigg-customer-portal-paywall-section"
-        ref={ref}
-        $backgroundColor={theme.backgroundColor}
-        $borderColor={theme.borderColor}>
-        <SectionHeader className="stigg-customer-portal-paywall-header">
-          <SectionTitle isLoading={isLoading} className="stigg-customer-portal-paywall-section-title" title={title} />
-        </SectionHeader>
-
-        {paywallComponent}
-      </CustomerPortalPaywallLayout>
-    );
-  },
-);
-
-CustomerPortalPaywall.displayName = 'CustomerPortalPaywall';

package/src/components/customerPortal/subscriptionOverview/ContactCustomerSupport.tsx

@@ -1,50 +0,0 @@
-import styled from '@utils/style';
-import Button from '@mui/material/Button';
-import { Typography } from '../../common/Typography';
-
-const ContactCustomerSupportLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  gap: 8px;
-`;
-
-const ContactSupportButton = styled(Button)`
-  width: fit-content;
-  &.MuiButton-root {
-    padding: 0;
-    &:hover {
-      background: none;
-    }
-  }
-`;
-
-type ContactCustomerSupportProps = {
-  onContactSupport?: () => void;
-  label: string;
-  linkLabel: string;
-};
-
-export function ContactCustomerSupport({ onContactSupport, label, linkLabel }: ContactCustomerSupportProps) {
-  const contactSupportText = (
-    <Typography color={onContactSupport ? 'primary.main' : 'secondary'}>{linkLabel}</Typography>
-  );
-  return (
-    <ContactCustomerSupportLayout className="stigg-contact-support-layout">
-      <Typography className="stigg-contact-support-label" color="secondary">
-        {label}
-      </Typography>
-      {onContactSupport ? (
-        <ContactSupportButton
-          className="stigg-contact-support-button"
-          style={{ textTransform: 'none' }}
-          variant="text"
-          onClick={onContactSupport}>
-          {contactSupportText}
-        </ContactSupportButton>
-      ) : (
-        contactSupportText
-      )}
-    </ContactCustomerSupportLayout>
-  );
-}

package/src/components/customerPortal/subscriptionOverview/SubscriptionOverviewLoader.tsx

@@ -1,28 +0,0 @@
-import styled from '@utils/style';
-import Skeleton from 'react-loading-skeleton';
-import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
-
-const SkeletonLayout = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-`;
-
-const SkeletonLayoutLeft = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-`;
-
-export function SubscriptionOverviewLoader() {
-  const isScreenWiderThanMd = useIsScreenWiderThan('md');
-  return (
-    <SkeletonLayout className="stigg-subscription-overview-skeleton-layout">
-      <SkeletonLayoutLeft>
-        <Skeleton width={120} />
-        <Skeleton width={120} />
-      </SkeletonLayoutLeft>
-      <Skeleton width={isScreenWiderThanMd ? 295 : 260} height={193} />
-    </SkeletonLayout>
-  );
-}

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -1,106 +0,0 @@
-import { CustomerPortalSubscription, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
-import { SubscriptionsOverviewHeader } from './SubscriptionsOverviewHeader';
-import { SubscriptionTabs } from './tabs/SubscriptionTabs';
-import { useCustomerPortalContext } from '../CustomerPortalContext';
-import { SubscriptionOverviewLoader } from './SubscriptionOverviewLoader';
-import { CustomerPortalSection } from '../CustomerPortal';
-import { SubscriptionScheduledUpdatesAlert } from './subscriptionScheduledUpdates/SubscriptionScheduledUpdatesAlert';
-import { SectionContainer } from '../common/SectionContainer';
-import { UpcomingBilling } from './upcomingBilling/UpcomingBilling';
-import { SubscriptionView } from './subscriptionView/SubscriptionView';
-import { ChargeList } from './charges/ChargeList';
-import { OnBuyMoreCallbackFn } from '../types';
-import { OnManageClick } from '../CustomerPortalContainer';
-
-export type SubscriptionsOverviewProps = {
-  onManageSubscription: OnManageClick;
-  onBuyMore?: OnBuyMoreCallbackFn;
-  onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => void;
-  onContactSupport?: () => void;
-  hiddenSections?: CustomerPortalSection[];
-  cancelScheduledUpdatesButtonTitle: string;
-};
-
-export function SubscriptionsOverview({
-  onManageSubscription,
-  onBuyMore,
-  onCancelScheduledUpdates,
-  onContactSupport,
-  hiddenSections,
-  cancelScheduledUpdatesButtonTitle,
-}: SubscriptionsOverviewProps) {
-  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
-  const isLoadingData = isLoading || !customerPortal;
-  const { subscriptions, entitlements, canUpgradeSubscription } = customerPortal || {};
-
-  const activeSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.Active);
-  const trialSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.InTrial);
-  const hasCustomSubscription = activeSubscription?.pricingType === PricingType.Custom;
-  const mainSubscription = activeSubscription || trialSubscription;
-
-  return (
-    <SectionContainer
-      className="stigg-customer-portal-subscriptions-overview"
-      $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}>
-      {!isLoadingData && activeSubscription && activeSubscription.scheduledUpdates && (
-        <SubscriptionScheduledUpdatesAlert
-          theme={theme}
-          subscription={activeSubscription}
-          onCancelScheduledUpdates={onCancelScheduledUpdates}
-          cancelScheduledUpdatesButtonTitle={cancelScheduledUpdatesButtonTitle}
-        />
-      )}
-
-      {isLoadingData || !mainSubscription ? (
-        <SubscriptionOverviewLoader />
-      ) : (
-        <div
-          className="stigg-overview-layout"
-          style={{ display: 'flex', alignItems: 'flex-start', gap: 64, flexWrap: 'wrap' }}>
-          <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
-            <SubscriptionsOverviewHeader
-              onManageSubscription={onManageSubscription}
-              hideManageButton={hasCustomSubscription}
-              textOverrides={textOverrides}
-            />
-
-            <SubscriptionView
-              mainSubscription={mainSubscription}
-              trialSubscription={trialSubscription}
-              theme={theme}
-              onManageSubscription={onManageSubscription}
-            />
-
-            {activeSubscription && entitlements && (
-              <ChargeList
-                subscription={activeSubscription}
-                entitlements={entitlements}
-                onBuyMore={onBuyMore}
-                onManageSubscription={onManageSubscription}
-                canUpgradeSubscription={!!canUpgradeSubscription}
-                hasCustomSubscription={hasCustomSubscription}
-              />
-            )}
-
-            <SubscriptionTabs
-              customerPortal={customerPortal}
-              hiddenSections={hiddenSections}
-              textOverrides={textOverrides}
-              theme={theme}
-            />
-          </div>
-
-          <div style={{ display: 'flex', flexDirection: 'column', width: 319, gap: 24 }}>
-            <UpcomingBilling
-              subscription={mainSubscription}
-              theme={theme}
-              onContactSupport={onContactSupport}
-              textOverrides={textOverrides}
-            />
-          </div>
-        </div>
-      )}
-    </SectionContainer>
-  );
-}