feat(clerk-js,shared): make it easier to cancel a subscription

Author: mauricioabreu

packages/clerk-js/sandbox/template.html

@@ -358,7 +358,7 @@
     <script
       type="text/javascript"
       src="/<%= htmlRspackPlugin.files.js[0] %>"
-      data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+      data-clerk-publishable-key="pk_test_ZmFpdGhmdWwtZG9yeS04Ni5jbGVyay5hY2NvdW50cy5sY2xjbGVyay5jb20k"
     ></script>
     <script
       type="text/javascript"

packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx

@@ -18,7 +18,6 @@ import { CardAlert } from '@/ui/elements/Card/CardAlert';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
 import { LineItems } from '@/ui/elements/LineItems';
-import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { handleError } from '@/ui/utils/errorHandler';
 import { formatDate } from '@/ui/utils/formatDate';
 
@@ -398,83 +397,93 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
     [__internal_openCheckout, revalidateAll, portalRoot, setIsOpen],
   );
 
-  const actions = React.useMemo(() => {
-    if (!canManageBilling) {
-      return [];
-    }
+  const handleSwitchPlan = useCallback(() => {
+    openCheckout({
+      planId: subscription.plan.id,
+      planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
+      for: subscriberType,
+    });
+  }, [openCheckout, subscription.plan.id, subscription.planPeriod, subscriberType]);
+
+  const handleCancelSubscription = useCallback(() => {
+    setSubscription(subscription);
+    setConfirmationOpen(true);
+  }, [subscription, setSubscription, setConfirmationOpen]);
+
+  const handleResubscribe = useCallback(() => {
+    openCheckout({
+      planId: subscription.plan.id,
+      planPeriod: subscription.planPeriod,
+      for: subscriberType,
+    });
+  }, [openCheckout, subscription.plan.id, subscription.planPeriod, subscriberType]);
+
+  if (!canManageBilling) {
+    return null;
+  }
 
-    return [
-      isSwitchable
-        ? {
-            label:
-              subscription.planPeriod === 'month'
-                ? localizationKeys('billing.switchToAnnualWithAnnualPrice', {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    price: normalizeFormatted(subscription.plan.annualFee!.amountFormatted),
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    currency: subscription.plan.annualFee!.currencySymbol,
-                  })
-                : localizationKeys('billing.switchToMonthlyWithPrice', {
-                    price: normalizeFormatted(subscription.plan.fee.amountFormatted),
-                    currency: subscription.plan.fee.currencySymbol,
-                  }),
-            onClick: () => {
-              openCheckout({
-                planId: subscription.plan.id,
-                planPeriod: subscription.planPeriod === 'month' ? 'annual' : 'month',
-                for: subscriberType,
-              });
-            },
-          }
-        : null,
-      isCancellable
-        ? {
-            isDestructive: true,
-            label: subscription.isFreeTrial
-              ? localizationKeys('billing.cancelFreeTrial', {
-                  plan: subscription.plan.name,
-                })
-              : localizationKeys('billing.cancelSubscription'),
-            onClick: () => {
-              setSubscription(subscription);
-              setConfirmationOpen(true);
-            },
-          }
-        : null,
-      isReSubscribable
-        ? {
-            label: localizationKeys('billing.reSubscribe'),
-            onClick: () => {
-              openCheckout({
-                planId: subscription.plan.id,
-                planPeriod: subscription.planPeriod,
-                for: subscriberType,
-              });
-            },
-          }
-        : null,
-    ].filter(a => a !== null);
-  }, [
-    isSwitchable,
-    subscription,
-    isCancellable,
-    openCheckout,
-    subscriberType,
-    setSubscription,
-    canManageBilling,
-    isReSubscribable,
-    setConfirmationOpen,
-  ]);
+  const showSwitchButton = isSwitchable;
+  const showCancelButton = isCancellable;
+  const showResubscribeButton = isReSubscribable;
 
-  if (actions.length === 0) {
+  if (!showSwitchButton && !showCancelButton && !showResubscribeButton) {
     return null;
   }
 
   return (
-    <ThreeDotsMenu
-      variant='bordered'
-      actions={actions}
-    />
+    <Flex
+      elementDescriptor={descriptors.subscriptionDetailsCardActions}
+      gap={2}
+      sx={t => ({
+        paddingInline: t.space.$3,
+        paddingBlock: t.space.$3,
+        borderBlockStartWidth: t.borderWidths.$normal,
+        borderBlockStartStyle: t.borderStyles.$solid,
+        borderBlockStartColor: t.colors.$borderAlpha100,
+      })}
+    >
+      {showSwitchButton && (
+        <Button
+          elementDescriptor={descriptors.subscriptionDetailsActionButton}
+          variant='outline'
+          size='xs'
+          textVariant='buttonSmall'
+          onClick={handleSwitchPlan}
+          localizationKey={
+            subscription.planPeriod === 'month'
+              ? localizationKeys('billing.switchToAnnual')
+              : localizationKeys('billing.switchToMonthly')
+          }
+        />
+      )}
+      {showResubscribeButton && (
+        <Button
+          elementDescriptor={descriptors.subscriptionDetailsActionButton}
+          variant='outline'
+          size='xs'
+          textVariant='buttonSmall'
+          onClick={handleResubscribe}
+          localizationKey={localizationKeys('billing.reSubscribe')}
+        />
+      )}
+      {showCancelButton && (
+        <Button
+          elementDescriptor={descriptors.subscriptionDetailsCancelButton}
+          variant='ghost'
+          size='xs'
+          textVariant='buttonSmall'
+          colorScheme='danger'
+          onClick={handleCancelSubscription}
+          localizationKey={
+            subscription.isFreeTrial
+              ? localizationKeys('billing.cancelFreeTrial', {
+                  plan: subscription.plan.name,
+                })
+              : localizationKeys('billing.cancelSubscription')
+          }
+        />
+      )}
+    </Flex>
   );
 };
 
@@ -539,7 +548,6 @@ const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionI
 
         {/* Pricing details */}
         <Flex
-          elementDescriptor={descriptors.subscriptionDetailsCardActions}
           justify='between'
           align='center'
         >
@@ -555,8 +563,6 @@ const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionI
             {fee.amountFormatted} /{' '}
             {t(localizationKeys(`billing.${subscription.planPeriod === 'month' ? 'month' : 'year'}`))}
           </Text>
-
-          <SubscriptionCardActions subscription={subscription} />
         </Flex>
       </Col>
 
@@ -599,6 +605,8 @@ const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionI
           value={formatDate(subscription.periodStart)}
         />
       ) : null}
+
+      <SubscriptionCardActions subscription={subscription} />
     </Col>
   );
 };

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -506,6 +506,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'subscriptionDetailsCardBody',
   'subscriptionDetailsCardFooter',
   'subscriptionDetailsCardActions',
+  'subscriptionDetailsActionButton',
+  'subscriptionDetailsCancelButton',
   'subscriptionDetailsDetailRow',
   'subscriptionDetailsDetailRowLabel',
   'subscriptionDetailsDetailRowValue',

packages/shared/src/types/appearance.ts

@@ -641,6 +641,8 @@ export type ElementsConfig = {
   subscriptionDetailsCardBody: WithOptions;
   subscriptionDetailsCardFooter: WithOptions;
   subscriptionDetailsCardActions: WithOptions;
+  subscriptionDetailsActionButton: WithOptions;
+  subscriptionDetailsCancelButton: WithOptions;
   subscriptionDetailsDetailRow: WithOptions;
   subscriptionDetailsDetailRowLabel: WithOptions;
   subscriptionDetailsDetailRowValue: WithOptions;