@stigg/react-sdk 4.7.1 → 4.8.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.1",
+  "version": "4.8.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -122,7 +122,7 @@
     "moment": "^2.29.4",
     "react-feather": "^2.0.10",
     "react-loading-skeleton": "^3.1.0",
-    "react-lottie": "^1.2.3",
+    "lottie-react": "^2.4.0",
     "react-spinners": "^0.13.3",
     "react-switch": "^7.0.0",
     "styled-components": "^5.3.6",

package/src/components/checkout/CheckoutContainer.tsx

@@ -83,7 +83,7 @@ export function CheckoutContainer({
   onMockCheckoutPreview,
 }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
-  const [{ stiggTheme, widgetState }] = useCheckoutContext();
+  const [{ stiggTheme, widgetState, theme }] = useCheckoutContext();
   const { currentStep } = useProgressBarModel();
 
   const { isLoadingCheckoutData } = widgetState;
@@ -132,7 +132,16 @@ export function CheckoutContainer({
             colorPrimaryText: stiggTheme.palette.text.primary,
             colorTextPlaceholder: stiggTheme.palette.text.disabled,
             fontFamily: stiggTheme.typography.fontFamily,
+            colorBackground: theme?.paymentInputBackgroundColor,
+            borderRadius: theme?.paymentInputBorderRadius,
           },
+          rules: theme?.paymentInputBorderColor
+            ? {
+                '.Input': {
+                  borderColor: theme?.paymentInputBorderColor,
+                },
+              }
+            : undefined,
         },
       }}>
       <CheckoutLayout className="stigg-checkout-layout">

package/src/components/checkout/configurations/theme.ts

@@ -8,6 +8,9 @@ export type CheckoutTheme = {
   backgroundColor: string;
   borderColor: string;
   summaryBackgroundColor: string;
+  paymentInputBackgroundColor?: string;
+  paymentInputBorderColor?: string;
+  paymentInputBorderRadius?: string;
 };
 
 const defaultCheckoutTheme: CheckoutTheme = {
@@ -36,5 +39,8 @@ export function getResolvedCheckoutTheme(
       themeOverride?.summaryBackgroundColor ||
       globalPalette?.backgroundHighlight ||
       defaultCheckoutTheme.summaryBackgroundColor,
+    paymentInputBackgroundColor: themeOverride?.paymentInputBackgroundColor,
+    paymentInputBorderColor: themeOverride?.paymentInputBorderColor,
+    paymentInputBorderRadius: themeOverride?.paymentInputBorderRadius,
   };
 }

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled/macro';
 import Box from '@mui/material/Box';
 import Color from 'color';
 import React from 'react';
-import Lottie from 'react-lottie';
+import Lottie from 'lottie-react';
 import animationData from '../../../assets/lottie/checkout-success.json';
 import { Typography } from '../../common/Typography';
 import { CheckoutLocalization } from '../configurations/textOverrides';
@@ -59,15 +59,20 @@ const CheckoutSuccessText = styled(Typography)`
   animation: fadeIn 5s ease-in forwards;
 `;
 
+const StyledLottie = styled(Lottie)`
+  display: flex;
+  justify-content: center;
+
+  svg {
+    width: 350px !important;
+    height: auto !important;
+  }
+`;
+
 export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
   return (
     <CheckoutSuccessContainer className="stigg-checkout-success-container">
-      <Lottie
-        width={350}
-        height="auto"
-        isClickToPauseDisabled
-        options={{ loop: false, autoplay: true, animationData }}
-      />
+      <StyledLottie animationData={animationData} loop={false} autoplay />
       <CheckoutSuccessText variant="h1" color="primary.main">
         {checkoutLocalization.summary.checkoutSuccessText}
       </CheckoutSuccessText>

package/src/components/paywall/PlanOffering.tsx

@@ -185,7 +185,7 @@ export function PlanOffering({
 
   return (
     <PlanOfferingContainer
-      className={classNames('stigg-plan-offering-container', {
+      className={classNames(`stigg-${plan.id}`, 'stigg-plan-offering-container', {
         'stigg-current-plan': plan.isCurrentCustomerPlan,
       })}
       $isHighlighted={isHighlighted}