clients: Use cancel_at vs. cancel_at_period_end for cancellation …

…logic
polarsource · Dec 12, 2024 · 989059a · 989059a
1 parent cabdbbb
commit 989059a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 28 deletions.
diff --git a/clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/subscriptions/ClientPage.tsx b/clients/apps/web/src/app/(main)/(topbar)/(backer)/purchases/subscriptions/ClientPage.tsx
@@ -145,12 +145,12 @@ const SubscriptionItem = ({
         return (
           <StatusWrapper
             color={
-              subscription.cancel_at_period_end
+              subscription.cancel_at
                 ? 'border-yellow-500'
                 : 'border-emerald-500'
             }
           >
-            {subscription.cancel_at_period_end ? 'To be cancelled' : 'Active'}
+            {subscription.cancel_at ? 'To be cancelled' : 'Active'}
           </StatusWrapper>
         )
       default:
@@ -166,6 +166,18 @@ const SubscriptionItem = ({
     return null
   }
 
+  let nextEventTitle = null
+  let nextEventDate = null
+  if (!subscription.ended_at) {
+    if (subscription.cancel_at) {
+      nextEventTitle = 'Expiry Date'
+      nextEventDate = new Date(subscription.cancel_at)
+    } else if (subscription.current_period_end) {
+      nextEventTitle = 'Renewal Date'
+      nextEventDate = new Date(subscription.current_period_end)
+    }
+  }
+
   return (
     <ShadowBox className="dark:bg-polar-800 flex w-full flex-col gap-y-6 border-none bg-white">
       <div className="flex flex-row items-start justify-between">
@@ -217,15 +229,13 @@ const SubscriptionItem = ({
             </span>
           </div>
         )}
-        {!subscription.ended_at && subscription.current_period_end && (
+        {nextEventTitle && nextEventDate && (
           <div className="flex flex-row items-center justify-between">
             <span className="dark:text-polar-500 text-gray-500">
-              {subscription.cancel_at_period_end
-                ? 'Expiry Date'
-                : 'Renewal Date'}
+              {nextEventTitle}
             </span>
             <span>
-              {new Date(subscription.current_period_end).toLocaleDateString(
+              {nextEventDate.toLocaleDateString(
                 'en-US',
                 {
                   year: 'numeric',

diff --git a/...nts/apps/web/src/app/(main)/(topbar)/(backer)/purchases/subscriptions/[id]/ClientPage.tsx b/...nts/apps/web/src/app/(main)/(topbar)/(backer)/purchases/subscriptions/[id]/ClientPage.tsx
@@ -86,7 +86,7 @@ const ClientPage = ({
     cancelSubscription.isPending ||
     cancelSubscription.isSuccess ||
     subscription.ended_at ||
-    subscription.cancel_at_period_end
+    subscription.cancel_at
   const [showCancelModal, setShowCancelModal] = useState(false)
 
   return (
@@ -171,12 +171,11 @@ const ClientPage = ({
               )}
               {isCanceled &&
                 !subscription.ended_at &&
-                subscription.cancel_at_period_end &&
-                subscription.current_period_end && (
+                subscription.cancel_at && (
                   <p className="dark:text-polar-500 text-sm text-gray-400">
                     Will be canceled at{' '}
                     {new Date(
-                      subscription.current_period_end,
+                      subscription.cancel_at,
                     ).toLocaleDateString('en-US', {
                       year: 'numeric',
                       month: 'long',

diff --git a/...s/web/src/app/(main)/dashboard/[organization]/(header)/sales/subscriptions/ClientPage.tsx b/...s/web/src/app/(main)/dashboard/[organization]/(header)/sales/subscriptions/ClientPage.tsx
@@ -134,13 +134,13 @@ const StatusLabel = ({
 const Status = ({ subscription }: { subscription: Subscription }) => {
   switch (subscription.status) {
     case 'active':
-      if (!subscription.cancel_at_period_end) {
+      if (!subscription.cancel_at) {
         return <StatusLabel color="border-emerald-500">Active</StatusLabel>
       }
       return (
         <StatusLabel
           color="border-yellow-500"
-          dt={subscription.current_period_end}
+          dt={subscription.cancel_at}
           icon={<AccessTimeOutlined fontSize="inherit" />}
         >
           Ending
@@ -517,14 +517,15 @@ const SubscriptionDetails = ({
   const cancellationReason = subscription.customer_cancellation_reason
   const cancellationComment = subscription.customer_cancellation_comment
 
+  let nextEventDatetime: string | undefined = undefined
   let cancellationDate: Date | undefined = undefined
   if (subscription.ended_at) {
     cancellationDate = new Date(subscription.ended_at)
-  } else if (
-    subscription.cancel_at_period_end &&
-    subscription.current_period_end
-  ) {
-    cancellationDate = new Date(subscription.current_period_end)
+  } else if (subscription.cancel_at) {
+    nextEventDatetime = subscription.cancel_at
+    cancellationDate = new Date(subscription.cancel_at)
+  } else if (subscription.current_period_end) {
+    nextEventDatetime = subscription.current_period_end
   }
 
   return (
@@ -556,15 +557,15 @@ const SubscriptionDetails = ({
             <FormattedDateTime datetime={subscription.created_at} />
           </span>
         </div>
-        {subscription.current_period_end && !subscription.ended_at && (
+        {nextEventDatetime && (
           <div className="flex justify-between">
             <span className="dark:text-polar-500 text-gray-500">
-              {subscription.cancel_at_period_end
+              {subscription.cancel_at
                 ? 'Ending Date'
                 : 'Renewal Date'}
             </span>
             <span>
-              <FormattedDateTime datetime={subscription.current_period_end} />
+              <FormattedDateTime datetime={nextEventDatetime} />
             </span>
           </div>
         )}

diff --git a/clients/apps/web/src/components/CustomerPortal/CustomerPortal.tsx b/clients/apps/web/src/components/CustomerPortal/CustomerPortal.tsx
@@ -178,12 +178,12 @@ const SubscriptionItem = ({
         return (
           <StatusWrapper
             color={
-              subscription.cancel_at_period_end
+              subscription.cancel_at
                 ? 'bg-yellow-500'
                 : 'bg-green-500'
             }
           >
-            {subscription.cancel_at_period_end ? 'To be cancelled' : 'Active'}
+            {subscription.cancel_at ? 'To be cancelled' : 'Active'}
           </StatusWrapper>
         )
       default:
@@ -195,6 +195,18 @@ const SubscriptionItem = ({
     }
   }, [subscription])
 
+  let nextEventTitle = null
+  let nextEventDate = null
+  if (!subscription.ended_at) {
+    if (subscription.cancel_at) {
+      nextEventTitle = 'Expiry Date'
+      nextEventDate = new Date(subscription.cancel_at)
+    } else if (subscription.current_period_end) {
+      nextEventTitle = 'Renewal Date'
+      nextEventDate = new Date(subscription.current_period_end)
+    }
+  }
+
   return (
     <ShadowBox className="dark:bg-polar-950 bg-gray-75 flex w-full flex-col gap-y-6">
       <div className="flex flex-row items-start justify-between">
@@ -246,15 +258,13 @@ const SubscriptionItem = ({
             </span>
           </div>
         )}
-        {!subscription?.ended_at && subscription?.current_period_end && (
+        {nextEventTitle && nextEventDate && (
           <div className="flex flex-row items-center justify-between py-3">
             <span>
-              {subscription.cancel_at_period_end
-                ? 'Expiry Date'
-                : 'Renewal Date'}
+              {nextEventTitle}
             </span>
             <span>
-              {new Date(subscription.current_period_end).toLocaleDateString(
+              {nextEventDate.toLocaleDateString(
                 'en-US',
                 {
                   year: 'numeric',