fix(sdk): handle null upcoming invoice due date (#531)

* fix: use period_end_at if due_date is null in upcoming invoice

* feat: show plan interval with plan name in upcoming invoice

* chore: add daily as interval label

Author: rsbh

sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx

@@ -10,6 +10,7 @@ import line from '~/react/assets/line.svg';
 import Amount from '../../helpers/Amount';
 import dayjs from 'dayjs';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { IntervalKeys, IntervalLabelMap } from '~/src/types';
 
 function LabeledBillingData({
   label,
@@ -140,7 +141,8 @@ export const UpcomingBillingCycle = () => {
     }
   }, [client, billingAccount?.org_id, billingAccount?.id]);
 
-  const planName = plan?.title;
+  const interval = IntervalLabelMap[plan?.interval as IntervalKeys];
+  const planName = `${plan?.title} (${interval})`;
 
   const planInfo = activeSubscription
     ? {
@@ -169,9 +171,11 @@ export const UpcomingBillingCycle = () => {
     isMemberCountLoading ||
     isPlansLoading;
 
+  const due_date = upcomingInvoice?.due_date || upcomingInvoice?.period_end_at;
+
   return isLoading ? (
     <Skeleton />
-  ) : upcomingInvoice && upcomingInvoice?.due_date ? (
+  ) : due_date ? (
     <Flex
       align={'center'}
       justify={'between'}
@@ -182,7 +186,7 @@ export const UpcomingBillingCycle = () => {
       <Flex gap="medium">
         <LabeledBillingData
           label="Next billing"
-          value={dayjs(upcomingInvoice?.due_date).format(config.dateFormat)}
+          value={dayjs(due_date).format(config.dateFormat)}
         />
         {/* @ts-ignore */}
         <Image src={line} alt="line" />

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

@@ -66,6 +66,7 @@ export interface FrontierProviderProps {
 }
 
 export const IntervalLabelMap = {
+  daily: 'Daily',
   month: 'Monthly',
   year: 'Yearly'
 } as const;