feat(sdk): group features by title (#529)

* chore: update frontier client

* chore: group features by title

* chore: show interval based on plan interval

Author: rsbh

sdks/js/packages/core/client/V1Beta1.ts

@@ -1759,16 +1759,17 @@ export class V1Beta1<SecurityDataType = unknown> extends HttpClient<SecurityData
     orgId: string,
     billingId: string,
     id: string,
-    query?: {
+    body: {
       immediate?: boolean;
     },
     params: RequestParams = {}
   ) =>
     this.request<V1Beta1CancelSubscriptionResponse, RpcStatus>({
       path: `/v1beta1/organizations/${orgId}/billing/${billingId}/subscriptions/${id}/cancel`,
       method: 'POST',
-      query: query,
+      body: body,
       secure: true,
+      type: ContentType.Json,
       format: 'json',
       ...params
     });
@@ -2360,10 +2361,11 @@ export class V1Beta1<SecurityDataType = unknown> extends HttpClient<SecurityData
    * @request POST:/v1beta1/organizations/{org_id}/invitations/{id}/accept
    * @secure
    */
-  frontierServiceAcceptOrganizationInvitation = (orgId: string, id: string, params: RequestParams = {}) =>
+  frontierServiceAcceptOrganizationInvitation = (orgId: string, id: string, body: object, params: RequestParams = {}) =>
     this.request<V1Beta1AcceptOrganizationInvitationResponse, RpcStatus>({
       path: `/v1beta1/organizations/${orgId}/invitations/${id}/accept`,
       method: 'POST',
+      body: body,
       secure: true,
       format: 'json',
       ...params
@@ -2377,10 +2379,11 @@ export class V1Beta1<SecurityDataType = unknown> extends HttpClient<SecurityData
    * @request POST:/v1beta1/organizations/{org_id}/join
    * @secure
    */
-  frontierServiceJoinOrganization = (orgId: string, params: RequestParams = {}) =>
+  frontierServiceJoinOrganization = (orgId: string, body: object, params: RequestParams = {}) =>
     this.request<V1Beta1JoinOrganizationResponse, RpcStatus>({
       path: `/v1beta1/organizations/${orgId}/join`,
       method: 'POST',
+      body: body,
       secure: true,
       format: 'json',
       ...params

sdks/js/packages/core/client/data-contracts.ts

@@ -307,8 +307,8 @@ export interface V1Beta1CheckoutSetupBody {
 
 export interface V1Beta1CheckoutSubscriptionBody {
   plan?: string;
-  /** @format int32 */
-  trail_days?: number;
+  skip_trial?: boolean;
+  cancel_after_trial?: boolean;
 }
 
 export interface V1Beta1CreateBillingAccountResponse {
@@ -554,8 +554,11 @@ export type V1Beta1EnableUserResponse = object;
 
 export interface V1Beta1Feature {
   id?: string;
+  /** machine friendly name */
   name?: string;
   product_ids?: string[];
+  /** human friendly name */
+  title?: string;
   metadata?: object;
   /** @format date-time */
   created_at?: string;

sdks/js/packages/core/react/components/organization/plans/helpers/index.ts

@@ -41,21 +41,23 @@ export function groupPlansPricingByInterval(plans: V1Beta1Plan[]) {
         return acc;
       }, {} as IntervalPricing) || ({} as IntervalPricing);
 
-    plan?.products?.forEach(product => {
-      product.features?.forEach(feature => {
-        plansMap[slug].features[feature?.id || ''] = feature;
-      });
-    }, {} as IntervalPricing) || ({} as IntervalPricing);
-
     const planMetadata = (plan?.metadata as Record<string, string>) || {};
     plansMap[slug].intervals[planInterval] = {
       planId: plan?.id || '',
       planName: plan?.name || '',
       interval: planInterval,
       weightage: planMetadata?.weightage ? Number(planMetadata?.weightage) : 0,
+      features: {},
       ...productPrices
     };
 
+    plan?.products?.forEach(product => {
+      product.features?.forEach(feature => {
+        plansMap[slug].intervals[planInterval].features[feature?.title || ''] =
+          feature;
+      });
+    }, {} as IntervalPricing) || ({} as IntervalPricing);
+
     plansMap[slug].weightage = Object.values(plansMap[slug].intervals).reduce(
       (acc, data) => acc + data.weightage,
       0

sdks/js/packages/core/react/components/organization/plans/index.tsx

@@ -92,7 +92,7 @@ const PlanPricingColumn = ({
   allowAction
 }: {
   plan: PlanIntervalPricing;
-  features: V1Beta1Feature[];
+  features: string[];
   currentPlan?: IntervalPricingWithPlan;
   allowAction: boolean;
 }) => {
@@ -258,13 +258,16 @@ const PlanPricingColumn = ({
         </Flex>
       </Flex>
       {features.map(feature => {
-        const featureId = feature?.id || '';
-        const planFeature = _.get(plan?.features, featureId, { metadata: {} });
+        const planFeature = _.get(
+          plan?.intervals[selectedInterval].features,
+          feature,
+          { metadata: {} }
+        );
         const value = (planFeature?.metadata as Record<string, any>)?.value;
         const isAvailable = value?.toLowerCase() === 'true';
         return (
           <Flex
-            key={featureId + '-' + plan?.slug}
+            key={feature + '-' + plan?.slug}
             align={'center'}
             justify={'start'}
             className={plansStyles.featureCell}
@@ -314,15 +317,18 @@ const PlansList = ({
   });
 
   const totalFeatures = features.length;
-  const sortedFeatures = features
-    .sort((f1, f2) => ((f1?.name || '') > (f2?.name || '') ? -1 : 1))
-    .sort((f1, f2) => {
-      const f1Weight =
-        (f1.metadata as Record<string, any>)?.weightage || totalFeatures;
-      const f2Weight =
-        (f2.metadata as Record<string, any>)?.weightage || totalFeatures;
-      return f1Weight - f2Weight;
-    });
+
+  const featureTitleMap = features.reduce((acc, f) => {
+    const weightage =
+      (f.metadata as Record<string, any>)?.weightage || totalFeatures;
+    acc[f.title || ''] = weightage;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const sortedFeatures = Object.entries(featureTitleMap)
+    .sort((f1, f2) => f1[1] - f2[1])
+    .map(f => f[0])
+    .filter(f => Boolean(f));
 
   return (
     <Flex>
@@ -342,13 +348,13 @@ const PlansList = ({
             {sortedFeatures.map(feature => {
               return (
                 <Flex
-                  key={feature?.id}
+                  key={feature}
                   align={'center'}
                   justify={'start'}
                   className={plansStyles.featureCell}
                 >
                   <Text size={3} className={plansStyles.featureLabel}>
-                    {feature?.name}
+                    {feature}
                   </Text>
                 </Flex>
               );

sdks/js/packages/core/src/types.ts

@@ -83,6 +83,7 @@ export interface IntervalPricingWithPlan extends IntervalPricing {
   planName: string;
   interval: IntervalKeys;
   weightage: number;
+  features: Record<string, V1Beta1Feature>;
 }
 
 export interface PlanIntervalPricing {
@@ -91,5 +92,4 @@ export interface PlanIntervalPricing {
   description: string;
   intervals: Record<IntervalKeys, IntervalPricingWithPlan>;
   weightage: number;
-  features: Record<string, V1Beta1Feature>;
 }