Draft AOFlow JSX DSL

flow.tsx

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>
  );
};

jurisdiction-step.tsx

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>
  );
};