From 20a9fd0f13b09a4e0793a281fc879fcbd44bfcfa Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 3 Jun 2022 17:17:54 +0800 Subject: [PATCH] refactor: bring out components from slug/new into their own files --- .../NewProject/EmptyPaymentMethodWarning.tsx | 46 +++++++ .../NewProject/FreeProjectLimitWarning.tsx | 29 +++++ .../NotOrganizationOwnerWarning.tsx | 25 ++++ .../ProjectCreationDisabledWarning.tsx | 27 ++++ .../Organization/NewProject/index.ts | 11 ++ studio/pages/new/[slug].tsx | 116 ++---------------- 6 files changed, 148 insertions(+), 106 deletions(-) create mode 100644 studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx create mode 100644 studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx create mode 100644 studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx create mode 100644 studio/components/interfaces/Organization/NewProject/ProjectCreationDisabledWarning.tsx create mode 100644 studio/components/interfaces/Organization/NewProject/index.ts diff --git a/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx b/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx new file mode 100644 index 00000000000..3d275e2c234 --- /dev/null +++ b/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx @@ -0,0 +1,46 @@ +import { useState } from 'react' +import { observer } from 'mobx-react-lite' +import { Button, IconAlertCircle } from '@supabase/ui' + +import { useStore } from 'hooks' +import { getURL } from 'lib/helpers' +import InformationBox from 'components/ui/InformationBox' +import { AddNewPaymentMethodModal } from 'components/interfaces/Billing' + +const EmptyPaymentMethodWarning = observer( + ({ stripeCustomerId }: { stripeCustomerId: string | undefined }) => { + const { ui } = useStore() + const slug = ui.selectedOrganization?.slug + + const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState(false) + + return ( +
+ } + defaultVisibility={true} + hideCollapse + title="Your organization has no payment methods" + description={ +
+

+ You need to add a payment method for your organization before creating a paid + project. +

+ +
+ } + /> + setShowAddPaymentMethodModal(false)} + /> +
+ ) + } +) + +export default EmptyPaymentMethodWarning diff --git a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx new file mode 100644 index 00000000000..04d314f86ca --- /dev/null +++ b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx @@ -0,0 +1,29 @@ +import { FC } from 'react' +import { IconAlertCircle } from '@supabase/ui' +import InformationBox from 'components/ui/InformationBox' + +interface Props { + limit: number +} + +const FreeProjectLimitWarning: FC = ({ limit }) => { + return ( +
+ } + defaultVisibility={true} + hideCollapse + title="Your account has reached its free project limit" + description={ +
+

+ {`Your account can only have up to ${limit} free projects - to create another free project, you'll need to delete an existing free project first. Otherwise, you may create a project on the Pro tier instead.`} +

+
+ } + /> +
+ ) +} + +export default FreeProjectLimitWarning diff --git a/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx b/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx new file mode 100644 index 00000000000..5a442046f33 --- /dev/null +++ b/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx @@ -0,0 +1,25 @@ +import { IconAlertCircle } from '@supabase/ui' +import InformationBox from 'components/ui/InformationBox' + +const NotOrganizationOwnerWarning = () => { + return ( +
+ } + defaultVisibility={true} + hideCollapse + title="You do not have permission to create a project" + description={ +
+

+ Only the organization owner can create new projects. Contact your organization owner + to create a new project for this organization. +

+
+ } + /> +
+ ) +} + +export default NotOrganizationOwnerWarning diff --git a/studio/components/interfaces/Organization/NewProject/ProjectCreationDisabledWarning.tsx b/studio/components/interfaces/Organization/NewProject/ProjectCreationDisabledWarning.tsx new file mode 100644 index 00000000000..ecc16cbed27 --- /dev/null +++ b/studio/components/interfaces/Organization/NewProject/ProjectCreationDisabledWarning.tsx @@ -0,0 +1,27 @@ +import { IconAlertCircle } from '@supabase/ui' +import InformationBox from 'components/ui/InformationBox' + +const ProjectCreationDisabledWarning = () => { + return ( +
+ } + defaultVisibility={true} + hideCollapse + title="Project creation is currently disabled" + description={ +
+

+ Our engineers are currently working on a fix. You can follow updates on{' '} + + https://status.supabase.com/ + +

+
+ } + /> +
+ ) +} + +export default ProjectCreationDisabledWarning diff --git a/studio/components/interfaces/Organization/NewProject/index.ts b/studio/components/interfaces/Organization/NewProject/index.ts new file mode 100644 index 00000000000..dd0337dbb3b --- /dev/null +++ b/studio/components/interfaces/Organization/NewProject/index.ts @@ -0,0 +1,11 @@ +import NotOrganizationOwnerWarning from './NotOrganizationOwnerWarning' +import FreeProjectLimitWarning from './FreeProjectLimitWarning' +import ProjectCreationDisabledWarning from './ProjectCreationDisabledWarning' +import EmptyPaymentMethodWarning from './EmptyPaymentMethodWarning' + +export { + NotOrganizationOwnerWarning, + FreeProjectLimitWarning, + ProjectCreationDisabledWarning, + EmptyPaymentMethodWarning, +} diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx index 292ea305935..e370d067e96 100644 --- a/studio/pages/new/[slug].tsx +++ b/studio/pages/new/[slug].tsx @@ -7,9 +7,10 @@ import { useRef, useState, useEffect } from 'react' import { debounce, isUndefined, values } from 'lodash' import { toJS } from 'mobx' import { observer } from 'mobx-react-lite' -import { Button, Listbox, IconUsers, IconAlertCircle, Input, IconLoader, Alert } from '@supabase/ui' +import { Button, Listbox, IconUsers, Input, IconLoader, Alert } from '@supabase/ui' -import { getURL, passwordStrength } from 'lib/helpers' +import { NextPageWithLayout } from 'types' +import { passwordStrength } from 'lib/helpers' import { post } from 'lib/common/fetch' import { API_URL, @@ -27,10 +28,13 @@ import { useStore, withAuth, useSubscriptionStats } from 'hooks' import { WizardLayoutWithoutAuth } from 'components/layouts' import Panel from 'components/to-be-cleaned/Panel' -import InformationBox from 'components/ui/InformationBox' import PasswordStrengthBar from 'components/ui/PasswordStrengthBar' -import { AddNewPaymentMethodModal } from 'components/interfaces/Billing' -import { NextPageWithLayout } from 'types' +import { + FreeProjectLimitWarning, + NotOrganizationOwnerWarning, + ProjectCreationDisabledWarning, + EmptyPaymentMethodWarning, +} from 'components/interfaces/Organization/NewProject' interface StripeCustomer { paymentMethods: any @@ -38,29 +42,6 @@ interface StripeCustomer { error?: any } -const DisabledBox = () => { - return ( -
- } - defaultVisibility={true} - hideCollapse - title="Project creation is currently disabled" - description={ -
-

- Our engineers are currently working on a fix. You can follow updates on{' '} - - https://status.supabase.com/ - -

-
- } - /> -
- ) -} - async function fetchStripeAccount(stripeCustomerId: string) { try { const customer = await post(`${API_URL}/stripe/customer`, { @@ -254,7 +235,7 @@ const Wizard: NextPageWithLayout = () => { {projectCreationDisabled ? ( - + ) : ( <> @@ -432,80 +413,3 @@ const PageLayout = withAuth( Wizard.getLayout = (page) => {page} export default observer(Wizard) - -const NotOrganizationOwnerWarning = () => { - return ( -
- } - defaultVisibility={true} - hideCollapse - title="You do not have permission to create a project" - description={ -
-

- Only the organization owner can create new projects. Contact your organization owner - to create a new project for this organization. -

-
- } - /> -
- ) -} - -const FreeProjectLimitWarning = ({ limit }: { limit: number }) => { - return ( -
- } - defaultVisibility={true} - hideCollapse - title="Your account has reached its free project limit" - description={ -
-

- {`Your account can only have up to ${limit} free projects - to create another free project, you'll need to delete an existing free project first. Otherwise, you may create a project on the Pro tier instead.`} -

-
- } - /> -
- ) -} - -const EmptyPaymentMethodWarning = observer( - ({ stripeCustomerId }: { stripeCustomerId: string | undefined }) => { - const { ui } = useStore() - const slug = ui.selectedOrganization?.slug - - const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState(false) - - return ( -
- } - defaultVisibility={true} - hideCollapse - title="Your organization has no payment methods" - description={ -
-

- You need to add a payment method for your organization before creating a paid - project. -

- -
- } - /> - setShowAddPaymentMethodModal(false)} - /> -
- ) - } -)