@stigg/react-sdk 4.4.5 → 4.4.6

package/package.json

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

package/src/components/common/TiersSelectContainer.tsx

@@ -29,11 +29,13 @@ const TierInput = styled(OutlinedInput)`
 export function TiersSelectContainer({
   componentId,
   tiers,
+  tierUnits,
   selectedTier,
   handleTierChange,
 }: {
   componentId: string;
   tiers?: PriceTierFragment[] | null;
+  tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
@@ -61,7 +63,7 @@ export function TiersSelectContainer({
           {map(tiers, (tier: PriceTierFragment) => (
             <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo.toString()}>
               <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
-                {tier.upTo}
+                {tier.upTo} {tierUnits}
               </Typography>
             </MenuItem>
           ))}

package/src/components/paywall/PlanPrice.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled/macro';
 import { BillingPeriod, PriceTierFragment } from '@stigg/js-client-sdk';
 import { PaywallPlan } from './types';
@@ -71,7 +71,7 @@ export const PlanPrice = ({
   withStartingAtRow: boolean;
   withTiersRow: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
-  setSelectedTierByFeature: (selectedTierByFeature: Record<string, PriceTierFragment>) => void;
+  setSelectedTierByFeature: React.Dispatch<React.SetStateAction<Record<string, PriceTierFragment>>>;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
@@ -79,7 +79,7 @@ export const PlanPrice = ({
   hasAnnuallyPrice: boolean;
   locale: string;
 }) => {
-  const { price, unit, tiers } = getPlanPrice(
+  const { price, unit, tiers, tierUnits } = getPlanPrice(
     plan,
     billingPeriod,
     paywallLocale,
@@ -87,31 +87,25 @@ export const PlanPrice = ({
     hasMonthlyPrice,
     selectedTierByFeature,
   );
-  const [selectedTier, setSelectedTier] = useState<PriceTierFragment>();
 
   // We currently only support prices with one tier - so we select the first one
   const tieredPrice = plan.pricePoints.find((planPrice) => {
     return planPrice.billingPeriod === billingPeriod && planPrice.isTieredPrice;
   });
   const featureId = tieredPrice ? tieredPrice.feature!.featureId : undefined;
-
-  useEffect(() => {
-    setSelectedTier(featureId ? selectedTierByFeature[featureId] : undefined);
-  }, [featureId, selectedTierByFeature]);
+  const selectedTier = featureId ? selectedTierByFeature[featureId] : undefined;
 
   const handleTierChange = (tier: PriceTierFragment) => {
-    const updatedTierByFeature: Record<string, PriceTierFragment> = {};
-    updatedTierByFeature[featureId!] = tier;
+    if (!featureId) {
+      return;
+    }
 
-    setSelectedTierByFeature(updatedTierByFeature);
+    setSelectedTierByFeature((prevState) => ({
+      ...prevState,
+      [featureId]: tier,
+    }));
   };
 
-  useEffect(() => {
-    if (tiers) {
-      handleTierChange(selectedTierByFeature[featureId!]);
-    }
-  }, []);
-
   return (
     <PlanPriceContainer className="stigg-price-text">
       <>
@@ -147,6 +141,7 @@ export const PlanPrice = ({
           <TiersSelectContainer
             componentId={`${plan.id}_${featureId}_tier`}
             tiers={tiers}
+            tierUnits={tierUnits}
             selectedTier={selectedTier}
             handleTierChange={handleTierChange}
           />