feat(shopify): enhance PlanView with plan details display and improve onboarding flow

Author: skeptrunedev

clients/trieve-shopify-extension/app/components/PlanView.tsx

@@ -9,14 +9,18 @@ import {
   InlineStack,
   Text,
   Banner,
+  Badge,
 } from "@shopify/polaris";
 import { ProgressBar } from "./ProgressBar";
+import { TrievePlan } from "trieve-ts-sdk";
 
 export const PlanView = ({
+  plan,
   planItems,
   setShowCancelModal,
   usagePercentage,
 }: {
+  plan: TrievePlan | null | undefined;
   planItems: DescriptionListProps["items"];
   setShowCancelModal: (show: boolean) => void;
   usagePercentage: number;
@@ -28,10 +32,13 @@ export const PlanView = ({
       <BlockStack gap="400">
         <Box paddingInline="400" paddingBlockStart="400">
           <InlineStack align="space-between">
-            <Text variant="headingMd" as="h2">
-              Plan Details
-            </Text>
-            <div className="flex gap-2">
+            <InlineStack gap="400" align="center" blockAlign="center">
+              <Text variant="headingMd" as="h2">
+                Plan Details
+              </Text>
+              <Badge>{plan?.name}</Badge>
+            </InlineStack>
+            <InlineStack gap="200" align="center" blockAlign="center">
               <Button
                 onClick={() => {
                   submit(
@@ -53,7 +60,7 @@ export const PlanView = ({
               >
                 Cancel
               </Button>
-            </div>
+            </InlineStack>
           </InlineStack>
         </Box>
 
@@ -82,10 +89,10 @@ export const PlanView = ({
               </Banner>
             </Box>
           )}
-          <div className="w-full">
+          <BlockStack>
             <span className="text-sm font-bold pb-1">Usage</span>
             <ProgressBar progress={usagePercentage} />
-          </div>
+          </BlockStack>
           <DescriptionList items={planItems} />
         </Box>
       </BlockStack>

clients/trieve-shopify-extension/app/routes/app._dashboard._index.tsx

@@ -37,6 +37,12 @@ import { Granularity, StripePlan } from "trieve-ts-sdk";
 import { ActionFunctionArgs } from "@remix-run/node";
 import { authenticate } from "app/shopify.server";
 import { PlanView } from "app/components/PlanView";
+
+const currencyFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+
 const load: Loader = async ({ adminApiFetcher, queryClient }) => {
   await queryClient.ensureQueryData(lastStepIdQuery(adminApiFetcher));
   return;
@@ -81,8 +87,6 @@ export default function Dashboard() {
 
   const { data: organizationUsage } = useQuery(organizationUsageQuery(trieve));
 
-  const planType = organization?.plan?.name || "Free";
-
   const statsItems = [
     {
       term: "Products",
@@ -112,12 +116,7 @@ export default function Dashboard() {
     },
   ];
 
-  let planItems = [
-    {
-      term: "Plan",
-      description: planType,
-    },
-  ];
+  let planItems = [];
 
   if (organization?.plan?.type === "flat") {
     planItems.push({
@@ -253,12 +252,11 @@ export default function Dashboard() {
                     <Text variant="headingMd" as="h2">
                       Sync Status
                     </Text>
-                    <Badge>{planType + " Plan"}</Badge>
                   </InlineStack>
                 </Box>
 
                 <Box paddingInline="400">
-                  <DescriptionList items={statsItems} />
+                  <DescriptionList gap="tight" items={statsItems} />
                 </Box>
 
                 <Box paddingInline="400" paddingBlockEnd="400">
@@ -276,6 +274,7 @@ export default function Dashboard() {
               </BlockStack>
             </Card>
             <PlanView
+              plan={organization?.plan}
               planItems={planItems}
               setShowCancelModal={setShowCancelModal}
               usagePercentage={

clients/trieve-shopify-extension/app/utils/onboarding.tsx

@@ -13,7 +13,7 @@ import {
   lastStepIdQuery,
   ONBOARD_STEP_META_FIELD,
 } from "app/queries/onboarding";
-import { FC, useCallback, useMemo, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 export type OnboardingBody = FC<{
   goToNextStep: () => void;
@@ -29,6 +29,7 @@ type OnboardingStep = {
   nextButtonText?: string;
   hideNextButton?: boolean;
   hidden?: boolean;
+  openAction?: () => void;
 };
 
 export const onboardingSteps: OnboardingStep[] = [
@@ -45,6 +46,9 @@ export const onboardingSteps: OnboardingStep[] = [
     defaultComplete: false,
     body: WelcomeOnboarding,
     nextButtonText: "Setup Component",
+    openAction: () => {
+      fetch("/app/setup");
+    },
   },
   {
     // Name in a way that changing the step + adding more will not require id rename
@@ -104,6 +108,12 @@ export const useOnboarding = () => {
     return onboardingSteps.find((step) => step.id === currentStepId) || null;
   }, [currentStepId]);
 
+  useEffect(() => {
+    if (currentStep?.openAction) {
+      currentStep.openAction();
+    }
+  }, [currentStep]);
+
   const goToNextStep = useCallback(() => {
     let currentStepIndex = onboardingSteps.findIndex(
       (step) => step.id === currentStepId,