herald-exchange-onramp_offramp-widget 1.0.0

package/src/components/WidgetBankDetails.tsx

@@ -0,0 +1,612 @@
+import React, { useEffect, useState } from "react";
+import CustomSelect from "./CustomeSelect";
+import { useToast } from "../hooks/toastProvider";
+import { handleApiCall } from "./api";
+import type { tokenSellDataType } from "./SellField";
+import type { BankAccountsAPIResponse, CustomOption, ServiceBankAPiResponse } from "./types";
+import styles from "../assets/css/style.module.css";
+import CommonCenterLoader from "./CommonCenterLoader";
+import { Spinner } from "./loader";
+import { getBaseUrl } from "./utils";
+
+const accountTypeOptions = [
+  {
+    label: "SWIFT",
+    currency: "USD",
+  },
+  {
+    label: "SEPA",
+    currency: "EUR",
+  },
+  { label: "Local", currency: "USD" },
+];
+
+type WidgetBankDetailsProps = {
+  setStep: (step: number) => void;
+  data: tokenSellDataType;
+  apiKey: string;
+  clientReferenceID: string;
+  setTokenSellData: (data: any) => void;
+  defaultTab: string;
+  mode: string;
+};
+const WidgetBankDetails = ({
+  defaultTab,
+  setStep,
+  data,
+  apiKey,
+  clientReferenceID,
+  setTokenSellData,
+  mode,
+}: WidgetBankDetailsProps) => {
+  const { addToast } = useToast();
+  const [activeTab, setActiveTab] = useState(
+    ["select", "addNew"].includes(defaultTab) ? defaultTab : "select"
+  );
+
+  // Select beneficiary
+  const [beneficiaryOptions, setBeneficiaryOptions] = useState<CustomOption[] | []>([]);
+  const [selectedBeneficiary, setSelectedBeneficiary] = useState<CustomOption | null>(null);
+  const [bankOptions, setBankOptions] = useState<CustomOption[] | []>([]);
+  const [isFetchingBeneficiary, setIsFetchingBeneficiary] = useState(true);
+  const [addingBankAccount, setAddingBankAccount] = useState(false);
+  useEffect(() => {
+    fetchbeneficiaryOptions();
+  }, [activeTab]);
+
+  useEffect(() => {
+    if (data?.selectedBeneficiary && beneficiaryOptions?.length && !selectedBeneficiary) {
+      if (data?.selectedBeneficiary) {
+        const beneficiary = beneficiaryOptions?.find(
+          (item) => item?.value === data?.selectedBeneficiary
+        );
+        if (beneficiary) setSelectedBeneficiary(beneficiary);
+      }
+    }
+  }, [data, beneficiaryOptions]);
+
+  const fetchbeneficiaryOptions = () => {
+    const baseUrl = getBaseUrl(mode);
+    handleApiCall({
+      url: `${baseUrl}/api/bank_accounts`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: BankAccountsAPIResponse) => {
+        if (result?.success) {
+          const options = result?.data?.bank_accounts
+            ?.filter((item) => item?.currency === data?.selectedFiat)
+            ?.map((item) => {
+              return {
+                label: `${item?.bank_account?.bank_name} - ${
+                  item?.bank_account?.account_number || item?.bank_account?.iban
+                }`,
+                value: item?.unique_id,
+              };
+            });
+          setBeneficiaryOptions(options);
+          if (options?.length <= 0) {
+            setActiveTab("addNew");
+          }
+          setIsFetchingBeneficiary(false);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching Beneficiaries", "error");
+        setIsFetchingBeneficiary(false);
+      },
+    });
+  };
+
+  const handleSelectBeneficiary = (values: CustomOption | null) => {
+    setSelectedBeneficiary(values);
+    setTokenSellData({ ...data, selectedBeneficiary: values?.value });
+  };
+
+  const handleContinueWithSelectedBeneficiary = () => {
+    if (data?.selectedBeneficiary) {
+      setStep(3);
+    } else {
+      addToast("Please select a beneficiary", "error");
+    }
+  };
+
+  // Add new beneficiary
+
+  const [formState, setFormState] = useState({
+    type: data?.selectedFiat === "EUR" ? "SEPA" : "SWIFT",
+    currency: data?.selectedFiat || "USD",
+    bank_name: "",
+    account_number: "",
+    route_number: "",
+    swift_code: "",
+    iban: "",
+    service_bank: "",
+  });
+
+  const [formErrors, setFormErrors] = useState({
+    bank_name: "",
+    account_number: "",
+    route_number: "",
+    swift_code: "",
+    iban: "",
+    service_bank: "",
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    const limitedValue = name === "bank_name" ? value?.slice(0, 100) : value?.trim()?.slice(0, 100);
+    let error = "";
+
+    // Validation
+    if (!value) {
+      error = "Field is Required";
+    } else if (name === "bank_name") {
+      const isAlpha = /^[A-Za-z\s]+$/.test(limitedValue);
+      if (!isAlpha) {
+        error = "Enter only alphabets";
+      }
+    } else {
+      const isAlphanumeric = /^[A-Za-z0-9\s]+$/.test(limitedValue);
+      if (!isAlphanumeric) {
+        error = "Enter only alphanumeric";
+      }
+    }
+
+    if (error) {
+      // Set errors (preserve other errors)
+      setFormErrors((prevErrors) => ({
+        ...prevErrors,
+        [name]: error,
+      }));
+    } else {
+      // remove errors
+      const errors: any = { ...formErrors };
+      delete errors[name];
+
+      setFormErrors(errors);
+    }
+    // Set state
+    setFormState((prevState) => ({
+      ...prevState,
+      [name]: limitedValue,
+    }));
+  };
+
+  const handleSelectBankOption = (values: CustomOption | null) => {
+    setFormState({
+      ...formState,
+      service_bank: values?.value || "",
+    });
+    const errors: any = { ...formErrors };
+    delete errors.service_bank;
+    setFormErrors({ ...errors });
+  };
+
+  const handleSelectTypeOfAccount = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target?.value === "Local") {
+      fetchBankOptions();
+    }
+    setFormState({
+      ...formState,
+      type: e.target?.value,
+    });
+    setFormErrors({
+      bank_name: "",
+      account_number: "",
+      route_number: "",
+      swift_code: "",
+      iban: "",
+      service_bank: "",
+    });
+  };
+
+  const fetchBankOptions = () => {
+    const baseUrl = getBaseUrl(mode);
+    handleApiCall({
+      url: `${baseUrl}/api/service_banks`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: ServiceBankAPiResponse) => {
+        if (result?.success) {
+          const options = result?.data?.service_banks?.map((item) => {
+            return {
+              label: item?.bank_name,
+              value: item?.service_bank,
+            };
+          });
+          setBankOptions(options);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching Bank Accounts", "error");
+      },
+    });
+  };
+
+  const handleAddbeneficiary = () => {
+    const baseUrl = getBaseUrl(mode);
+    const error: any = {};
+    const formData = new FormData();
+    setAddingBankAccount(true);
+
+    formData.append("currency", formState?.currency);
+    formData.append("type", formState?.type?.toLowerCase());
+
+    switch (formState.type) {
+      case "SWIFT":
+        if (!formState?.bank_name) error.bank_name = "Field is required";
+        if (!formState?.route_number) error.route_number = "Field is required";
+        if (!formState?.swift_code) error.swift_code = "Field is required";
+        if (!formState?.account_number) error.account_number = "Field is required";
+        formData.append("bank_name", formState?.bank_name);
+        formData.append("route_number", formState?.route_number);
+        formData.append("swift_code", formState?.swift_code);
+        formData.append("account_number", formState?.account_number);
+
+        break;
+      case "Local":
+        if (!formState?.service_bank) error.service_bank = "Field is required";
+        if (!formState?.route_number) error.route_number = "Field is required";
+        if (!formState?.account_number) error.account_number = "Field is required";
+        formData.append("service_bank", formState?.service_bank);
+        formData.append("route_number", formState?.route_number);
+        formData.append("account_number", formState?.account_number);
+        break;
+
+      case "SEPA":
+        if (!formState?.bank_name) error.bank_name = "Field is required";
+        if (!formState?.iban) error.iban = "Field is required";
+        formData.append("bank_name", formState?.bank_name);
+        formData.append("iban", formState?.iban);
+        break;
+
+      default:
+        break;
+    }
+
+    if (Object.keys(error)?.length > 0) {
+      setFormErrors(error);
+      addToast("Fill all fields", "error");
+      setAddingBankAccount(false);
+      return;
+    }
+
+    handleApiCall({
+      url: `${baseUrl}/api/bank_accounts`,
+      method: "POST",
+      headers: {
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      body: formData,
+      onSuccess: (result: any) => {
+        if (result?.success) {
+          setBeneficiaryOptions([
+            ...beneficiaryOptions,
+            {
+              label: `${result?.data?.bank_account?.bank_name} - ${
+                result?.data?.bank_account?.account_number ||
+                result?.data?.bank_account?.bank_account?.iban
+              }`,
+              value: result?.data?.bank_account?.unique_id,
+            },
+          ]);
+
+          setSelectedBeneficiary({
+            label: `${result?.data?.bank_account?.bank_name} - ${
+              result?.data?.bank_account?.account_number ||
+              result?.data?.bank_account?.bank_account?.iban
+            }`,
+            value: result?.data?.bank_account?.unique_id,
+          });
+          setTokenSellData({ ...data, selectedBeneficiary: result?.data?.bank_account?.unique_id });
+          setStep(3);
+        } else {
+          addToast(`Error Adding Bank Account : ${result?.message}`, "error");
+        }
+        setAddingBankAccount(false);
+      },
+      onError: (error: any) => {
+        addToast(`Error Adding Bank Account : ${error?.message}`, "error");
+        setAddingBankAccount(false);
+      },
+    });
+  };
+
+  const fetchMoreBanks = (value: string) => {
+    const baseUrl = getBaseUrl(mode);
+
+    handleApiCall({
+      url: `${baseUrl}/api/service_banks?search_key=${value}`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: ServiceBankAPiResponse) => {
+        if (result?.success) {
+          const options = result?.data?.service_banks?.map((item) => {
+            return {
+              label: item?.bank_name,
+              value: item?.service_bank,
+            };
+          });
+          setBankOptions(options);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching Bank Accounts", "error");
+      },
+    });
+  };
+
+  if (isFetchingBeneficiary) {
+    return <CommonCenterLoader />;
+  }
+
+  return (
+    <>
+      <div className={styles.bank_frame}>
+        <div className={styles.bank_head}>
+          <div style={{ cursor: "pointer" }} onClick={() => setStep(1)}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlSpace="preserve"
+              width="18"
+              height="18"
+              viewBox="0 0 240.823 240.823"
+            >
+              <path
+                d="M57.633 129.007 165.93 237.268c4.752 4.74 12.451 4.74 17.215 0 4.752-4.74 4.752-12.439 0-17.179l-99.707-99.671 99.695-99.671c4.752-4.74 4.752-12.439 0-17.191-4.752-4.74-12.463-4.74-17.215 0L57.621 111.816c-4.679 4.691-4.679 12.511.012 17.191"
+                data-original="#000000"
+              ></path>
+            </svg>
+          </div>
+          <div className={styles.bank_titles}>Bank Details</div>
+        </div>
+        <div className={styles.bank_tabs_frame}>
+          <div className={styles.bank_tabs_link}>
+            {beneficiaryOptions?.length > 0 && (
+              <button
+                className={`${activeTab === "select" && styles.active}`}
+                onClick={() => setActiveTab("select")}
+              >
+                Select Existing
+              </button>
+            )}
+            <button
+              className={`${activeTab === "addNew" && styles.active}`}
+              onClick={() => setActiveTab("addNew")}
+            >
+              Add New
+            </button>
+          </div>
+          <div className={styles.bank_tabs_content}>
+            {activeTab === "select" && (
+              <div className={styles.bank_exist_box}>
+                <div className={styles.bank_exist_feilds_frame}>
+                  <div className={styles.bank_exist_label}>Select Bank</div>
+                  <div className={styles.bank_exist_feilds}>
+                    <CustomSelect
+                      options={beneficiaryOptions}
+                      onChange={handleSelectBeneficiary}
+                      isClearable={true}
+                      placeholder={isFetchingBeneficiary ? "Loading..." : "Select Beneficiary"}
+                      value={selectedBeneficiary}
+                      isDisabled={beneficiaryOptions?.length <= 0}
+                    />
+                  </div>
+                </div>
+
+                <div className={`${styles.ramp_action} ${styles.space_from} `}>
+                  <button
+                    className={`${styles.action_btn} ${styles.primary} `}
+                    onClick={handleContinueWithSelectedBeneficiary}
+                  >
+                    Continue
+                  </button>
+                </div>
+              </div>
+            )}
+            {activeTab === "addNew" && (
+              <div className={styles.new_box}>
+                <div className={styles.check_wrap}>
+                  {accountTypeOptions.map((item) =>
+                    data?.selectedFiat === item.currency ? (
+                      <div className={styles.form_check} key={item.label}>
+                        <label className={styles.form_check_label} htmlFor={item.label}>
+                          <input
+                            className={styles.form_check_input}
+                            type="radio"
+                            name="AccountType"
+                            value={item.label}
+                            id={item.label}
+                            onChange={(e) => handleSelectTypeOfAccount(e)}
+                          />
+                          <div className={styles.off_currency_option}>
+                            <h3>{item.label}</h3>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 408.576 408.576"
+                            >
+                              <g>
+                                <path
+                                  d="M204.288 0C91.648 0 0 91.648 0 204.288s91.648 204.288 204.288 204.288 204.288-91.648 204.288-204.288S316.928 0 204.288 0zm114.176 150.528-130.56 129.536c-7.68 7.68-19.968 8.192-28.16.512L90.624 217.6c-8.192-7.68-8.704-20.48-1.536-28.672 7.68-8.192 20.48-8.704 28.672-1.024l54.784 50.176L289.28 121.344c8.192-8.192 20.992-8.192 29.184 0s8.192 20.992 0 29.184z"
+                                  fill={formState?.type === item.label ? "#F9C201" : "#efefef"}
+                                ></path>
+                              </g>
+                            </svg>
+                          </div>
+                        </label>
+                      </div>
+                    ) : (
+                      <></>
+                    )
+                  )}
+                </div>
+
+                {formState.type === "Local" ? (
+                  <div className={styles.ramp_bank_box}>
+                    <div className={styles.new_bank_label}>
+                      Bank Name <span className={styles.required}>*</span>
+                    </div>
+                    <div className={styles.new_bank_fields}>
+                      <CustomSelect
+                        options={bankOptions}
+                        isClearable={true}
+                        placeholder="Select Bank"
+                        value={
+                          formState?.service_bank
+                            ? bankOptions?.find(
+                                (option) => option?.value === formState?.service_bank
+                              )
+                            : null
+                        }
+                        isSearchable={true}
+                        onChange={handleSelectBankOption}
+                        onInputChange={(inputValue: string, { action }: { action: string }) => {
+                          if (action !== "input-change") return;
+
+                          if (inputValue?.length > 0) {
+                            fetchMoreBanks(inputValue);
+                          } else {
+                            fetchBankOptions();
+                          }
+                        }}
+                      />
+                    </div>
+                    {formErrors?.service_bank && (
+                      <span className={styles.input_error}>{formErrors?.service_bank}</span>
+                    )}
+                  </div>
+                ) : (
+                  <div className={styles.ramp_bank_box}>
+                    <div className={styles.new_bank_label}>
+                      Bank Name <span className={styles.required}>*</span>
+                    </div>
+                    <div className={styles.new_bank_fields}>
+                      <input
+                        type="text"
+                        value={formState.bank_name}
+                        className={styles.input_control}
+                        placeholder="Enter Bank Name"
+                        onChange={handleInputChange}
+                        name="bank_name"
+                      />
+                    </div>
+                    {formErrors?.bank_name && (
+                      <span className={styles.input_error}>{formErrors?.bank_name}</span>
+                    )}
+                  </div>
+                )}
+
+                {formState.type === "SWIFT" || formState.type === "Local" ? (
+                  <div className={styles.ramp_bank_box}>
+                    <div className={styles.new_bank_label}>
+                      Account Number <span className={styles.required}>*</span>
+                    </div>
+                    <div className={styles.new_bank_fields}>
+                      <input
+                        type="text"
+                        value={formState.account_number}
+                        className={styles.input_control}
+                        placeholder="Enter Account Number"
+                        onChange={handleInputChange}
+                        name="account_number"
+                      />
+                    </div>
+                    {formErrors?.account_number && (
+                      <span className={styles.input_error}>{formErrors?.account_number}</span>
+                    )}
+                  </div>
+                ) : null}
+                {formState.type === "SWIFT" || formState.type === "Local" ? (
+                  <div className={styles.ramp_bank_box}>
+                    <div className={styles.new_bank_label}>
+                      Route Number <span className={styles.required}>*</span>
+                    </div>
+                    <div className={styles.new_bank_fields}>
+                      <input
+                        type="text"
+                        value={formState.route_number}
+                        className={styles.input_control}
+                        placeholder="Enter Route Number"
+                        onChange={handleInputChange}
+                        name="route_number"
+                      />
+                    </div>
+                    {formErrors?.route_number && (
+                      <span className={styles.input_error}>{formErrors?.route_number} </span>
+                    )}
+                  </div>
+                ) : null}
+
+                {formState.type === "SWIFT" && (
+                  <div className={styles.ramp_bank_box}>
+                    <div className={styles.new_bank_label}>
+                      SWIFT Code <span className={styles.required}>*</span>
+                    </div>
+                    <div className={styles.new_bank_fields}>
+                      <input
+                        type="text"
+                        value={formState.swift_code}
+                        className={styles.input_control}
+                        placeholder="Enter SWIFT Code"
+                        onChange={handleInputChange}
+                        name="swift_code"
+                      />
+                    </div>
+                    {formErrors?.swift_code && (
+                      <span className={styles.input_error}>{formErrors?.swift_code}</span>
+                    )}
+                  </div>
+                )}
+
+                {formState.type === "SEPA" && (
+                  <div className={styles.ramp_bank_box}>
+                    <div className={styles.new_bank_label}>
+                      IBAN <span className={styles.required}>*</span>
+                    </div>
+                    <div className={styles.new_bank_fields}>
+                      <input
+                        type="text"
+                        value={formState.iban}
+                        className={styles.input_control}
+                        placeholder="Enter IBAN"
+                        onChange={handleInputChange}
+                        name="iban"
+                      />
+                    </div>
+                    {formErrors?.iban && (
+                      <span className={styles.input_error}>{formErrors?.iban}</span>
+                    )}
+                  </div>
+                )}
+
+                <div className={styles.ramp_action}>
+                  <button
+                    className={`${styles.action_btn} ${styles.primary} `}
+                    onClick={handleAddbeneficiary}
+                    disabled={addingBankAccount}
+                  >
+                    Continue {addingBankAccount && <Spinner />}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WidgetBankDetails;

package/src/components/WidgetComponent.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import styles from "../assets/css/style.module.css";
+import WidgetContent from "./WidgetContent";
+import { ToastProvider } from "../hooks/toastProvider";
+import type { BuyParamsType, SellParamsType } from "./types";
+
+type WidgetComponentProps = {
+  apiKey: string;
+  redirectUrl: string;
+  buyParameters: BuyParamsType;
+  sellParameters: SellParamsType;
+  defaultTab: string;
+  clientReferenceID: string;
+  mode?: "development" | "production";
+};
+
+const WidgetComponent = ({
+  apiKey,
+  redirectUrl,
+  buyParameters,
+  sellParameters,
+  defaultTab,
+  clientReferenceID,
+  mode = "development",
+}: WidgetComponentProps) => {
+  return (
+    <div style={{ position: "relative" }} className={styles.widgetcomponent} id="widget-container">
+      <div className={styles.widget_wrapped}>
+        <div className={styles.widget_modal}>
+          <div className={styles.widget_content}>
+            <ToastProvider>
+              <WidgetContent
+                redirectUrl={redirectUrl}
+                defaultTab={defaultTab}
+                buyParameters={buyParameters}
+                sellParameters={sellParameters}
+                apiKey={apiKey}
+                clientReferenceID={clientReferenceID}
+                mode={mode}
+              />
+            </ToastProvider>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WidgetComponent;