Merge pull request #1657 from Shelf-nu/1652-feature-subscription-management-ui

feature: subscription management UI

Author: DonKoko

app/components/subscription/current-plan-details.tsx

@@ -4,17 +4,22 @@ import { Button } from "../shared/button";
 
 export const CustomerPortalForm = ({
   buttonText = "Go to Customer Portal",
+  buttonProps,
+  className,
 }: {
   buttonText?: string;
+  buttonProps?: React.ComponentProps<typeof Button>;
+  className?: string;
 }) => {
   const customerPortalFetcher = useFetcher();
   const isProcessing = isFormProcessing(customerPortalFetcher.state);
   return (
     <customerPortalFetcher.Form
       method="post"
       action="/account-details/subscription/customer-portal"
+      className={className}
     >
-      <Button disabled={isProcessing}>
+      <Button disabled={isProcessing} {...buttonProps}>
         {isProcessing ? "Redirecting to Customer Portal..." : buttonText}
       </Button>
     </customerPortalFetcher.Form>

app/components/subscription/customer-portal-form.tsx

@@ -1,5 +1,8 @@
 export const FREE_PLAN = {
   id: "free",
+  metadata: {
+    show_on_table: true,
+  },
   product: {
     name: "Free",
     metadata: {

app/components/subscription/helpers.ts

@@ -1,4 +1,3 @@
-import type Stripe from "stripe";
 import { tw } from "~/utils/tw";
 import type { Price } from "./prices";
 import {
@@ -15,19 +14,7 @@ import {
   TooltipTrigger,
 } from "../shared/tooltip";
 
-export const PriceBox = ({
-  activePlan,
-  subscription,
-  price,
-  isTrialSubscription,
-  customPlanName,
-}: {
-  activePlan: Stripe.Plan | undefined;
-  subscription: Stripe.Subscription | null;
-  price: Price;
-  isTrialSubscription: boolean;
-  customPlanName?: string | React.ReactNode;
-}) => {
+export const PriceBox = ({ price }: { price: Price }) => {
   const amount =
     price.unit_amount != null
       ? price?.recurring?.interval === "year"
@@ -39,12 +26,7 @@ export const PriceBox = ({
 
   return (
     <div
-      className={tw(
-        "price-box mb-8 rounded-2xl border p-8",
-        activePlan?.id === price.id || (!subscription && price.id === "free")
-          ? "border-primary-500 bg-primary-50"
-          : "bg-white"
-      )}
+      className={tw("price-box mb-8 rounded-2xl border bg-white p-8")}
       key={price.id}
     >
       <div className="text-center">
@@ -55,14 +37,8 @@ export const PriceBox = ({
         </div>
         <div className="mb-3 flex items-center justify-center gap-2">
           <h2 className=" text-xl font-semibold text-primary-700">
-            {customPlanName || price.product.name}
+            {price.product.name}
           </h2>
-          {activePlan?.id === price.id ||
-          (!subscription && price.id === "free") ? (
-            <div className="rounded-2xl bg-primary-50 px-2 py-0.5 text-[12px] font-medium text-primary-700 mix-blend-multiply">
-              Current {isTrialSubscription ? "(Free Trial)" : ""}
-            </div>
-          ) : null}
         </div>
         {amount != null ? (
           <div className="mb-3 ">

app/components/subscription/price-box.tsx

@@ -1,33 +1,18 @@
 import { useLoaderData } from "@remix-run/react";
 import { config } from "~/config/shelf.config";
 import type { loader } from "~/routes/_layout+/account-details.subscription";
-import { CustomerPortalForm } from "./customer-portal-form";
 import type { Price } from "./prices";
 import { Form } from "../custom-form";
 import { Button } from "../shared/button";
 
-export const PriceCta = ({
-  price,
-  subscription,
-}: {
-  price: Price;
-  subscription: Object | null;
-}) => {
+export const PriceCta = ({ price }: { price: Price }) => {
   const { usedFreeTrial } = useLoaderData<typeof loader>();
 
   if (price.id === "free") return null;
 
   const isTeamSubscriptionColumn =
     price.product.metadata.shelf_tier === "tier_2";
 
-  if (subscription) {
-    return (
-      <CustomerPortalForm
-        buttonText={subscription ? "Manage subscription" : undefined}
-      />
-    );
-  }
-
   return (
     <>
       <Form method="post">
@@ -41,7 +26,7 @@ export const PriceCta = ({
           Upgrade to {price.product.name}
         </Button>
 
-        {isTeamSubscriptionColumn && !subscription && !usedFreeTrial && (
+        {isTeamSubscriptionColumn && !usedFreeTrial && (
           <Button
             variant="secondary"
             className="mt-2"

app/components/subscription/price-cta.tsx

@@ -1,6 +1,4 @@
-import { useLoaderData } from "@remix-run/react";
 import type Stripe from "stripe";
-import type { loader } from "~/routes/_layout+/account-details.subscription";
 import { FREE_PLAN } from "./helpers";
 import { PriceBox } from "./price-box";
 import { PriceCta } from "./price-cta";
@@ -14,18 +12,28 @@ export type PriceWithProduct = Stripe.Price & {
 export const Prices = ({ prices }: { prices: PriceWithProduct[] }) => (
   <div className="gap-8 xl:flex xl:justify-center">
     <Price key={FREE_PLAN.id} price={FREE_PLAN} />
-    {prices.map((price, index) => (
-      <Price
-        key={price.id}
-        price={price}
-        previousPlanName={prices[index - 1]?.product.name}
-      />
-    ))}
+    {prices
+      .filter(
+        (p) =>
+          p.metadata.show_on_table &&
+          p.metadata.show_on_table === "true" &&
+          p.metadata.legacy !== "true"
+      )
+      .map((price, index) => (
+        <Price
+          key={price.id}
+          price={price}
+          previousPlanName={prices[index - 1]?.product.name}
+        />
+      ))}
   </div>
 );
 
 export interface Price {
   id: string;
+  metadata?: {
+    show_on_table?: boolean;
+  };
   product: {
     name: string;
     metadata: {
@@ -48,21 +56,15 @@ export const Price = ({
   price: Price;
   previousPlanName?: string;
 }) => {
-  const { subscription, isTrialSubscription } = useLoaderData<typeof loader>();
-  const activePlan = subscription?.items.data[0]?.plan;
   const isFreePlan = price.id === "free";
   const isTeamPlan = price.product.metadata.shelf_tier === "tier_2";
   const features = price.product.metadata.features?.split(",") || [];
+
   return (
     <div className="subscription-plan mb-12 w-full xl:mb-0 xl:max-w-[410px]">
-      <PriceBox
-        activePlan={activePlan}
-        subscription={subscription}
-        price={price}
-        isTrialSubscription={isTrialSubscription}
-      />
+      <PriceBox price={price} />
       <div className="mb-8">
-        <PriceCta price={price} subscription={subscription} />
+        <PriceCta price={price} />
       </div>
       {features ? (
         <>

app/components/subscription/prices.tsx

@@ -0,0 +1,31 @@
+import type { PriceWithProduct } from "./prices";
+import { Prices } from "./prices";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../shared/tabs";
+
+export function PricingTable({
+  prices,
+}: {
+  prices: {
+    [key: string]: PriceWithProduct[];
+  };
+}) {
+  return (
+    <Tabs defaultValue={"year"} className="flex w-full flex-col">
+      <TabsList className="center mx-auto mb-8">
+        <TabsTrigger value="year">
+          Yearly{" "}
+          <span className="ml-2 rounded-[16px] bg-primary-50 px-2 py-1 text-xs font-medium text-primary-700">
+            Save 54%
+          </span>
+        </TabsTrigger>
+        <TabsTrigger value="month">Monthly</TabsTrigger>
+      </TabsList>
+      <TabsContent value="year">
+        <Prices prices={prices["year"]} />
+      </TabsContent>
+      <TabsContent value="month">
+        <Prices prices={prices["month"]} />
+      </TabsContent>
+    </Tabs>
+  );
+}