bugfix(shopify): clearly indicated when the user is on a free plan

Author: skeptrunedev

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

@@ -74,13 +74,23 @@ export const PlanView = () => {
           <div className="pb-4">
             <InlineStack align="space-between">
               <Text variant="headingMd" as="h2">
-                Plan Details
+                Plan Status
               </Text>
               <Badge>{organization.plan?.name}</Badge>
             </InlineStack>
           </div>
 
-          <Box>
+          <BlockStack gap="400">
+            {(organization.plan as StripePlan | undefined)?.amount == 0 && (
+              <Box>
+                <Banner
+                  title={`You are not on a paid plan. Test before you buy!`}
+                  tone="info"
+                >
+                  <p>Trieve includes 50 AI messages per month for free.</p>
+                </Banner>
+              </Box>
+            )}
             {usagePercentage >= 80 && usagePercentage < 90 && (
               <Box>
                 <Banner
@@ -115,7 +125,7 @@ export const PlanView = () => {
                 <div>{item.description}</div>
               </div>
             ))}
-          </Box>
+          </BlockStack>
         </BlockStack>
         <div className="h-2"></div>
         <InlineStack gap="200" align="end" blockAlign="center">
@@ -131,15 +141,19 @@ export const PlanView = () => {
               );
             }}
           >
-            Modify Plan
-          </Button>
-          <Button
-            onClick={() => {
-              setShowCancelModal(true);
-            }}
-          >
-            Cancel Plan
+            {(organization.plan as StripePlan | undefined)?.amount == 0
+              ? "Upgrade"
+              : "Modify"}
           </Button>
+          {(organization.plan as StripePlan | undefined)?.amount != 0 && (
+            <Button
+              onClick={() => {
+                setShowCancelModal(true);
+              }}
+            >
+              Cancel
+            </Button>
+          )}
         </InlineStack>
       </Card>
     </>

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

@@ -38,14 +38,17 @@ export const loader = createServerLoader(load);
 export const clientLoader = createClientLoader(load);
 
 export const action = async ({ request }: ActionFunctionArgs) => {
+  console.log("Receives action");
   const { redirect, billing } = await authenticate.admin(request);
   const formData = await request.formData();
   const action = formData.get("action");
   if (action === "modify") {
+    console.log("Redirecting to pricing page");
     return redirect(process.env.SHOPIFY_PRICING_URL || "", {
       target: "_top",
     });
   } else if (action === "cancel") {
+    console.log("Cancelling subscription");
     const subscription = await billing.check();
     if (subscription.hasActivePayment) {
       await billing.cancel({

clients/trieve-shopify-extension/app/routes/webhooks.app.app_subscriptions.update.tsx

@@ -20,7 +20,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   const key = await validateTrieveAuthWehbook(shop);
   const trieve = sdkFromKey(key);
 
-  console.log(`Received ${topic} webhook for ${shop}`);
+  console.log(`Received ${topic} webhook for ${shop}`, payload);
   const organization_id = await db.apiKey.findFirst({
     where: {
       shop: `https://${shop}`,
@@ -30,17 +30,24 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     return new Response("Organization not found", { status: 404 });
   }
 
-  const data = await admin?.graphql(
-    `
-    query {
-      currentAppInstallation {
-        activeSubscriptions {
-          currentPeriodEnd
+  let data;
+  try {
+    data = await admin?.graphql(
+      `
+      query {
+        currentAppInstallation {
+          activeSubscriptions {
+            currentPeriodEnd
+          }
         }
       }
-    }
-  `,
-  );
+    `,
+    );
+    console.log("Subscription data", data);
+  } catch (error) {
+    console.error("Failed to fetch subscription data:", error);
+    data = null;
+  }
 
   const trievePayload: ShopifyPlanChangePayload = {
     organization_id: organization_id?.organizationId,
@@ -59,6 +66,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     },
   };
 
+  console.log("Trieve payload", trievePayload);
+
   await trieve.handleShopifyPlanChange(
     trievePayload,
     process.env.SHOPIFY_SECRET_KEY || "",