fix: Pricing calculator improvements (#439)

pluralsh · Mar 21, 2023 · 225e2ee · 225e2ee
1 parent ddc9426
commit 225e2ee
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/src/components/pricingcalculator/PricingCalculator.tsx b/src/components/pricingcalculator/PricingCalculator.tsx
@@ -15,13 +15,14 @@ import Costs from './costs/Costs'
 import TotalCost from './costs/TotalCost'
 
 export type PricingCalculatorProps = {
+  appsDefault?: number
   expandedDefault?: boolean
 }
 
-const PricingCalculator = forwardRef<HTMLDivElement, PricingCalculatorProps>(({ expandedDefault = false }, ref) => {
+const PricingCalculator = forwardRef<HTMLDivElement, PricingCalculatorProps>(({ appsDefault = 5, expandedDefault = false }, ref) => {
   const [expanded, setExpanded] = useState(expandedDefault)
   const [providerId, setProviderId] = useState(PROVIDERS[0].id)
-  const [apps, setApps] = useState(10)
+  const [apps, setApps] = useState(appsDefault)
   const provider = useMemo(() => PROVIDERS.find(({ id }) => id === providerId), [providerId])
   const providerCost = useMemo(() => estimateProviderCost(provider, apps), [provider, apps])
 

diff --git a/src/components/pricingcalculator/PricingCalculatorExtended.tsx b/src/components/pricingcalculator/PricingCalculatorExtended.tsx
@@ -23,13 +23,22 @@ import ClustersControl from './controls/ClustersControl'
 import Costs from './costs/Costs'
 import TotalCost from './costs/TotalCost'
 
-const PricingCalculatorExtended = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+export type PricingCalculatorProps = {
+  appsDefault?: number
+  clustersDefault?: number
+  usersDefault?: number
+  professionalDefault?: boolean
+} & CardProps
+
+const PricingCalculatorExtended = forwardRef<HTMLDivElement, PricingCalculatorProps>(({
+  appsDefault = 5, clustersDefault = 1, usersDefault = 0, professionalDefault = false, ...props
+}, ref) => {
   const [providerId, setProviderId] = useState(PROVIDERS[0].id)
-  const [clusters, setClusters] = useState(3)
-  const [apps, setApps] = useState(10)
-  const [users, setUsers] = useState(0)
-  const [professional, setProfessional] = useState(false)
-  const [enforcedPro, setEnforcedPro] = useState(false)
+  const [clusters, setClusters] = useState(clustersDefault)
+  const [apps, setApps] = useState(appsDefault)
+  const [users, setUsers] = useState(usersDefault)
+  const [enforcedPro, setEnforcedPro] = useState(users > 5)
+  const [professional, setProfessional] = useState(professionalDefault || enforcedPro)
   const provider = useMemo(() => PROVIDERS.find(({ id }) => id === providerId), [providerId])
   const providerCost = useMemo(() => estimateProviderCost(provider, apps, clusters), [provider, apps, clusters])
   const pluralCost = useMemo(() => estimatePluralCost(professional, clusters, users), [professional, clusters, users])
@@ -111,11 +120,11 @@ const PricingCalculatorExtended = forwardRef<HTMLDivElement, CardProps>((props,
               >
                 <Cost
                   cost={pluralCost?.clusters}
-                  label={`for ${clusters} clusters`}
+                  label={`for ${clusters} cluster${clusters !== 1 ? 's' : ''}`}
                 />
                 <Cost
                   cost={pluralCost?.users}
-                  label={`for ${users} users`}
+                  label={`for ${users === 0 ? '0-5' : users} users`}
                 />
               </Costs>
               <TotalCost

diff --git a/src/stories/PricingCalculator.stories.tsx b/src/stories/PricingCalculator.stories.tsx
@@ -16,5 +16,6 @@ function Template(args: any) {
 export const Default = Template.bind({})
 
 Default.args = {
+  appsDefault: 15,
   expandedDefault: true,
 }
diff --git a/src/stories/PricingCalculatorExtended.stories.tsx b/src/stories/PricingCalculatorExtended.stories.tsx
@@ -16,5 +16,9 @@ function Template(args: any) {
 export const Default = Template.bind({})
 
 Default.args = {
+  appsDefault: 5,
+  clustersDefault: 1,
+  usersDefault: 0,
+  professionalDefualt: false,
   fillLevel: 2,
 }