import { h } from "@stencil/core";
export default {
  title: "Components/Banking Information Form",
};
const bankingFormProps = {
  states: {
    showVerification: false,
    hideSteps: false,
    disabled: false,
    loading: false,
    hideBackButton: false,
    formState: {
      bankCountry: "US",
      paymentMethodChecked: "toBankAccount",
    },
    hasPayPal: false,
    isPartner: false,
    saveDisabled: false,
    thresholds: [],
    currency: "USD",
    loadingError: false,
    email: "test@example.com",
    showModal: false,
  },
  callbacks: {
    onVerificationHide: () => { },
    onVerification: () => { },
    onSubmit: async () => console.log("Submit"),
    setPaymentMethodChecked: () => { },
    setPaymentScheduleChecked: () => { },
    setCountrySearch: () => { },
    onBack: async () => console.log("back"),
    onModalOpen: () => { },
    onModalClose: () => { },
  },
  refs: { formRef: { current: null } },
};
export const BankingInfoFormDefault = () => {
  return h("sqm-banking-info-form", null);
};
export const BankingInfoFormDefaultLoading = () => {
  return (h("sqm-banking-info-form", { demoData: {
      states: { ...bankingFormProps.states, loading: true },
    } }));
};
export const BankingInfoFormDefaultWithLoadingError = () => {
  return (h("sqm-banking-info-form", { demoData: {
      states: {
        ...bankingFormProps.states,
        loading: true,
        loadingError: true,
      },
    } }));
};
export const BankingInfoFormDefaultWithValidationErrors = () => {
  return (h("sqm-banking-info-form", { demoData: {
      states: {
        ...bankingFormProps.states,
        // bankCountry: null,
        formState: {
          ...bankingFormProps.states.formState,
          errors: {
            inputErrors: {
              beneficiaryAccountName: { type: "required" },
              bankAccountType: { type: "required" },
              bankAccountNumber: { type: "required" },
              iban: { type: "required" },
              swiftCode: { type: "required" },
              routingCode: { type: "required" },
              bankName: { type: "required" },
              beneficiaryClassification: { type: "required" },
              patronymicName: { type: "required" },
              voCode: { type: "required" },
              agencyCode: { type: "required" },
              bankAddress: { type: "required" },
              bankCity: { type: "required" },
              bankCountry: { type: "required" },
              bankState: { type: "required" },
              bankPostalCode: { type: "required" },
              branchCode: { type: "required" },
              balanceThreshold: { type: "required" },
              fixedDay: { type: "required" },
            },
          },
        },
      },
    } }));
};
export const BankingInfoFormCountryUSCurrencyUSD = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          bankCountry: "US",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormGeneralError = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          errors: {
            general: true,
          },
        },
      },
    } }));
};
export const BankingInfoFormCountryUSCurrencyUSDLoading = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          bankCountry: "US",
        },
        loading: true,
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormCountryARCurrencyARS = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "AR",
          paymentScheduleChecked: "FIXED_DAY",
          paymentMethodChecked: "toBankAccount",
        },
        currency: "ARS",
      },
    } }));
};
export const BankingInfoFormCountryMXCurrencyMXN = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "MX",
          paymentScheduleChecked: "FIXED_DAY",
          paymentMethodChecked: "toBankAccount",
        },
        currency: "MXN",
      },
    } }));
};
export const BankingInfoFormCountryUSCurrencyGBP = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "US",
        },
        currency: "GBP",
      },
    } }));
};
export const BankingInfoFormCountryCanadaCurrencyCAD = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "CA",
        },
        currency: "CAD",
      },
    } }));
};
export const BankingInfoFormCountryCanadaCurrencyUSD = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "CA",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormCountrySpainCurrencyUSD = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "ES",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormIsPartner = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        isPartner: true,
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormPaypalChecked = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          paymentMethodChecked: "toPayPalAccount",
        },
      },
    } }));
};
export const BankingInfoFormPaypalCheckedLoading = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        loading: true,
        formState: {
          ...bankingFormProps.states.formState,
          paymentMethodChecked: "toPayPalAccount",
        },
      },
    } }));
};
export const BankingInfoFormWithBalanceThresholdPaymentSchedule = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "BALANCE_THRESHOLD",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormWithBalanceThresholdPaymentScheduleWithError = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          errors: {
            inputErrors: {
              balanceThreshold: { type: "required" },
            },
          },
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "BALANCE_THRESHOLD",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormWithBalanceThresholdPaymentScheduleLoading = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        loading: true,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "BALANCE_THRESHOLD",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormWithFixedDayPaymentSchedule = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "FIXED_DAY",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormWithFixedDayPaymentScheduleWithError = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        formState: {
          errors: {
            inputErrors: { fixedDay: { type: "required" } },
          },
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "FIXED_DAY",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormWithFixedDayPaymentScheduleLoading = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        loading: true,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "FIXED_DAY",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormVerififyIdentityModal = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        isPartner: true,
        showVerification: true,
        formState: {
          ...bankingFormProps.states.formState,
          bankCountry: "US",
          paymentScheduleChecked: "FIXED_DAY",
        },
        currency: "USD",
      },
    } }));
};
export const BankingInfoFormModalOpen = () => {
  return (h("sqm-banking-info-form", { demoData: {
      ...bankingFormProps,
      states: {
        ...bankingFormProps.states,
        showModal: true,
      },
    } }));
};
