Last active
August 7, 2024 21:53
-
-
Save jbachhardie/82e4d7d547d4fb5c14de5acb8c072d4d to your computer and use it in GitHub Desktop.
Draft AOFlow JSX DSL
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
| import { useApolloClient } from "@apollo/client"; | |
| import { accountTypeDetailsLockedInDetailsUpdate } from "@wealthsimple/gql-operations-account-type-details-update"; | |
| import { Flow } from "@wealthsimple/ao-flow-sdk"; | |
| import { | |
| JurisdictionSelectionStep, | |
| jurisdictionSelectionSchema, | |
| } from "./jurisdiction-step"; | |
| interface RIFState { | |
| jurisdiction?: Jurisdiction; | |
| } | |
| type RIFScreens = "jurisdiction-selection" | "statements"; | |
| // This allows all the flow components to be typesafe | |
| const RIFFlow = new Flow<RIFScreens, RIFState>(); | |
| export const RIFWizard = () => { | |
| const apolloClient = useApolloClient(); | |
| return ( | |
| <RIFFlow.Container initialState={{}}> | |
| <RIFFlow.Screen | |
| name="jurisdiction-selection" | |
| component={JurisdictionSelectionStep} | |
| formSchema={jurisdictionSelectionSchema} | |
| formInitialState={(state) => ({ jurisdiction: state.jurisdiction })} | |
| onSubmit={async ({ actions, state }, form) => { | |
| const newState = { | |
| ...state, | |
| jurisdiction: form.getValues().jurisdiction, | |
| }; | |
| if (newState.jurisdiction === "MB") { | |
| return actions.next({ | |
| step: "statements", | |
| state: newState, | |
| }); | |
| } | |
| await accountTypeDetailsLockedInDetailsUpdate(apolloClient, { | |
| variables: newState, | |
| }); | |
| return actions.complete(); | |
| }} | |
| /> | |
| </RIFFlow.Container> | |
| ); | |
| }; |
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
| import { FlowStepProps } from "@wealthsimple/ao-flow-sdk"; | |
| import { XPScreen, XPTitle, XPText } from "@wealthsimple/xp-components"; | |
| import { useLocale } from "../locale"; | |
| export const jurisdictionSelectionSchema = dataSchema.pick({ | |
| jurisdiction: true, | |
| }); | |
| export const JurisdictionSelectionStep = ({ | |
| // This prop type can be checked to match with the step its used in | |
| // which will give us forms that are fully type-safe but can still be | |
| // shared between flows | |
| Form, | |
| }: FlowStepProps<z.infer<typeof jurisdictionSelectionSchema>>) => { | |
| const getMessage = useLocale(); | |
| return ( | |
| <XPScreen> | |
| <XPTitle> | |
| {getMessage("account-opening::jurisdiction-selection::title")} | |
| </XPTitle> | |
| <XPText> | |
| {getMessage("account-opening::jurisdiction-selection::description")} | |
| </XPText> | |
| <Form.SelectInput | |
| field="jurisdiction" | |
| options={jurisdictions} | |
| title={getMessage("account-opening::jurisdiction-selection::input")} | |
| /> | |
| <Form.SubmitButton | |
| title={getMessage("account-opening::jurisdiction-selection::input")} | |
| /> | |
| </XPScreen> | |
| ); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment