Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updating PricePlans #4774

Merged
merged 3 commits into from
Apr 19, 2024
Merged

updating PricePlans #4774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86a37f7
updating PricePlans
Duncid Apr 19, 2024
3b89049
Fix import
Duncid Apr 19, 2024
accd59c
Dark support
Duncid Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions sparkle/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sparkle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dust-tt/sparkle",
"version": "0.2.138",
"version": "0.2.139",
"scripts": {
"build": "rm -rf dist && rollup -c",
"build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
Expand Down
26 changes: 18 additions & 8 deletions sparkle/src/components/PriceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,21 +190,31 @@ PriceTable.Item = function ({
interface PriceTableActionContainerProps {
children: ReactNode;
size?: "xs" | "sm";
position?: "top" | "bottom";
}

PriceTable.ActionContainer = function ({
children,
size = "xs",
position = "bottom",
}: PriceTableActionContainerProps) {
return (
<div
className={classNames(
"s-flex s-w-full s-flex-grow s-justify-center s-px-2",
size === "xs" ? "s-py-2" : "s-py-4"
)}
>
<div className="s-flex s-h-full s-flex-col s-justify-end">{children}</div>
</div>
<>
{position === "bottom" ? <div className="s-h-full s-w-full" /> : null}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty div, seems weird, no?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's here for spacing, it's ok!

<div
className={classNames(
"s-flex s-w-full s-justify-center s-px-2",
size === "xs" ? "s-py-2" : "s-py-4",
position === "top"
? "s-border-b s-border-structure-100 dark:s-border-structure-200-dark/50"
: ""
)}
>
<div className="s-flex s-h-full s-flex-col s-justify-end">
{children}
</div>
</div>
</>
);
};

Expand Down
61 changes: 18 additions & 43 deletions sparkle/src/stories/PriceTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,15 @@ export const PricingXS = () => {
return (
<div className="s-h-full s-w-full">
<PriceTable.Container>
<PriceTable
title="Test"
price="0€"
priceLabel="/ month"
color="emerald"
>
<PriceTable.Item label="Single member / workspace" variant="dash" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
<PriceTable.Item label="20 messages a week" variant="dash" />
<PriceTable.Item label="Static Data Sources (35Mo)" variant="dash" />
<PriceTable.Item label="Connected Data Sources" variant="xmark" />
<PriceTable.ActionContainer>
<div className="s-h-9 s-text-base s-font-bold s-text-element-600">
Your current plan
</div>
</PriceTable.ActionContainer>
</PriceTable>
<PriceTable
title="Business"
price="0€"
color="sky"
color="emerald"
priceLabel="/ month / seat"
>
<PriceTable.ActionContainer position="top">
<Button size="sm" variant="primary" label="Start Now" />
</PriceTable.ActionContainer>
<PriceTable.Item label="Unlimited members / workspace" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
Expand All @@ -46,10 +31,13 @@ export const PricingXS = () => {
<PriceTable.Item label="1 user" />
<PriceTable.Item label="1 user" />
<PriceTable.ActionContainer>
<Button size="sm" variant="primary" label="Select this plan" />
<Button size="sm" variant="primary" label="Start Now" />
</PriceTable.ActionContainer>
</PriceTable>
<PriceTable title="Enterprise" price="Custom">
<PriceTable.ActionContainer position="top">
<Button size="sm" variant="primary" label="Start Now" />
</PriceTable.ActionContainer>
<PriceTable.Item label="Unlimited members / workspace" />
<PriceTable.Item label="Unlimited workspaces" />
<PriceTable.Item label="Unlimited custom assistants" />
Expand All @@ -60,7 +48,7 @@ export const PricingXS = () => {
<PriceTable.Item label="1 user" />
<PriceTable.Item label="1 user" />
<PriceTable.ActionContainer>
<Button size="sm" variant="secondary" label="Contact us" />
<Button size="sm" variant="primary" label="Contact us" />
</PriceTable.ActionContainer>
</PriceTable>
</PriceTable.Container>
Expand All @@ -73,31 +61,15 @@ export const PricingSM = () => {
<div className="s-h-full s-w-full">
<PriceTable.Container>
<PriceTable
title="Test"
price="0€"
priceLabel="/ month"
color="emerald"
size="sm"
>
<PriceTable.Item label="Single member / workspace" variant="dash" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
<PriceTable.Item label="20 messages a week" variant="dash" />
<PriceTable.Item label="Static Data Sources (35Mo)" variant="dash" />
<PriceTable.Item label="Connected Data Sources" variant="xmark" />
<PriceTable.ActionContainer>
<div className="s-h-9 s-text-base s-font-bold s-text-element-600">
Your current plan
</div>
</PriceTable.ActionContainer>
</PriceTable>
<PriceTable
title="Business"
price="0€"
title="pro"
price="29€"
color="sky"
priceLabel="/ month / seat"
size="sm"
>
<PriceTable.ActionContainer position="top">
<Button size="md" variant="primary" label="Select this plan" />
</PriceTable.ActionContainer>
<PriceTable.Item label="Unlimited members / workspace" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
Expand All @@ -110,6 +82,9 @@ export const PricingSM = () => {
</PriceTable.ActionContainer>
</PriceTable>
<PriceTable title="Enterprise" price="Custom" size="sm">
<PriceTable.ActionContainer position="top">
<Button size="md" variant="primary" label="Contact us" />
</PriceTable.ActionContainer>
<PriceTable.Item label="Unlimited members / workspace" />
<PriceTable.Item label="Unlimited workspaces" />
<PriceTable.Item label="Unlimited custom assistants" />
Expand All @@ -120,7 +95,7 @@ export const PricingSM = () => {
<PriceTable.Item label="1 user" />
<PriceTable.Item label="1 user" />
<PriceTable.ActionContainer>
<Button size="md" variant="secondary" label="Contact us" />
<Button size="md" variant="primary" label="Contact us" />
</PriceTable.ActionContainer>
</PriceTable>
</PriceTable.Container>
Expand Down
Loading