@stigg/react-sdk 4.4.0-beta.4 → 4.4.0-beta.5

package/package.json

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

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

@@ -37,6 +37,11 @@ export const usePreviewSubscriptionAction = () => {
       let subscriptionPreview: SubscriptionPreview | null = null;
       let errorMessage: string | null = null;
 
+      const isValid = !subscription.billableFeatures.some(({ quantity }) => quantity === null);
+      if (!isValid) {
+        return { subscriptionPreview };
+      }
+
       try {
         if (customer?.id && plan?.id) {
           const previewSubscriptionProps: PreviewSubscription = {
@@ -92,7 +97,9 @@ export const usePreviewSubscription = () => {
       setIsFetchingSubscriptionPreview(true);
 
       const { subscriptionPreview } = await previewSubscriptionAction();
-      setSubscriptionPreview(subscriptionPreview);
+      if (subscriptionPreview) {
+        setSubscriptionPreview(subscriptionPreview);
+      }
 
       setIsFetchingSubscriptionPreview(false);
     };

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -33,43 +33,36 @@ const StyledPlanCharge = styled.div`
 
 export function PlanCharge({
   charge,
+  isValid,
   setBillableFeature,
   billableFeature,
   onValidationChange,
 }: {
   charge: Price;
+  isValid: boolean;
   billableFeature?: BillableFeatureInput;
   setBillableFeature: UsePlanStepModel['setBillableFeature'];
   onValidationChange: ({ featureId, isValid }: { featureId: string; isValid: boolean }) => void;
 }) {
-  const [isValid, setIsValid] = React.useState(true);
   const featureId = charge.feature?.featureId;
   const isBaseCharge = !featureId;
   const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
   const displayName = isBaseCharge ? 'Base charge' : charge.feature?.displayName;
   const hasQuantityRestrictions = !!(charge?.minUnitQuantity || charge?.maxUnitQuantity);
 
-  useEffect(() => {
-    if (!featureId) {
-      return;
-    }
-
-    onValidationChange({ featureId, isValid });
-  }, [featureId, isValid, onValidationChange]);
-
   const handleQuantityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (isBaseCharge || !featureId) return;
 
     const value = event?.target?.value ? Number(event?.target?.value) : charge.minUnitQuantity;
     if (!value || value <= 0) {
-      setIsValid(false);
+      onValidationChange({ featureId, isValid: false });
       // Reset the input value to null
       // @ts-ignore
       setBillableFeature(featureId, null);
       return;
     }
 
-    setIsValid(true);
+    onValidationChange({ featureId, isValid: true });
     const quantity = getValidPriceQuantity(charge, value);
     setBillableFeature(featureId, quantity);
   };
@@ -112,7 +105,7 @@ export function PlanCharge({
         error={!isValid}
         helperText={!isValid ? 'Not a valid value' : ''}
         FormHelperTextProps={{ sx: { margin: '4px' } }}
-        value={billableFeature?.quantity || charge.minUnitQuantity}
+        value={billableFeature?.quantity || charge.minUnitQuantity || ''}
         onChange={handleQuantityChange}
       />
     );
@@ -142,7 +135,12 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
   const { billableFeatures, setBillableFeature } = usePlanStepModel();
   const { setIsDisabled } = useProgressBarModel();
   const planCharges = useChargesSort(plan?.pricePoints?.filter((p) => p.billingPeriod === billingPeriod) || []);
-  const [chargesValidation, setChargesValidation] = useState({});
+  const [chargesValidation, setChargesValidation] = useState(
+    planCharges?.reduce<Record<string, boolean>>((acc, curr) => {
+      acc[curr.feature?.featureId || 'base-charge'] = true;
+      return acc;
+    }, {}),
+  );
 
   useEffect(() => {
     const isDisabled = Object.values(chargesValidation).some((x) => !x);
@@ -159,6 +157,7 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
             charge={charge}
             setBillableFeature={setBillableFeature}
             billableFeature={billableFeature}
+            isValid={chargesValidation[charge.feature?.featureId || 'base-charge']}
             onValidationChange={({ featureId, isValid }: { featureId: string; isValid: boolean }) =>
               setChargesValidation((prev) => ({ ...prev, [featureId]: isValid }))
             }