wip

clients/banking/src/components/DynamicFormBuilder.tsx → clients/banking/src/components/TransferInternationalDynamicFormBuilder.tsx

@@ -15,8 +15,8 @@ import { validatePattern, validateRequired } from "../utils/validations";
 
 type DynamicFormField = SelectField & TextField & DateField & RadioField;
 
-type ResultItem = { [key: string]: string };
-type DynamicFormBuilderProps = {
+export type ResultItem = { [key: string]: string };
+type TransferInternationalDynamicFormBuilder = {
   schemes: Scheme[];
   results: ResultItem[];
   onChange: (results: ResultItem[]) => void;
@@ -25,8 +25,8 @@ type DynamicFormBuilderProps = {
   ref?: RefObject<unknown>;
 };
 
-export const DynamicFormBuilder = forwardRef(
-  ({ schemes = [], results = [], route, refresh, onChange }: DynamicFormBuilderProps, ref) => {
+export const TransferInternationalDynamicFormBuilder = forwardRef(
+  ({ schemes = [], results = [], route, refresh, onChange }: TransferInternationalDynamicFormBuilder, ref) => {
     const fields = useMemo<DynamicFormField[]>(
       () => (schemes.find(({ type }) => type === route)?.fields ?? []) as DynamicFormField[],
       [schemes, route],

clients/banking/src/components/TransferInternationalWizard.tsx

@@ -175,6 +175,8 @@ export const TransferInternationalWizard = ({
 
                     <TransferInternationalWizardDetails
                       initialDetails={details}
+                      amount={amount}
+                      beneficiary={beneficiary}
                       onPressPrevious={() => setStep({ name: "Beneficiary", amount, beneficiary })}
                       onSave={details =>
                         onSave({ name: "Beneficiary", amount, beneficiary, details })

clients/banking/src/components/TransferInternationalWizardBeneficiary.tsx

@@ -22,11 +22,10 @@ import {
 import { locale, t } from "../utils/i18n";
 import { getInternationalTransferFormRouteLabel } from "../utils/templateTranslations";
 import { validateRequired } from "../utils/validations";
-import { DynamicFormBuilder } from "./DynamicFormBuilder";
+import { ResultItem, TransferInternationalDynamicFormBuilder } from "./TransferInternationalDynamicFormBuilder";
 import { Amount } from "./TransferInternationalWizardAmount";
 
-type Results = { [key: string]: string };
-export type Beneficiary = { name: string; results: Results; route: string };
+export type Beneficiary = { name: string; results: ResultItem[]; route: string };
 
 type Props = {
   initialBeneficiary?: Beneficiary;
@@ -63,7 +62,7 @@ export const TransferInternationalWizardBeneficiary = ({
   const { Field, submitForm, FieldsListener, setFieldValue, getFieldState } = useForm<{
     name: string;
     route: string;
-    results: Results | undefined;
+    results: ResultItem[];
   }>({
     name: {
       initialValue: initialBeneficiary?.name ?? "",
@@ -74,7 +73,7 @@ export const TransferInternationalWizardBeneficiary = ({
       validate: () => undefined,
     },
     results: {
-      initialValue: initialBeneficiary?.results,
+      initialValue: initialBeneficiary?.results ?? [],
       validate: () => undefined,
     },
   });
@@ -156,11 +155,10 @@ export const TransferInternationalWizardBeneficiary = ({
                 <Field name="results">
                   {({ onChange, value }) =>
                     isNotNullishOrEmpty(route?.value) ? (
-                      <DynamicFormBuilder
+                      <TransferInternationalDynamicFormBuilder
                         schemes={schemes}
                         onChange={onChange}
                         results={value}
-                        routes={routes}
                         route={route.value}
                         key={route.value}
                         ref={ref}
@@ -191,9 +189,6 @@ export const TransferInternationalWizardBeneficiary = ({
               color="current"
               disabled={refreshing || data.isLoading()}
               onPress={() => ref.current.submitDynamicForm(() => submitForm(onSave))}
-              // onPress={() => {
-              //   ref.current.validateDynamicForm().then(console.log);
-              // }}
               grow={small}
             >
               {t("common.continue")}

clients/banking/src/components/TransferInternationalWizardDetails.tsx

@@ -1,103 +1,138 @@
-import { Box } from "@swan-io/lake/src/components/Box";
 import { LakeButton, LakeButtonGroup } from "@swan-io/lake/src/components/LakeButton";
-import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
-import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
 import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveContainer";
 import { Space } from "@swan-io/lake/src/components/Space";
 import { Tile } from "@swan-io/lake/src/components/Tile";
-import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
-import { StyleSheet, View } from "react-native";
+import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
+import { animations, colors } from "@swan-io/lake/src/constants/design";
+import { useDebounce } from "@swan-io/lake/src/hooks/useDebounce";
+import { useUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
+import { isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
+import { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, View } from "react-native";
 import { useForm } from "react-ux-form";
-import { t } from "../utils/i18n";
-import { validateRequired } from "../utils/validations";
 
-const styles = StyleSheet.create({
-  field: {
-    ...commonStyles.fill,
-    flexBasis: "50%",
-  },
-});
+import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
+import {
+  GetInternationalCreditTransferTransactionDetailsDynamicFormDocument,
+  InternationalCreditTransferDisplayLanguage,
+} from "../graphql/partner";
+import { locale, t } from "../utils/i18n";
+import {
+  ResultItem,
+  TransferInternationalDynamicFormBuilder,
+} from "./TransferInternationalDynamicFormBuilder";
+import { Amount } from "./TransferInternationalWizardAmount";
+import { Beneficiary } from "./TransferInternationalWizardBeneficiary";
 
-export type Details = { label: string; reference: string };
+export type Details = { results: ResultItem[] };
 
 type Props = {
   initialDetails?: Details;
+  amount: Amount;
+  beneficiary: Beneficiary;
   onPressPrevious: () => void;
-  onSave: (details: Details) => void;
+  onSave: (details: Beneficiary) => void;
 };
 
 export const TransferInternationalWizardDetails = ({
   initialDetails,
+  amount,
+  beneficiary,
   onPressPrevious,
   onSave,
 }: Props) => {
-  const { Field, submitForm } = useForm({
-    label: {
-      initialValue: initialDetails?.label ?? "",
-      validate: validateRequired,
+  const [schemes, setSchemes] = useState([]);
+  const [refreshing, setRefreshing] = useBoolean(false);
+  const [dynamicFields, setDynamicFields] = useState(initialDetails?.results ?? []);
+
+  const ref = useRef();
+
+  const { data } = useUrqlQuery(
+    {
+      query: GetInternationalCreditTransferTransactionDetailsDynamicFormDocument,
+      variables: {
+        name: beneficiary.name,
+        route: beneficiary.route,
+        amountValue: amount.value,
+        currency: amount.currency,
+        language: locale.language as InternationalCreditTransferDisplayLanguage,
+        details: dynamicFields,
+      },
     },
-    reference: {
-      initialValue: initialDetails?.reference ?? "",
+    [locale.language, dynamicFields],
+  );
+
+  const { Field, submitForm, getFieldState } = useForm<{
+    results: ResultItem[];
+  }>({
+    results: {
+      initialValue: initialDetails?.results ?? [],
       validate: () => undefined,
     },
   });
 
+  console.log("[NC] data", data);
+  const updatedForm = data.mapOkToResult(form => form).getWithDefault([]);
+
+  useEffect(() => {
+    if (!data.isLoading()) {
+      setSchemes(updatedForm);
+    }
+  }, [updatedForm]);
+
+  const refresh = useDebounce<string[]>(keys => {
+    const { value } = getFieldState("results");
+    setDynamicFields(
+      value?.filter(({ key, value }) => keys.includes(key) && isNotNullishOrEmpty(value)) ?? [],
+    );
+    setRefreshing.off();
+  }, 1000);
+
   return (
     <View>
       <Tile>
-        <ResponsiveContainer breakpoint={800}>
-          {({ large }) => (
-            <Box direction={large ? "row" : "column"}>
-              <View style={styles.field}>
-                <LakeLabel
-                  label={t("transfer.new.details.label")}
-                  render={id => (
-                    <Field name="label">
-                      {({ value, onChange, onBlur, error, valid, ref }) => (
-                        <LakeTextInput
-                          id={id}
-                          ref={ref}
-                          value={value}
-                          error={error}
-                          valid={valid}
-                          onChangeText={onChange}
-                          onBlur={onBlur}
-                        />
-                      )}
-                    </Field>
-                  )}
+        {/* <LakeLabel
+          label={t("transfer.new.internationalTransfer.beneficiary.name")}
+          render={id => (
+            <Field name="name">
+              {({ value, onChange, onBlur, error, valid, ref }) => (
+                <LakeTextInput
+                  id={id}
+                  ref={ref}
+                  value={value}
+                  error={error}
+                  valid={valid}
+                  onChangeText={onChange}
+                  onBlur={onBlur}
+                  inputMode="text"
                 />
-              </View>
-
-              <Space width={24} />
+              )}
+            </Field>
+          )}
+        /> */}
 
-              <View style={styles.field}>
-                <LakeLabel
-                  optionalLabel={t("form.optional")}
-                  label={t("transfer.new.details.reference")}
-                  render={id => (
-                    <Field name="reference">
-                      {({ value, onChange, onBlur, error, valid, ref }) => (
-                        <LakeTextInput
-                          id={id}
-                          ref={ref}
-                          value={value}
-                          error={error}
-                          valid={valid}
-                          help={t(
-                            "transfer.new.internationalTransfer.details.form.field.reference.help",
-                          )}
-                          onChangeText={onChange}
-                          onBlur={onBlur}
-                        />
-                      )}
-                    </Field>
-                  )}
+        {data.isLoading() ? (
+          <ActivityIndicator color={colors.gray[900]} />
+        ) : (
+          <TransitionView {...(data.isLoading() && animations.heartbeat)}>
+            <Field name="results">
+              {({ onChange, value }) => (
+                <TransferInternationalDynamicFormBuilder
+                  schemes={schemes}
+                  onChange={onChange}
+                  results={value}
+                  route={route.value}
+                  key={route.value}
+                  ref={ref}
+                  refresh={fields => {
+                    setRefreshing.on();
+                    refresh(fields);
+                  }}
                 />
-              </View>
-            </Box>
-          )}
-        </ResponsiveContainer>
+              )}
+            </Field>
+          </TransitionView>
+        )}
       </Tile>
 
       <Space height={32} />
@@ -111,10 +146,12 @@ export const TransferInternationalWizardDetails = ({
 
             <LakeButton
               color="current"
-              onPress={() => submitForm(details => onSave(details as Details))}
+              disabled={refreshing || data.isLoading()}
+              // onPress={() => ref.current.submitDynamicForm(() => submitForm(onSave))}
+              onPress={() => console.log("submit")}
               grow={small}
             >
-              {t("common.confirm")}
+              {t("common.continue")}
             </LakeButton>
           </LakeButtonGroup>
         )}

clients/banking/src/graphql/partner.gql

@@ -2006,6 +2006,68 @@ query GetInternationalBeneficiaryDynamicForms(
   }
 }
 
+query GetInternationalCreditTransferTransactionDetailsDynamicForm(
+  $name: String!
+  $route: InternationalCreditTransferRouteInput!
+  $amountValue: AmountValue!
+  $currency: Currency!
+  $language: InternationalCreditTransferDisplayLanguage!
+  $details: [InternationalBeneficiaryDetailsInput!]!
+) {
+  internationalCreditTransferTransactionDetailsDynamicForm(
+    internationalBeneficiary: { details: $details, name: $name, route: $route, currency: $currency }
+    targetAmount: { value: $amountValue, currency: $currency }
+    language: $language
+  ) {
+    fields {
+      ... on TextField {
+        displayFormat
+        example
+        key
+        maxLength
+        minLength
+        name
+        refreshDynamicFieldsOnChange
+        required
+        validationRegex
+      }
+      ... on SelectField {
+        __typename
+        allowedValues {
+          key
+          name
+        }
+        key
+        name
+        refreshDynamicFieldsOnChange
+        required
+      }
+      ... on RadioField {
+        __typename
+        allowedValues {
+          key
+          name
+        }
+        name
+        key
+        refreshDynamicFieldsOnChange
+        required
+      }
+      ... on DateField {
+        example
+        validationRegex
+        key
+        name
+        required
+      }
+      required
+      name
+      key
+    }
+    remainingFieldsToRefreshCount
+  }
+}
+
 # Mutations
 
 mutation CreateMultiConsent($input: CreateMultiConsentInput!) {