@stigg/react-sdk 5.28.3 → 5.28.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.28.3",
+  "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>