@stigg/react-sdk 5.28.2 → 5.28.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.28.2",
+  "version": "5.28.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -83,7 +83,7 @@ export function CheckoutContainer({
   onMockCheckoutPreview,
 }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
-  const [{ stiggTheme, widgetState, theme }] = useCheckoutContext();
+  const [{ stiggTheme, widgetState, theme, isWidgetWatermarkEnabled }] = useCheckoutContext();
   const { currentStep } = useProgressBarModel();
 
   const { isLoadingCheckoutData } = widgetState;
@@ -151,7 +151,7 @@ export function CheckoutContainer({
         <CheckoutContent>
           <CheckoutPanel>{isLoadingCheckoutData ? <ContentLoadingSkeleton /> : checkoutContent}</CheckoutPanel>
           {isLoadingCheckoutData ? (
-            <CheckoutSummarySkeleton />
+            <CheckoutSummarySkeleton isWidgetWatermarkEnabled={isWidgetWatermarkEnabled} />
           ) : (
             <CheckoutSummary
               disablePromotionCode={disablePromotionCode}
@@ -160,6 +160,7 @@ export function CheckoutContainer({
               onCheckoutCompleted={onCheckoutCompleted}
               isFreeDowngrade={isFreeDowngrade}
               onMockCheckoutPreview={onMockCheckoutPreview}
+              isWidgetWatermarkEnabled={isWidgetWatermarkEnabled}
             />
           )}
         </CheckoutContent>

package/src/components/checkout/CheckoutProvider.tsx

@@ -35,6 +35,7 @@ export interface CheckoutContextState {
   addonsStep: AddonsStepState;
   paymentStep: PaymentStepState;
   widgetState: WidgetState;
+  isWidgetWatermarkEnabled: boolean;
 }
 
 export const CheckoutContext = React.createContext<
@@ -101,7 +102,12 @@ export function CheckoutProvider({
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
-  const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode, onMockCheckoutState });
+  const { checkout, isLoading, isWidgetWatermarkEnabled } = useLoadCheckout({
+    resourceId,
+    planId,
+    billingCountryCode,
+    onMockCheckoutState,
+  });
   const configuration: CustomizedTheme = checkout?.configuration
     ? mapCheckoutConfiguration(checkout.configuration)
     : { typography: mapTypography(defaultCheckoutTypography) };
@@ -147,6 +153,7 @@ export function CheckoutProvider({
       paymentStep,
       resourceId: checkout?.resource?.id,
       widgetState: { readOnly: false, isValid: true, isLoadingCheckoutData: isLoading },
+      isWidgetWatermarkEnabled,
     };
 
     return initialState;

package/src/components/checkout/hooks/useLoadCheckout.ts

@@ -43,5 +43,6 @@ export function useLoadCheckout({ planId, resourceId, billingCountryCode, onMock
   return {
     checkout,
     isLoading,
+    isWidgetWatermarkEnabled: stigg.isWidgetWatermarkEnabled,
   };
 }

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

@@ -110,7 +110,8 @@ export const CheckoutSummary = ({
   disableSuccessAnimation,
   isFreeDowngrade,
   onMockCheckoutPreview,
-}: CheckoutContainerProps & { isFreeDowngrade: boolean }) => {
+  isWidgetWatermarkEnabled,
+}: CheckoutContainerProps & { isFreeDowngrade: boolean; isWidgetWatermarkEnabled: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
   const { setErrorMessage } = usePaymentStepModel();
   const progressBar = useProgressBarModel();
@@ -415,7 +416,7 @@ export const CheckoutSummary = ({
       </SummaryCard>
       <PoweredByStigg
         source="checkout"
-        showWatermark
+        showWatermark={isWidgetWatermarkEnabled}
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
       {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (

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

@@ -3,7 +3,7 @@ import { PoweredByStigg } from '../../common/PoweredByStigg';
 import { SummaryCard, SummaryContainer } from './CheckoutSummary';
 import { FlexedSkeleton, Skeleton, SkeletonsContainer } from '../components/Skeletons.style';
 
-export const CheckoutSummarySkeleton = () => {
+export const CheckoutSummarySkeleton = ({ isWidgetWatermarkEnabled }: { isWidgetWatermarkEnabled: boolean }) => {
   return (
     <SummaryContainer>
       <SummaryCard>
@@ -31,7 +31,7 @@ export const CheckoutSummarySkeleton = () => {
       </SummaryCard>
       <PoweredByStigg
         source="checkout"
-        showWatermark
+        showWatermark={isWidgetWatermarkEnabled}
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
     </SummaryContainer>

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import moment from 'moment';
+import { Box } from '@mui/material';
 import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
@@ -35,7 +36,7 @@ const RemainingCreditsCaption = ({
   });
 
   return (
-    <Typography variant="body1" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-remaining-credits">
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {checkoutLocalization.summary.creditsForUnusedTimeText({ credits })}
       </WithSkeleton>
@@ -60,7 +61,7 @@ const ScheduledUpdatesCaption = ({
       : checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod;
 
   return (
-    <Typography variant="body1" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-scheduled-updates">
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {changesWillApplyText}
       </WithSkeleton>
@@ -125,7 +126,7 @@ const NextBillingCaption = ({
   text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${nextBillingDate}, unless you cancel.`;
 
   return (
-    <Typography variant="body1" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-next-billing">
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {text}
       </WithSkeleton>
@@ -135,12 +136,12 @@ const NextBillingCaption = ({
 
 export function CheckoutCaptions(props: CheckoutCaptionProps) {
   return (
-    <>
+    <Box className="stigg-checkout-summary-captions">
       <RemainingCreditsCaption {...props} />
 
       <ScheduledUpdatesCaption {...props} />
 
       <NextBillingCaption {...props} />
-    </>
+    </Box>
   );
 }