Skip to content

Commit f80c3e3

Browse files
drew-harriscdxker
drew-harris
authored and
cdxker
committed
styling: fix wrap for plan details
1 parent fe03a75 commit f80c3e3

2 files changed

Lines changed: 126 additions & 138 deletions

File tree

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

Lines changed: 124 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,98 +4,144 @@ import {
44
Box,
55
Button,
66
Card,
7-
DescriptionList,
8-
DescriptionListProps,
97
InlineStack,
108
Text,
119
Banner,
1210
Badge,
11+
Modal,
1312
} from "@shopify/polaris";
1413
import { ProgressBar } from "./ProgressBar";
15-
import { TrievePlan } from "trieve-ts-sdk";
14+
import { StripePlan } from "trieve-ts-sdk";
15+
import { useState } from "react";
16+
import { useQuery } from "@tanstack/react-query";
17+
import { organizationUsageQuery } from "app/queries/usage";
18+
import { useTrieve } from "app/context/trieveContext";
1619

17-
export const PlanView = ({
18-
plan,
19-
planItems,
20-
setShowCancelModal,
21-
usagePercentage,
22-
}: {
23-
plan: TrievePlan | null | undefined;
24-
planItems: DescriptionListProps["items"];
25-
setShowCancelModal: (show: boolean) => void;
26-
usagePercentage: number;
27-
}) => {
20+
export const PlanView = () => {
21+
const { organization, trieve, refetch: refetchTrieve } = useTrieve();
22+
const [showCancelModal, setShowCancelModal] = useState(false);
2823
const submit = useSubmit();
2924

25+
const { data: organizationUsage } = useQuery(organizationUsageQuery(trieve));
26+
27+
let planItems = [];
28+
29+
if (organization?.plan?.type === "flat") {
30+
planItems.push({
31+
term: "Message Usage",
32+
description: `${organizationUsage?.current_months_message_count?.toLocaleString() ?? 0} / ${((organization?.plan as StripePlan)?.messages_per_month ?? 1000).toLocaleString()}`,
33+
});
34+
}
35+
36+
const usagePercentage =
37+
((organizationUsage?.current_months_message_count ?? 0) /
38+
((organization?.plan as StripePlan)?.messages_per_month ?? 1000)) *
39+
100;
40+
3041
return (
31-
<Card>
32-
<BlockStack gap="400">
33-
<Box paddingInline="400" paddingBlockStart="400">
34-
<InlineStack align="space-between">
35-
<InlineStack gap="400" align="center" blockAlign="center">
42+
<>
43+
<Modal
44+
open={showCancelModal}
45+
onClose={() => {
46+
setShowCancelModal(false);
47+
}}
48+
title="Cancel Subscription"
49+
>
50+
<div className="flex flex-col gap-4 p-4">
51+
<Text as="p">Do you want to cancel your subscription?</Text>
52+
<Button
53+
onClick={() => {
54+
submit(
55+
{
56+
action: "cancel",
57+
},
58+
{
59+
method: "post",
60+
},
61+
);
62+
setShowCancelModal(false);
63+
setTimeout(() => {
64+
refetchTrieve();
65+
}, 5000);
66+
}}
67+
>
68+
Cancel Subscription
69+
</Button>
70+
</div>
71+
</Modal>
72+
<Card>
73+
<BlockStack>
74+
<div className="pb-4">
75+
<InlineStack align="space-between">
3676
<Text variant="headingMd" as="h2">
3777
Plan Details
3878
</Text>
39-
<Badge>{plan?.name}</Badge>
40-
</InlineStack>
41-
<InlineStack gap="200" align="center" blockAlign="center">
42-
<Button
43-
onClick={() => {
44-
submit(
45-
{
46-
action: "modify",
47-
},
48-
{
49-
method: "post",
50-
},
51-
);
52-
}}
53-
>
54-
Modify
55-
</Button>
56-
<Button
57-
onClick={() => {
58-
setShowCancelModal(true);
59-
}}
60-
>
61-
Cancel
62-
</Button>
79+
<Badge>{organization.plan?.name}</Badge>
6380
</InlineStack>
64-
</InlineStack>
65-
</Box>
81+
</div>
6682

67-
<Box paddingInline="400" paddingBlockEnd="400">
68-
{usagePercentage >= 80 && usagePercentage < 90 && (
69-
<Box paddingBlockEnd="400">
70-
<Banner
71-
title={`You are at ${usagePercentage.toPrecision(5)}% of your usage limit.`}
72-
tone="warning"
73-
>
74-
<p>
75-
Consider upgrading your plan to avoid potential disruptions.
76-
</p>
77-
</Banner>
78-
</Box>
79-
)}
80-
{usagePercentage >= 90 && (
81-
<Box paddingBlockEnd="400">
82-
<Banner
83-
title={`You have reached ${usagePercentage.toPrecision(5)}% of your usage limit.`}
84-
tone="critical"
85-
>
86-
<p>
87-
Upgrade your plan immediately to avoid service disruption.
88-
</p>
89-
</Banner>
90-
</Box>
91-
)}
92-
<BlockStack>
93-
<span className="text-sm font-bold pb-1">Usage</span>
94-
<ProgressBar progress={usagePercentage} />
95-
</BlockStack>
96-
<DescriptionList items={planItems} />
97-
</Box>
98-
</BlockStack>
99-
</Card>
83+
<Box>
84+
{usagePercentage >= 80 && usagePercentage < 90 && (
85+
<Box>
86+
<Banner
87+
title={`You are at ${usagePercentage.toPrecision(5)}% of your usage limit.`}
88+
tone="warning"
89+
>
90+
<p>
91+
Consider upgrading your plan to avoid potential disruptions.
92+
</p>
93+
</Banner>
94+
</Box>
95+
)}
96+
{usagePercentage >= 90 && (
97+
<Box>
98+
<Banner
99+
title={`You have reached ${usagePercentage.toPrecision(5)}% of your usage limit.`}
100+
tone="critical"
101+
>
102+
<p>
103+
Upgrade your plan immediately to avoid service disruption.
104+
</p>
105+
</Banner>
106+
</Box>
107+
)}
108+
<BlockStack>
109+
<span className="text-sm font-bold pb-1">Usage</span>
110+
<ProgressBar progress={usagePercentage} />
111+
</BlockStack>
112+
{planItems.map((item) => (
113+
<div className="py-2">
114+
<div className="text-sm font-bold pb-1">{item.term}</div>
115+
<div>{item.description}</div>
116+
</div>
117+
))}
118+
</Box>
119+
</BlockStack>
120+
<div className="h-2"></div>
121+
<InlineStack gap="200" align="end" blockAlign="center">
122+
<Button
123+
onClick={() => {
124+
submit(
125+
{
126+
action: "modify",
127+
},
128+
{
129+
method: "post",
130+
},
131+
);
132+
}}
133+
>
134+
Modify Plan
135+
</Button>
136+
<Button
137+
onClick={() => {
138+
setShowCancelModal(true);
139+
}}
140+
>
141+
Cancel Plan
142+
</Button>
143+
</InlineStack>
144+
</Card>
145+
</>
100146
);
101147
};

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

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { useTrieve } from "app/context/trieveContext";
2-
import { useSubmit } from "@remix-run/react";
31
import {
42
Card,
53
Text,
@@ -8,15 +6,12 @@ import {
86
InlineStack,
97
Layout,
108
Link,
11-
Modal,
129
} from "@shopify/polaris";
1310
import {
1411
CalendarIcon,
1512
EnvelopeIcon,
1613
QuestionCircleIcon,
1714
} from "@shopify/polaris-icons";
18-
import { organizationUsageQuery } from "app/queries/usage";
19-
import { useQuery } from "@tanstack/react-query";
2015
import { Onboarding } from "app/components/onboarding/Onboarding";
2116
import { Loader } from "app/loaders";
2217
import { lastStepIdQuery } from "app/queries/onboarding";
@@ -28,7 +23,7 @@ import { TotalUniqueVisitors } from "app/components/analytics/component/TotalUni
2823
import { TopPages } from "app/components/analytics/component/TopPages";
2924
import { useState } from "react";
3025
import { defaultSearchAnalyticsFilter } from "app/queries/analytics/search";
31-
import { Granularity, StripePlan } from "trieve-ts-sdk";
26+
import { Granularity } from "trieve-ts-sdk";
3227
import { ActionFunctionArgs } from "@remix-run/node";
3328
import { authenticate } from "app/shopify.server";
3429
import { PlanView } from "app/components/PlanView";
@@ -63,54 +58,11 @@ export const action = async ({ request }: ActionFunctionArgs) => {
6358
};
6459

6560
export default function Dashboard() {
66-
const { organization, trieve, refetch: refetchTrieve } = useTrieve();
6761
const [filters, setFilters] = useState(defaultSearchAnalyticsFilter);
6862
const [granularity, setGranularity] = useState<Granularity>("day");
69-
const [showCancelModal, setShowCancelModal] = useState(false);
70-
const submit = useSubmit();
71-
72-
const { data: organizationUsage } = useQuery(organizationUsageQuery(trieve));
73-
74-
let planItems = [];
75-
76-
if (organization?.plan?.type === "flat") {
77-
planItems.push({
78-
term: "Message Usage",
79-
description: `${organizationUsage?.current_months_message_count?.toLocaleString() ?? 0} / ${((organization?.plan as StripePlan)?.messages_per_month ?? 1000).toLocaleString()}`,
80-
});
81-
}
8263

8364
return (
8465
<>
85-
<Modal
86-
open={showCancelModal}
87-
onClose={() => {
88-
setShowCancelModal(false);
89-
}}
90-
title="Cancel Subscription"
91-
>
92-
<div className="flex flex-col gap-4 p-4">
93-
<Text as="p">Do you want to cancel your subscription?</Text>
94-
<Button
95-
onClick={() => {
96-
submit(
97-
{
98-
action: "cancel",
99-
},
100-
{
101-
method: "post",
102-
},
103-
);
104-
setShowCancelModal(false);
105-
setTimeout(() => {
106-
refetchTrieve();
107-
}, 5000);
108-
}}
109-
>
110-
Cancel Subscription
111-
</Button>
112-
</div>
113-
</Modal>
11466
<Layout>
11567
<Layout.Section>
11668
<BlockStack gap="400">
@@ -201,17 +153,7 @@ export default function Dashboard() {
201153
</BlockStack>
202154
</Card>
203155
<HomepageSyncStatus />
204-
<PlanView
205-
plan={organization?.plan}
206-
planItems={planItems}
207-
setShowCancelModal={setShowCancelModal}
208-
usagePercentage={
209-
((organizationUsage?.current_months_message_count ?? 0) /
210-
((organization?.plan as StripePlan)?.messages_per_month ??
211-
1000)) *
212-
100
213-
}
214-
/>
156+
<PlanView />
215157
</BlockStack>
216158
</Layout.Section>
217159
</Layout>

0 commit comments

Comments
 (0)