-
Notifications
You must be signed in to change notification settings - Fork 307
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: SB-740 migrate stripe payment method query
* feat: SB-740 migrated stripe payment method query * feat: SB-740 subscriptions context change * feat: SB-740 little changes on transactionsHistory * feat: SB-740 fix eslint warnings * feat: SB-740 resolve code review issues Approved-by: Michał Kleszcz
- Loading branch information
Showing
31 changed files
with
508 additions
and
407 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 3 additions & 2 deletions
5
...app/src/routes/finances/activeSubscriptionContext/activeSubscriptionContext.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| import { Outlet } from 'react-router-dom'; | ||
| import { useActiveSubscriptionQueryLoader } from '../../../shared/hooks/finances/useSubscriptionPlanDetails'; | ||
| import { ActiveSubscriptionDetailsContextType } from './activeSubscriptionContext.hooks'; | ||
|
|
||
| export const ActiveSubscriptionContext = () => { | ||
| const activeSubscriptionDetailsQueryRef = useActiveSubscriptionQueryLoader(); | ||
| const activeSubscriptionData = useActiveSubscriptionQueryLoader(); | ||
|
|
||
| return <Outlet context={{ ref: activeSubscriptionDetailsQueryRef }} />; | ||
| return <Outlet context={{ ...(activeSubscriptionData as ActiveSubscriptionDetailsContextType) }} />; | ||
| }; |
9 changes: 5 additions & 4 deletions
9
...s/webapp/src/routes/finances/activeSubscriptionContext/activeSubscriptionContext.hooks.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,11 @@ | ||
| import { useOutletContext } from 'react-router-dom'; | ||
| import { PreloadedQuery } from 'react-relay'; | ||
| import { subscriptionActivePlanDetailsQuery } from '../../../modules/subscription/__generated__/subscriptionActivePlanDetailsQuery.graphql'; | ||
| import { StripeAllPaymentsMethodsQueryQuery } from '../../../shared/services/graphqlApi/__generated/gql/graphql'; | ||
|
|
||
| export type ActiveSubscriptionDetailsQueryRefContextType = { | ||
| ref: PreloadedQuery<subscriptionActivePlanDetailsQuery>; | ||
| export type ActiveSubscriptionDetailsContextType = { | ||
| allPaymentMethods: StripeAllPaymentsMethodsQueryQuery['allPaymentMethods']; | ||
| activeSubscriptionQueryRef?: PreloadedQuery<subscriptionActivePlanDetailsQuery> | null; | ||
| }; | ||
|
|
||
| export const useActiveSubscriptionDetailsQueryRef = () => | ||
| useOutletContext<ActiveSubscriptionDetailsQueryRefContextType>(); | ||
| export const useActiveSubscriptionDetails = () => useOutletContext<ActiveSubscriptionDetailsContextType>(); |
12 changes: 7 additions & 5 deletions
12
packages/webapp/src/routes/finances/cancelSubscription/cancelSubscription.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,15 @@ | ||
| import { Suspense } from 'react'; | ||
| import { useActiveSubscriptionDetailsQueryRef } from '../activeSubscriptionContext/activeSubscriptionContext.hooks'; | ||
| import { useActiveSubscriptionDetails } from '../activeSubscriptionContext/activeSubscriptionContext.hooks'; | ||
| import { CancelSubscriptionContent } from './cancelSubscription.content'; | ||
|
|
||
| export const CancelSubscription = () => { | ||
| const activeSubscriptionDetailsQueryRefContext = useActiveSubscriptionDetailsQueryRef(); | ||
| const { activeSubscriptionQueryRef } = useActiveSubscriptionDetails(); | ||
|
|
||
| return activeSubscriptionDetailsQueryRefContext.ref ? ( | ||
| if (!activeSubscriptionQueryRef) return null; | ||
|
|
||
| return ( | ||
| <Suspense fallback={null}> | ||
| <CancelSubscriptionContent activeSubscriptionQueryRef={activeSubscriptionDetailsQueryRefContext.ref} /> | ||
| <CancelSubscriptionContent activeSubscriptionQueryRef={activeSubscriptionQueryRef} /> | ||
| </Suspense> | ||
| ) : null; | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 84 additions & 10 deletions
94
...utes/finances/editPaymentMethod/editPaymentMethodForm/editPaymentMethodForm.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,91 @@ | ||
| import { useActiveSubscriptionDetailsQueryRef } from '../../activeSubscriptionContext/activeSubscriptionContext.hooks'; | ||
| import { EditPaymentMethodFormContentProps, EditPaymentMethodContentForm } from './editPaymentMethodForm.content'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
|
|
||
| export type EditPaymentMethodFormProps = Omit<EditPaymentMethodFormContentProps, 'activeSubscriptionQueryRef'>; | ||
| import { StripePaymentMethodSelector, useStripePaymentMethods } from '../../../../shared/components/finances/stripe'; | ||
| import { useApiForm } from '../../../../shared/hooks/useApiForm'; | ||
| import { useActiveSubscriptionDetails } from '../../activeSubscriptionContext/activeSubscriptionContext.hooks'; | ||
| import { | ||
| PaymentFormFields, | ||
| StripePaymentMethodSelectionType, | ||
| } from '../../../../shared/components/finances/stripe/stripePaymentMethodSelector/stripePaymentMethodSelector.types'; | ||
|
|
||
| export const EditPaymentMethodForm = (props: EditPaymentMethodFormProps) => { | ||
| const activeSubscriptionDetailsQueryRefContext = useActiveSubscriptionDetailsQueryRef(); | ||
| import { Form, SubmitButton } from './editPaymentMethodForm.styles'; | ||
| import { useStripeCardSetup, useStripeSetupIntent } from './editPaymentMethodForm.hooks'; | ||
|
|
||
| if (!activeSubscriptionDetailsQueryRefContext || !activeSubscriptionDetailsQueryRefContext.ref) return null; | ||
| type ChangePaymentFormFields = PaymentFormFields; | ||
|
|
||
| type EditPaymentMethodFormProps = { | ||
| onSuccess: () => void; | ||
| allPaymentMethods?: any; | ||
| }; | ||
|
|
||
| export const EditPaymentMethodForm = ({ onSuccess }: EditPaymentMethodFormProps) => { | ||
| const { allPaymentMethods } = useActiveSubscriptionDetails(); | ||
|
|
||
| const { createSetupIntent } = useStripeSetupIntent(); | ||
| const { confirmCardSetup } = useStripeCardSetup(); | ||
|
|
||
| const { updateDefaultPaymentMethod } = useStripePaymentMethods(); | ||
|
|
||
| const apiFormControls = useApiForm<ChangePaymentFormFields>({ mode: 'onChange' }); | ||
| const { | ||
| handleSubmit, | ||
| setGenericError, | ||
| setGraphQLResponseErrors, | ||
| form: { formState }, | ||
| } = apiFormControls; | ||
|
|
||
| const setCardAsDefault = async (cardId: string) => { | ||
| try { | ||
| await updateDefaultPaymentMethod(cardId); | ||
| onSuccess(); | ||
| } catch {} | ||
| }; | ||
|
|
||
| const setupNewCard = async (data: ChangePaymentFormFields) => { | ||
| const setupIntentResponse = await createSetupIntent(); | ||
| if (setupIntentResponse.errors) { | ||
| return setGraphQLResponseErrors(setupIntentResponse.errors); | ||
| } | ||
|
|
||
| const intent = setupIntentResponse.data; | ||
| if (!intent) { | ||
| return; | ||
| } | ||
|
|
||
| const result = await confirmCardSetup({ | ||
| paymentMethod: data.paymentMethod, | ||
| setupIntent: intent, | ||
| }); | ||
|
|
||
| if (!result) { | ||
| return; | ||
| } | ||
|
|
||
| if (result.error) { | ||
| return setGenericError(result.error.message); | ||
| } | ||
|
|
||
| if (result.setupIntent?.status === 'succeeded' && result.setupIntent.payment_method) { | ||
| await setCardAsDefault(result.setupIntent.payment_method as string); | ||
| } | ||
| }; | ||
|
|
||
| const onSubmit = async (data: ChangePaymentFormFields) => { | ||
| if (data.paymentMethod.type === StripePaymentMethodSelectionType.NEW_CARD) { | ||
| return setupNewCard(data); | ||
| } else { | ||
| if (!data.paymentMethod.data.pk) return; | ||
| return setCardAsDefault(data.paymentMethod.data.pk); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <EditPaymentMethodContentForm | ||
| {...props} | ||
| activeSubscriptionQueryRef={activeSubscriptionDetailsQueryRefContext.ref} | ||
| /> | ||
| <Form onSubmit={handleSubmit(onSubmit)}> | ||
| <StripePaymentMethodSelector formControls={apiFormControls} initialValue={allPaymentMethods?.edges[0]?.node} /> | ||
|
|
||
| <SubmitButton disabled={!formState.isValid || formState.isSubmitting}> | ||
| <FormattedMessage defaultMessage="Save" id="Subscription / change payment method / submit button" /> | ||
| </SubmitButton> | ||
| </Form> | ||
| ); | ||
| }; |
92 changes: 0 additions & 92 deletions
92
...routes/finances/editPaymentMethod/editPaymentMethodForm/editPaymentMethodForm.content.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.