feature: add banner for usage limit

Author: densumesh

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

@@ -1,5 +1,5 @@
 import { useSubmit } from "@remix-run/react";
-import { BlockStack, Box, Button, Card, DescriptionList, DescriptionListProps, InlineStack, Text } from "@shopify/polaris";
+import { BlockStack, Box, Button, Card, DescriptionList, DescriptionListProps, InlineStack, Text, Banner } from "@shopify/polaris";
 import { ProgressBar } from "./ProgressBar";
 
 export const PlanView = ({
@@ -45,7 +45,32 @@ export const PlanView = ({
                 </Box>
 
                 <Box paddingInline="400" paddingBlockEnd="400">
-                    <ProgressBar progress={usagePercentage} />
+                    {usagePercentage >= 80 && usagePercentage < 90 && (
+                        <Box paddingBlockEnd="400">
+                            <Banner
+                                title={`You are at ${usagePercentage}% of your usage limit.`}
+                                tone="warning"
+                            >
+                                <p>Consider upgrading your plan to avoid potential disruptions.</p>
+                            </Banner>
+                        </Box>
+                    )}
+                    {usagePercentage >= 90 && (
+                        <Box paddingBlockEnd="400">
+                            <Banner
+                                title={`You have reached ${usagePercentage}% of your usage limit.`}
+                                tone="critical"
+                            >
+                                <p>Upgrade your plan immediately to avoid service disruption.</p>
+                            </Banner>
+                        </Box>
+                    )}
+                    <div className="w-full">
+                        <span className="text-sm font-bold pb-1">
+                            Usage
+                        </span>
+                        <ProgressBar progress={usagePercentage} />
+                    </div>
                     <DescriptionList items={planItems} />
                 </Box>
             </BlockStack>

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

@@ -10,7 +10,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
 
     return (
         <Box paddingBlockEnd="200">
-            <div className="w-full bg-gray-200 rounded overflow-hidden h-2 mb-1">
+            <div className="w-full bg-gray-200 rounded overflow-hidden h-2 mb-1 mt-1">
                 <div
                     className="bg-[#800080e6] h-full transition-width duration-300 ease-in-out"
                     style={{ width: `${progressPercentage}%` }}

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

@@ -36,7 +36,7 @@ import { TotalUniqueVisitors } from "app/components/analytics/component/TotalUni
 import { TopPages } from "app/components/analytics/component/TopPages";
 import { useState } from "react";
 import { defaultSearchAnalyticsFilter } from "app/queries/analytics/search";
-import { Granularity } from "trieve-ts-sdk";
+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";
@@ -131,8 +131,8 @@ export default function Dashboard() {
   if (organization?.plan?.type === "flat") {
     planItems.push(
       {
-        term: "Messages Sent",
-        description: organizationUsage?.current_months_message_count?.toLocaleString() || "N/A",
+        term: "Message Usage",
+        description: `${organizationUsage?.current_months_message_count?.toLocaleString() ?? 0} / ${(organization?.plan as StripePlan)?.message_count.toLocaleString()}`,
       },
     );
   }
@@ -253,7 +253,7 @@ export default function Dashboard() {
                 <Box paddingInline="400" paddingBlockStart="400">
                   <InlineStack align="space-between">
                     <Text variant="headingMd" as="h2">
-                      Usage Overview
+                      Sync Status
                     </Text>
                     <Badge>{planType + " Plan"}</Badge>
                   </InlineStack>
@@ -280,7 +280,7 @@ export default function Dashboard() {
             <PlanView
               planItems={planItems}
               setShowCancelModal={setShowCancelModal}
-              usagePercentage={(organizationUsage?.current_months_message_count ?? 0) / organization?.plan?.component_loads}
+              usagePercentage={((organizationUsage?.current_months_message_count ?? 0) / (organization?.plan as StripePlan)?.message_count) * 100}
             />
           </BlockStack>
         </Layout.Section>

clients/trieve-shopify-extension/yarn.lock

@@ -9353,9 +9353,9 @@ trieve-search-component@0.4.55:
     trieve-ts-sdk "0.0.73"
 
 trieve-ts-sdk@*:
-  version "0.0.82"
-  resolved "https://registry.yarnpkg.com/trieve-ts-sdk/-/trieve-ts-sdk-0.0.82.tgz#32dcd5cfe37706bd4cff952f415f2d3b15e1f198"
-  integrity sha512-d3qvhYd+KjsImB313xt8rbbJ0ZaaIMKmxhzZaFeXy6uPRvjWPUWKIDYKG4E/a0wvsEkW++zfmP+UlYBB2W+e6w==
+  version "0.0.83"
+  resolved "https://registry.yarnpkg.com/trieve-ts-sdk/-/trieve-ts-sdk-0.0.83.tgz#a9bd0bbd71e09f3f9017844d91894fde95c5edb9"
+  integrity sha512-EPDy342dDTNVmzzALMtk9JExCn5yt1oyp9moiS4VLyN52hFaKY4MxoSsEp9/Bp7PRNXS2Z8u1H+PTn+joovhbw==
 
 trieve-ts-sdk@0.0.73:
   version "0.0.73"

clients/ts-sdk/package.json

@@ -17,7 +17,7 @@
   "files": [
     "dist"
   ],
-  "version": "0.0.81",
+  "version": "0.0.83",
   "license": "MIT",
   "scripts": {
     "lint": "eslint 'src/**/*.ts'",

package.json

@@ -28,5 +28,5 @@
   "devDependencies": {
     "turbo": "^2.0.4"
   },
-  "packageManager": "yarn@1.22.22"
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }