Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-24 09:38:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix subscription styles on mobile (#75)

Browse source
This commit is contained in:
Dimitri POSTOLOV 2022-05-24 22:43:40 +02:00 committed by GitHub
parent a91e013840
commit bf5739167a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/web/app/pages/[orgId]/subscription/manage.tsx
View file

@ -195,14 +195,12 @@ const Inner = ({
<div className="flex w-full flex-col gap-5"> <div className="flex w-full flex-col gap-5">
<Card className="w-full"> <Card className="w-full">
<Heading className="mb-4">Choose Your Plan</Heading> <Heading className="mb-4">Choose Your Plan</Heading>
<div> <BillingPlanPicker
<BillingPlanPicker activePlan={organization.plan}
activePlan={organization.plan} value={plan}
value={plan} plans={result.data.billingPlans}
plans={result.data.billingPlans} onPlanChange={onPlan}
onPlanChange={onPlan} />
/>
</div>
</Card> </Card>
<Card className="w-full self-start" ref={planSummaryRef}> <Card className="w-full self-start" ref={planSummaryRef}>
<Heading className="mb-2">Plan Summary</Heading> <Heading className="mb-2">Plan Summary</Heading>

92
packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'; import { ReactNode, ReactElement } from 'react';
import { List, ListIcon, ListItem } from '@chakra-ui/react'; import { List, ListIcon, ListItem } from '@chakra-ui/react';
import { VscCheck } from 'react-icons/vsc'; import { VscCheck } from 'react-icons/vsc';
import { BillingPlanType, BillingPlansQuery } from '@/graphql'; import { BillingPlanType, BillingPlansQuery } from '@/graphql';
@ -10,8 +10,8 @@ const comingSoon = <span className="text-xs">(coming soon)</span>;
const planCollection: { const planCollection: {
[key in BillingPlanType]: { [key in BillingPlanType]: {
description: string; description: string;
features: Array<React.ReactNode | string>; features: Array<ReactNode | string>;
footer?: React.ReactNode; footer?: ReactNode;
}; };
} = { } = {
[BillingPlanType.Hobby]: { [BillingPlanType.Hobby]: {
@ -59,7 +59,7 @@ const planCollection: {
'360 days of usage data retention', '360 days of usage data retention',
<div>Schema Policy Checks {comingSoon}</div>, <div>Schema Policy Checks {comingSoon}</div>,
<div>ESLint integration {comingSoon}</div>, <div>ESLint integration {comingSoon}</div>,
'SAML (coming soon)', <div>SAML {comingSoon}</div>,
<span className="flex gap-1"> <span className="flex gap-1">
Support from Support from
<Link variant="primary" href="https://the-guild.dev" target="_blank" rel="noreferrer"> <Link variant="primary" href="https://the-guild.dev" target="_blank" rel="noreferrer">
@ -67,18 +67,18 @@ const planCollection: {
</Link> </Link>
</span>, </span>,
], ],
footer: <>Shape a custom plan for your business</>, footer: 'Shape a custom plan for your business',
}, },
}; };
const Plan: React.FC<{ const Plan = (plan: {
isActive: boolean; isActive: boolean;
name: string; name: string;
price: string | number; price: string | number;
description: string; description: string;
features: React.ReactNode[]; features: ReactNode[];
footer?: React.ReactNode; footer?: ReactNode;
}> = plan => { }): ReactElement => {
return ( return (
<div className="flex h-full flex-col justify-between"> <div className="flex h-full flex-col justify-between">
<div> <div>
@ -100,16 +100,14 @@ const Plan: React.FC<{
<div className="text-sm text-gray-500">{plan.description}</div> <div className="text-sm text-gray-500">{plan.description}</div>
<div> <div>
<List spacing={2} className="mt-6"> <List spacing={2} className="mt-6">
{plan.features.map((feature, i) => { {plan.features.map((feature, i) => (
return ( <ListItem key={i}>
<ListItem key={i}> <Section.Subtitle className="flex items-center">
<Section.Subtitle className="flex items-center"> <ListIcon color="gray.500" as={VscCheck} />
<ListIcon color="gray.500" as={VscCheck} /> {feature}
{feature} </Section.Subtitle>
</Section.Subtitle> </ListItem>
</ListItem> ))}
);
})}
</List> </List>
</div> </div>
</div> </div>
@ -123,43 +121,37 @@ const Plan: React.FC<{
); );
}; };
export const BillingPlanPicker: React.FC<{ export const BillingPlanPicker = ({
value,
activePlan,
plans,
onPlanChange,
}: {
value: BillingPlanType; value: BillingPlanType;
activePlan: BillingPlanType; activePlan: BillingPlanType;
plans: BillingPlansQuery['billingPlans']; plans: BillingPlansQuery['billingPlans'];
onPlanChange: (plan: BillingPlanType) => void; onPlanChange: (plan: BillingPlanType) => void;
}> = ({ value, activePlan, plans, onPlanChange }) => { }): ReactElement => {
return ( return (
<RadioGroup <RadioGroup value={value} onValueChange={onPlanChange} className="flex gap-4 md:!flex-row">
value={value} {plans.map(plan => (
onValueChange={onPlanChange} <Radio value={plan.planType} key={plan.id} className="!rounded-md border p-4 md:w-1/3">
className="flex !flex-row content-start items-stretch justify-start !justify-items-start gap-4" <Plan
>
{plans.map(plan => {
return (
<Radio
value={plan.planType}
key={plan.id} key={plan.id}
className="block flex w-1/3 flex-col items-start !rounded-md border p-4" name={plan.name}
> price={
<Plan {
key={plan.id} [BillingPlanType.Hobby]: 'Free',
name={plan.name} [BillingPlanType.Enterprise]: 'Contact Us',
price={ }[plan.planType] || plan.basePrice
plan.planType === BillingPlanType.Hobby }
? 'Free' isActive={activePlan === plan.planType}
: plan.planType === BillingPlanType.Enterprise features={planCollection[plan.planType].features}
? 'Contact Us' description={planCollection[plan.planType].description}
: plan.basePrice! footer={planCollection[plan.planType].footer}
} />
isActive={activePlan === plan.planType} </Radio>
features={planCollection[plan.planType].features} ))}
description={planCollection[plan.planType].description}
footer={planCollection[plan.planType].footer}
/>
</Radio>
);
})}
</RadioGroup> </RadioGroup>
); );
}; };