fix: use reqs per month pretty version

microlinkhq · Sep 28, 2020 · 6a052ae · 6a052ae
1 parent 46c056c
commit 6a052ae
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/src/components/elements/PricePicker.js b/src/components/elements/PricePicker.js
@@ -6,10 +6,14 @@ const BASE_PLAN_PRICE = 24
 
 const MONTH_DAYS = 28
 
-const createReqsLabels = reqsPerDay => ({
-  reqsPerMonth: formatNumber(reqsPerDay * MONTH_DAYS),
-  monthlyPrice: calculateMonthlyPrice(reqsPerDay)
-})
+const createReqsLabels = reqsPerDay => {
+  const reqsPerMonth = formatNumber(reqsPerDay * MONTH_DAYS)
+  return {
+    reqsPerMonth,
+    reqsPerMonthPretty: reqsPerMonth.replace(',000', 'K'),
+    monthlyPrice: calculateMonthlyPrice(reqsPerDay)
+  }
+}
 
 const calculateMonthlyPrice = reqsPerDay =>
   (reqsPerDay / 1000) * BASE_PLAN_PRICE
@@ -31,23 +35,23 @@ export default props => {
   const [currentPlan, setCurrentPlan] = useState(DEFAULT_PLAN)
 
   const handleChange = event => {
-    const reqsPerMonth = event.target.value
-    const newPlan = PLANS.find(plan => plan.reqsPerMonth === reqsPerMonth)
+    const reqsPerMonthPretty = event.target.value
+    const newPlan = PLANS.find(
+      plan => plan.reqsPerMonthPretty === reqsPerMonthPretty
+    )
     setCurrentPlan(newPlan)
     props.onChange(newPlan)
   }
 
   return (
     <Select
-      value={currentPlan.reqsPerMonth}
+      value={currentPlan.reqsPerMonthPretty}
       onChange={handleChange}
-      selected={currentPlan.reqsPerMonth}
+      selected={currentPlan.reqsPerMonthPretty}
       mb={1}
     >
       {Object.keys(PLANS).map(plan => (
-        <option key={plan}>
-          {PLANS[plan].reqsPerMonth.replace(',000', 'K')}
-        </option>
+        <option key={plan} children={PLANS[plan].reqsPerMonthPretty} />
       ))}
     </Select>
   )