feat(sdk): sort plan features (#502)

* feat: sort features based on weightage * fix: handle draft invoice date
raystack · Feb 19, 2024 · 9133e2e · 9133e2e
1 parent 50fb2cd
commit 9133e2e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 18 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/billing/invoices/index.tsx b/sdks/js/packages/core/react/components/organization/billing/invoices/index.tsx
@@ -1,11 +1,11 @@
 import { DataTable, EmptyState, Flex, Link, Text } from '@raystack/apsara';
 import { ColumnDef } from '@tanstack/react-table';
 import dayjs from 'dayjs';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import Amount from '~/react/components/helpers/Amount';
 import { useFrontier } from '~/react/contexts/FrontierContext';
-import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
+import { DEFAULT_DATE_FORMAT, INVOICE_STATES } from '~/react/utils/constants';
 import { V1Beta1Invoice } from '~/src';
 import { capitalize } from '~/utils';
 
@@ -33,9 +33,13 @@ export const getColumns: (
     cell: isLoading
       ? () => <Skeleton />
       : ({ row, getValue }) => {
+          const value =
+            row.original?.state === INVOICE_STATES.DRAFT
+              ? row?.original?.due_date
+              : getValue();
           return (
             <Flex direction="column">
-              <Text>{dayjs(getValue()).format(dateFormat)}</Text>
+              <Text>{dayjs(value).format(dateFormat)}</Text>
             </Flex>
           );
         }

diff --git a/sdks/js/packages/core/react/components/organization/plans/helpers/index.ts b/sdks/js/packages/core/react/components/organization/plans/helpers/index.ts
@@ -65,12 +65,23 @@ export function groupPlansPricingByInterval(plans: V1Beta1Plan[]) {
   return Object.values(plansMap);
 }
 
-export function getAllPlansFeatuesMap(plans: V1Beta1Plan[]) {
-  const featureMap: Record<string, V1Beta1Feature> = {};
+export function getFeaturesWeightageMap(
+  features: V1Beta1Feature[],
+  plans: V1Beta1Plan[]
+) {
+  const featureMap = features.reduce((acc, feature) => {
+    if (feature.id) {
+      acc[feature.id] = 0;
+    }
+    return acc;
+  }, {} as Record<string, number>);
+
   plans.forEach(plan => {
     plan?.products?.forEach(product => {
       product?.features?.forEach(feature => {
-        featureMap[feature?.id || ''] = feature;
+        if (feature.id) {
+          featureMap[feature.id] = featureMap[feature.id] + 1;
+        }
       });
     });
   });

diff --git a/sdks/js/packages/core/react/components/organization/plans/index.tsx b/sdks/js/packages/core/react/components/organization/plans/index.tsx
@@ -13,7 +13,10 @@ import { V1Beta1Feature, V1Beta1Plan } from '~/src';
 import { toast } from 'sonner';
 import Skeleton from 'react-loading-skeleton';
 import plansStyles from './plans.module.css';
-import { getAllPlansFeatuesMap, groupPlansPricingByInterval } from './helpers';
+import {
+  getFeaturesWeightageMap,
+  groupPlansPricingByInterval
+} from './helpers';
 import {
   IntervalKeys,
   IntervalLabelMap,
@@ -86,12 +89,12 @@ const PlansHeader = ({ billingSupportEmail }: PlansHeaderProps) => {
 
 const PlanPricingColumn = ({
   plan,
-  featureMap = {},
+  features,
   currentPlan,
   allowAction
 }: {
   plan: PlanIntervalPricing;
-  featureMap: Record<string, V1Beta1Feature>;
+  features: V1Beta1Feature[];
   currentPlan?: IntervalPricingWithPlan;
   allowAction: boolean;
 }) => {
@@ -255,7 +258,7 @@ const PlanPricingColumn = ({
           </Text>
         </Flex>
       </Flex>
-      {Object.values(featureMap).map(feature => {
+      {features.map(feature => {
         return (
           <Flex
             key={feature?.id + '-' + plan?.slug}
@@ -283,10 +286,12 @@ interface PlansListProps {
   plans: V1Beta1Plan[];
   currentPlanId: string;
   allowAction: boolean;
+  features: V1Beta1Feature[];
 }
 
 const PlansList = ({
   plans = [],
+  features = [],
   currentPlanId,
   allowAction
 }: PlansListProps) => {
@@ -295,7 +300,6 @@ const PlansList = ({
   const groupedPlans = groupPlansPricingByInterval(plans).sort(
     (a, b) => a.weightage - b.weightage
   );
-  const featuresMap = getAllPlansFeatuesMap(plans);
 
   let currentPlanPricing: IntervalPricingWithPlan | undefined;
   groupedPlans.forEach(group => {
@@ -306,6 +310,14 @@ const PlansList = ({
     });
   });
 
+  const featuresWeightageMap = getFeaturesWeightageMap(features, plans);
+
+  const sortedFeatures = features.sort((f1, f2) => {
+    const f1Weight = (f1.id && featuresWeightageMap[f1.id]) || 0;
+    const f2Weight = (f2.id && featuresWeightageMap[f2.id]) || 0;
+    return f2Weight - f1Weight;
+  });
+
   return (
     <Flex>
       <Flex style={{ overflow: 'hidden', flex: 1 }}>
@@ -321,7 +333,7 @@ const PlansList = ({
                 Features
               </Text>
             </Flex>
-            {Object.values(featuresMap).map(feature => {
+            {sortedFeatures.map(feature => {
               return (
                 <Flex
                   key={feature?.id}
@@ -342,7 +354,7 @@ const PlansList = ({
             <PlanPricingColumn
               plan={plan}
               key={plan.slug}
-              featureMap={featuresMap}
+              features={sortedFeatures}
               currentPlan={currentPlanPricing}
               allowAction={allowAction}
             />
@@ -358,6 +370,7 @@ export default function Plans() {
     useFrontier();
   const [isPlansLoading, setIsPlansLoading] = useState(false);
   const [plans, setPlans] = useState<V1Beta1Plan[]>([]);
+  const [features, setFeatures] = useState<V1Beta1Feature[]>([]);
 
   const resource = `app/organization:${activeOrganization?.id}`;
   const listOfPermissionsToCheck = useMemo(
@@ -385,12 +398,18 @@ export default function Plans() {
   }, [permissions, resource]);
 
   useEffect(() => {
-    async function getPlans() {
+    async function getPlansAndFeatures() {
       setIsPlansLoading(true);
       try {
-        const resp = await client?.frontierServiceListPlans();
-        if (resp?.data?.plans) {
-          setPlans(resp?.data?.plans);
+        const [planResp, featuresResp] = await Promise.all([
+          client?.frontierServiceListPlans(),
+          client?.frontierServiceListFeatures()
+        ]);
+        if (planResp?.data?.plans) {
+          setPlans(planResp?.data?.plans);
+        }
+        if (featuresResp?.data?.features) {
+          setFeatures(featuresResp?.data?.features);
         }
       } catch (err: any) {
         toast.error('Something went wrong', {
@@ -402,7 +421,7 @@ export default function Plans() {
       }
     }
 
-    getPlans();
+    getPlansAndFeatures();
   }, [client]);
 
   const isLoading = isPlansLoading || isPermissionsFetching;
@@ -421,6 +440,7 @@ export default function Plans() {
         ) : (
           <PlansList
             plans={plans}
+            features={features}
             currentPlanId={activeSubscription?.plan_id || ''}
             allowAction={canChangePlan}
           />