herald-exchange-glide-widget 1.0.0

package/src/components/WidgetBankDetails.tsx

@@ -0,0 +1,592 @@
+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 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;
+  css: any;
+  mode: string;
+};
+const WidgetBankDetails = ({
+  setStep,
+  data,
+  apiKey,
+  clientReferenceID,
+  setTokenSellData,
+  mode,
+  css,
+}: WidgetBankDetailsProps) => {
+  const { addToast } = useToast();
+
+  // 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();
+  }, []);
+
+  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?.[0] ? [options?.[0]] : []);
+          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");
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className={css.gilde_bank_frame}>
+        <div className={css.gilde_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={css.bank_titles}>Bank Details</div>
+        </div>
+        <div className={css.gilde_bank_tabs_frame}>
+          {isFetchingBeneficiary ? (
+            <CommonCenterLoader css={css} />
+          ) : (
+            <div className={css.gilde_bank_tabs_content}>
+              {beneficiaryOptions?.length > 0 ? (
+                <div className={css.gilde_bank_exist_box}>
+                  <div className={css.gilde_bank_exist_feilds_frame}>
+                    <div className={css.gilde_bank_exist_label}>Select Bank</div>
+                    <div className={css.gilde_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={css.gilde_ramp_action}>
+                    <button
+                      className={` ${css.action_btn} ${css.primary} `}
+                      onClick={handleContinueWithSelectedBeneficiary}
+                    >
+                      Continue
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className={css.off_gilde_new_box}>
+                  <div className={css.off_gilde_check_wrap}>
+                    {accountTypeOptions.map((item) =>
+                      data?.selectedFiat === item.currency ? (
+                        <div className={css.off_form_check} key={item.label}>
+                          <label className={css.off_form_check_label} htmlFor={item.label}>
+                            <input
+                              className={css.off_form_check_input}
+                              type="radio"
+                              name="AccountType"
+                              value={item.label}
+                              id={item.label}
+                              onChange={(e) => handleSelectTypeOfAccount(e)}
+                            />
+                            <div className={css.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
+                                        ? "var(--primary-color-des)"
+                                        : "#efefef"
+                                    }
+                                  ></path>
+                                </g>
+                              </svg>
+                            </div>
+                          </label>
+                        </div>
+                      ) : (
+                        <></>
+                      )
+                    )}
+                  </div>
+
+                  {formState.type === "Local" ? (
+                    <div className={css.off_gilde_new_bank_box}>
+                      <div className={css.off_gilde_new_bank_label}>
+                        Bank Name <span className={css.required}>*</span>
+                      </div>
+                      <div className={css.off_gilde_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 !== css.input_control) return;
+
+                            if (inputValue?.length > 0) {
+                              fetchMoreBanks(inputValue);
+                            } else {
+                              fetchBankOptions();
+                            }
+                          }}
+                        />
+                      </div>
+                      {formErrors?.service_bank && (
+                        <span className={css.input_error}>{formErrors?.service_bank}</span>
+                      )}
+                    </div>
+                  ) : (
+                    <div className={css.off_gilde_new_bank_box}>
+                      <div className={css.off_gilde_new_bank_label}>
+                        Bank Name <span className={css.required}>*</span>
+                      </div>
+                      <div className={css.off_gilde_new_bank_fields}>
+                        <input
+                          type="text"
+                          value={formState.bank_name}
+                          className={css.input_control}
+                          placeholder="Enter Bank Name"
+                          onChange={handleInputChange}
+                          name="bank_name"
+                        />
+                      </div>
+                      {formErrors?.bank_name && (
+                        <span className={css.input_error}>{formErrors?.bank_name}</span>
+                      )}
+                    </div>
+                  )}
+
+                  {formState.type === "SWIFT" || formState.type === "Local" ? (
+                    <div className={css.off_gilde_new_bank_box}>
+                      <div className={css.off_gilde_new_bank_label}>
+                        Account Number <span className={css.required}>*</span>
+                      </div>
+                      <div className={css.off_gilde_new_bank_fields}>
+                        <input
+                          type="text"
+                          value={formState.account_number}
+                          className={css.input_control}
+                          placeholder="Enter Account Number"
+                          onChange={handleInputChange}
+                          name="account_number"
+                        />
+                      </div>
+                      {formErrors?.account_number && (
+                        <span className={css.input_error}>{formErrors?.account_number}</span>
+                      )}
+                    </div>
+                  ) : null}
+                  {formState.type === "SWIFT" || formState.type === "Local" ? (
+                    <div className={css.off_gilde_new_bank_box}>
+                      <div className={css.off_gilde_new_bank_label}>
+                        Route Number <span className={css.required}>*</span>
+                      </div>
+                      <div className={css.off_gilde_new_bank_fields}>
+                        <input
+                          type="text"
+                          value={formState.route_number}
+                          className={css.input_control}
+                          placeholder="Enter Route Number"
+                          onChange={handleInputChange}
+                          name="route_number"
+                        />
+                      </div>
+                      {formErrors?.route_number && (
+                        <span className={css.input_error}>{formErrors?.route_number} </span>
+                      )}
+                    </div>
+                  ) : null}
+
+                  {formState.type === "SWIFT" && (
+                    <div className={css.off_gilde_new_bank_box}>
+                      <div className={css.off_gilde_new_bank_label}>
+                        SWIFT Code <span className={css.required}>*</span>
+                      </div>
+                      <div className={css.off_gilde_new_bank_fields}>
+                        <input
+                          type="text"
+                          value={formState.swift_code}
+                          className={css.input_control}
+                          placeholder="Enter SWIFT Code"
+                          onChange={handleInputChange}
+                          name="swift_code"
+                        />
+                      </div>
+                      {formErrors?.swift_code && (
+                        <span className={css.input_error}>{formErrors?.swift_code}</span>
+                      )}
+                    </div>
+                  )}
+
+                  {formState.type === "SEPA" && (
+                    <div className={css.off_gilde_new_bank_box}>
+                      <div className={css.off_gilde_new_bank_label}>
+                        IBAN <span className={css.required}>*</span>
+                      </div>
+                      <div className={css.off_gilde_new_bank_fields}>
+                        <input
+                          type="text"
+                          value={formState.iban}
+                          className={css.input_control}
+                          placeholder="Enter IBAN"
+                          onChange={handleInputChange}
+                          name="iban"
+                        />
+                      </div>
+                      {formErrors?.iban && (
+                        <span className={css.input_error}>{formErrors?.iban}</span>
+                      )}
+                    </div>
+                  )}
+
+                  <div className={css.gilde_ramp_action}>
+                    <button
+                      className={` ${css.action_btn} ${css.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,42 @@
+import React from "react";
+import css from "../assets/css/style.module.css";
+import WidgetContent from "./WidgetContent";
+import { ToastProvider } from "../hooks/toastProvider";
+import type { SellParamsType } from "./types";
+
+// Props
+type WidgetComponentProps = {
+  apiKey: string;
+  sellParameters: SellParamsType;
+  clientReferenceID: string;
+  mode?: "development" | "production";
+};
+
+const WidgetComponent = ({
+  apiKey,
+  sellParameters,
+  clientReferenceID,
+  mode = "development",
+}: WidgetComponentProps) => {
+  return (
+    <div style={{ position: "relative" }} className={css.widget_component} id="widget-container">
+      <div className={css.gilde_widget_wrapped}>
+        <div className={css.gilde_widget_modal}>
+          <div className={css.gilde_widget_content}>
+            <ToastProvider>
+              <WidgetContent
+                sellParameters={sellParameters}
+                apiKey={apiKey}
+                clientReferenceID={clientReferenceID}
+                css={css}
+                mode={mode}
+              />
+            </ToastProvider>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WidgetComponent;

package/src/components/WidgetContent.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import SellField from "./SellField";
+import type { SellParamsType } from "./types";
+// Props
+type WidgetContentProps = {
+  apiKey: string;
+  sellParameters: SellParamsType;
+  clientReferenceID: string;
+  css: any;
+  mode: string;
+};
+
+const WidgetContent = ({
+  apiKey,
+  sellParameters,
+  clientReferenceID,
+  css,
+  mode,
+}: WidgetContentProps) => {
+  // const [activeTab, setActiveTab] = useState("sell");
+  return (
+    <div className={css.gilde_tabs_wrapped}>
+      <div className={css.gilde_tabs_content}>
+        <SellField
+          apiKey={apiKey}
+          parameters={sellParameters}
+          clientReferenceID={clientReferenceID}
+          css={css}
+          mode={mode}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default WidgetContent;