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

package/src/components/customerPortal/CustomerPortal.tsx

@@ -0,0 +1,37 @@
+import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
+import { CustomerPortalProvider } from './CustomerPortalProvider';
+import { CustomerPortalContainer } from './CustomerPortalContainer';
+import { DeepPartial } from '../../types';
+import { CustomerPortalLocalization } from './customerPortalTextOverrides';
+import { CustomerPortalTheme } from './customerPortalTheme';
+import { FilterEntitlementsFn, OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
+
+export type CustomerPortalSection =
+  | 'usage'
+  | 'addons'
+  | 'promotionalEntitlements'
+  | 'billingInformation'
+  | 'paymentDetails'
+  | 'invoices';
+
+export type CustomerPortalProps = {
+  onManageSubscription?: OnManageSubscriptionFn;
+  onBuyMore?: OnBuyMoreCallbackFn;
+  onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => Promise<void> | void;
+  onContactSupport?: () => Promise<void> | void;
+  paywallComponent?: React.ReactNode;
+  hiddenSections?: CustomerPortalSection[];
+  textOverrides?: DeepPartial<CustomerPortalLocalization>;
+  theme?: DeepPartial<CustomerPortalTheme>;
+  filterEntitlements?: FilterEntitlementsFn;
+  resourceId?: string;
+  productId?: string;
+};
+
+export function CustomerPortal({ textOverrides, theme, resourceId, productId, ...restProps }: CustomerPortalProps) {
+  return (
+    <CustomerPortalProvider textOverrides={textOverrides} theme={theme} resourceId={resourceId} productId={productId}>
+      <CustomerPortalContainer {...restProps} />
+    </CustomerPortalProvider>
+  );
+}

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import { SubscriptionsOverview } from './subscriptionOverview/SubscriptionsOverview';
+import { CustomerPortalHeader } from './CustomerPortalHeader';
+import { PaymentDetailsSection } from './billing/PaymentDetailsSection';
+import { CustomerPortalPaywall } from './paywall/CustomerPortalPaywall';
+import { useCustomerPortalContext } from './CustomerPortalContext';
+import { CustomerPortalLayout, CustomerPortalSections } from './CustomerPortal.style';
+import { CustomerPortalProps } from './CustomerPortal';
+import { InvoicesSection } from '../..';
+import { CustomerUsageData } from './usage/CustomerUsageData';
+import { CustomerPortalIntentionType } from './types';
+
+export type OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => void;
+
+export function CustomerPortalContainer({
+  onManageSubscription,
+  onBuyMore,
+  onCancelScheduledUpdates,
+  onContactSupport,
+  paywallComponent,
+  hiddenSections,
+  filterEntitlements,
+}: CustomerPortalProps) {
+  const { customerPortal, textOverrides, theme, isLoading, showWatermark } = useCustomerPortalContext();
+  const customerPortalSectionRef = useRef<HTMLDivElement>(null);
+
+  const onManageClick: OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => {
+    if (onManageSubscription) {
+      void onManageSubscription({
+        intentionType,
+        customerSubscriptions: customerPortal?.subscriptions ?? [],
+      });
+    } else {
+      customerPortalSectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  const shouldShowUsage = !hiddenSections?.some((section) => section === 'usage');
+  const shouldShowPaymentDetails = !hiddenSections?.some(
+    (section) => section === 'paymentDetails' || section === 'billingInformation',
+  );
+  const shouldShowInvoices = !hiddenSections?.some(
+    (section) => section === 'invoices' || section === 'billingInformation',
+  );
+
+  return (
+    <CustomerPortalLayout className="stigg-customer-portal-layout">
+      <CustomerPortalHeader showWatermark={showWatermark} />
+      <CustomerPortalSections className="stigg-customer-portal-sections">
+        <SubscriptionsOverview
+          onCancelScheduledUpdates={onCancelScheduledUpdates}
+          onBuyMore={onBuyMore}
+          onManageSubscription={onManageClick}
+          onContactSupport={onContactSupport}
+          hiddenSections={hiddenSections}
+          cancelScheduledUpdatesButtonTitle={textOverrides.cancelScheduledUpdatesButtonTitle}
+        />
+        {shouldShowUsage && (
+          <CustomerUsageData
+            onManageSubscription={onManageClick}
+            onBuyMore={onBuyMore}
+            filterEntitlements={filterEntitlements}
+          />
+        )}
+        <CustomerPortalPaywall
+          ref={customerPortalSectionRef}
+          paywallComponent={paywallComponent}
+          theme={theme}
+          title={textOverrides.paywallSectionTitle}
+          isLoading={!customerPortal || isLoading}
+        />
+        {shouldShowPaymentDetails && <PaymentDetailsSection />}
+        {shouldShowInvoices && <InvoicesSection />}
+      </CustomerPortalSections>
+    </CustomerPortalLayout>
+  );
+}

package/src/components/customerPortal/CustomerPortalContext.ts

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { CustomerPortal } from '@stigg/js-client-sdk';
+import { CustomerPortalLocalization } from './customerPortalTextOverrides';
+import { CustomerPortalTheme } from './customerPortalTheme';
+
+export interface CustomerPortalContextValue {
+  customerPortal?: CustomerPortal | null;
+  textOverrides: CustomerPortalLocalization;
+  theme: CustomerPortalTheme;
+  isLoading: boolean;
+  resourceId?: string;
+  currencyId?: string;
+  showWatermark: boolean;
+}
+
+export const CustomerPortalContext = React.createContext<CustomerPortalContextValue | null>(null);
+CustomerPortalContext.displayName = 'CustomerPortalContext';
+
+export const useCustomerPortalContext = (): CustomerPortalContextValue => {
+  const ctx = useContext(CustomerPortalContext);
+  if (!ctx) {
+    throw new Error(
+      'Could not find Customer portal context; You need to wrap your customer portal components in an <CustomerPortalProvider> component.',
+    );
+  }
+  return ctx;
+};
+
+export function useCheckContextExists<T>(contextType: React.Context<T>) {
+  const ctx = useContext(contextType);
+  return !!ctx;
+}

package/src/components/customerPortal/CustomerPortalHeader.tsx

@@ -0,0 +1,18 @@
+import styled from '@utils/style';
+import { PoweredByStigg } from '../common/PoweredByStigg';
+
+const CustomerPortalHeaderLayout = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+`;
+
+export function CustomerPortalHeader({ showWatermark }: { showWatermark?: boolean }) {
+  return (
+    <CustomerPortalHeaderLayout className="stigg-customer-portal-header-layout">
+      <PoweredByStigg source="customer_portal" showWatermark={showWatermark} />
+    </CustomerPortalHeaderLayout>
+  );
+}

package/src/components/customerPortal/CustomerPortalProvider.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useCustomerPortal } from './hooks/useCustomerPortal';
+import { DeepPartial } from '../../types';
+import { CustomerPortalLocalization, getResolvedCustomerPortalLocalize } from './customerPortalTextOverrides';
+import { CustomerPortalTheme, getResolvedCustomerPortalTheme } from './customerPortalTheme';
+import { SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
+import { useStiggContext } from '../..';
+import { mapCustomerPortalConfiguration } from '../common/mapExternalTheme';
+import { CustomerPortalContext } from './CustomerPortalContext';
+
+export function CustomerPortalProvider({
+  children,
+  textOverrides,
+  theme,
+  resourceId,
+  productId,
+}: {
+  children: React.ReactNode;
+  textOverrides?: DeepPartial<CustomerPortalLocalization>;
+  theme?: DeepPartial<CustomerPortalTheme>;
+  resourceId?: string;
+  productId?: string;
+}) {
+  const { customerPortalUpdatedAt } = useStiggContext();
+  const { customerPortal, isLoading, showWatermark } = useCustomerPortal({ resourceId, productId });
+  const configuration = customerPortal?.configuration
+    ? mapCustomerPortalConfiguration(customerPortal.configuration)
+    : undefined;
+  const globalTheme = useStiggTheme(configuration);
+  const customerPortalTheme = getResolvedCustomerPortalTheme(globalTheme, theme, customerPortal?.configuration);
+  const resolvedTextOverrides = getResolvedCustomerPortalLocalize(textOverrides);
+
+  return (
+    <SdkThemeProvider componentTheme={configuration}>
+      <CustomerPortalContext.Provider
+        key={customerPortalUpdatedAt?.toString()}
+        value={{
+          customerPortal,
+          isLoading,
+          showWatermark,
+          textOverrides: resolvedTextOverrides,
+          theme: customerPortalTheme,
+          resourceId,
+        }}>
+        {children}
+      </CustomerPortalContext.Provider>
+    </SdkThemeProvider>
+  );
+}

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

@@ -0,0 +1,54 @@
+import styled from '@utils/style';
+import { Typography, TypographyProps } from '../../common/Typography';
+
+export const InformationGridContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1 0 0;
+`;
+
+const InformationGridRow = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  flex-wrap: wrap;
+`;
+
+export type InformationGridProps = {
+  title: string;
+  rows: Array<{
+    classNamePrefix: string;
+    label: string;
+    value: string;
+    labelTypographyProps?: Partial<TypographyProps>;
+    valueTypographyProps?: Partial<TypographyProps>;
+  }>;
+};
+
+export function InformationGrid({ title, rows }: InformationGridProps) {
+  return (
+    <InformationGridContainer>
+      <Typography variant="h6" color="secondary" bold>
+        {title}
+      </Typography>
+      {rows.map(({ classNamePrefix, label, value, labelTypographyProps, valueTypographyProps }) => (
+        <InformationGridRow key={label}>
+          <Typography
+            className={`${classNamePrefix}-label`}
+            variant="body1"
+            color="secondary"
+            style={{ width: 80 }}
+            {...labelTypographyProps}>
+            {label}
+          </Typography>
+          <Typography className={`${classNamePrefix}-text`} variant="body1" color="secondary" {...valueTypographyProps}>
+            {value}
+          </Typography>
+        </InformationGridRow>
+      ))}
+    </InformationGridContainer>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { useCustomerPortalContext } from '../CustomerPortalContext';
+import { SectionTitle } from '../common/SectionTitle';
+import { ExternalLinkButton } from '../common/ExternalLinkButton';
+import { SectionContainer } from '../common/SectionContainer';
+import { SectionHeader } from '../common/SectionHeader';
+import { SkeletonButton } from '../common/SkeletonButton';
+
+export function InvoicesSection() {
+  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
+  const isLoadingData = !customerPortal || isLoading;
+
+  const viewInvoiceHistoryButton = isLoadingData ? (
+    <SkeletonButton />
+  ) : customerPortal?.billingPortalUrl ? (
+    <ExternalLinkButton
+      url={customerPortal.billingPortalUrl}
+      text={textOverrides.viewInvoiceHistory}
+      className="stigg-view-invoice-history-button"
+    />
+  ) : null;
+
+  if (!isLoadingData && !customerPortal?.billingPortalUrl) {
+    return null;
+  }
+
+  return (
+    <SectionContainer
+      className="stigg-invoices-section-layout"
+      $backgroundColor={theme.backgroundColor}
+      $borderColor={theme.borderColor}>
+      <SectionHeader className="stigg-invoices-section-header">
+        <SectionTitle
+          isLoading={isLoadingData}
+          className="stigg-invoices-section-title"
+          title={textOverrides.invoicesTitle}
+        />
+        {viewInvoiceHistoryButton}
+      </SectionHeader>
+    </SectionContainer>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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