@sikka/hawa 0.1.40 → 0.1.41

package/lib/src/layout/HawaGrid.js

@@ -1 +0,0 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.HawaGrid=function(e){return t.default.createElement("div",{className:" columns-1 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-4 [&>*:not(:first-child)]:mt-8"},e.children)};

package/lib/src/layout/HawaSiteLayout.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.mjs.js"),t=require("react"),a=require("../../node_modules/clsx/dist/clsx.m.js"),r=require("../hooks/useDiscloser.js"),l=require("../hooks/useBreakpoint.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);exports.HawaSiteLayout=function(n){var s,o=n.direction,u=void 0===o?"rtl":o,c=n.navigationSize,d=void 0===c?"md":c,f=e.__rest(n,["direction","navigationSize"]),m=t.useState(!1),v=m[0],h=m[1],p=t.useState(!1);p[0],p[1],r(!1);var x,g=t.useRef(null);t.useRef(null),x="undefined"!=typeof window?l():1200;var w=t.useState(!1),E=w[0];w[1],t.useEffect((function(){var e=function(e){!g.current||g.current.contains(e.target)||E||h(!1)};return document.addEventListener("click",e,!0),function(){document.removeEventListener("click",e,!0)}}),[E]);return i.default.createElement("div",{className:"h-full w-full"},i.default.createElement("div",{className:a.clsx("z-30 flex w-auto select-none flex-row items-start justify-between bg-layoutPrimary-500  transition-all",{sm:"h-10",md:"",lg:"h-24"}[d],"rounded p-3 ",v?"h-44":"h-14",f.stickyNav?"fixed left-4 right-4 top-4":"","rtl"===u?"flex-row":"flex-row-reverse")},x>600?i.default.createElement("div",{className:"flex  flex-row h-8    items-center  gap-4 px-3"},null===(s=f.navItems)||void 0===s?void 0:s.map((function(e,t){var a=e.label;return i.default.createElement("div",{onClick:function(){return h(!v)},key:t,className:"cursor-pointer rounded bg-none text-gray-600 transition-all hover:text-black"},a)}))):i.default.createElement("div",{className:"flex items-center justify-center"},i.default.createElement("div",{onClick:function(){return h(!v)},className:"cursor-pointer  rounded p-1  transition-all hover:bg-gray-100"},i.default.createElement("svg",{stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",height:"1.6em",width:"1.6em"},i.default.createElement("path",{"fill-rule":"evenodd",d:"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z","clip-rule":"evenodd"}))," "),f.pageTitle?i.default.createElement("div",null,f.pageTitle):i.default.createElement("div",null)),i.default.createElement("div",{className:"h-full"},i.default.createElement("img",{className:"h-full max-h-8 ",src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/seera/seera-horizontal-wordmark-".concat("rtl"===u?"ar":"en","-white.svg")}))),i.default.createElement("div",{className:a.clsx(" relative top-14")},f.children))};

package/lib/src/layout/Sidebar.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.mjs.js"),t=require("react"),r=require("../../node_modules/@radix-ui/react-accordion/dist/index.mjs.js"),a=require("../util.js");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=n(t);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){o(e,t,r[t])}))}return e}var i=r.Root,s="flex flex-1 items-center select-none cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90",m=l.forwardRef((function(t,n){var o=t.className,i=e.__rest(t,["className"]);return l.createElement(r.Item,c({ref:n,className:a.cn(o)},i))}));m.displayName="AccordionItem";var u=l.forwardRef((function(t,n){var o=t.className,i=t.showArrow,m=t.children,u=e.__rest(t,["className","showArrow","children"]);return l.createElement(r.Header,{className:"flex"},l.createElement(r.Trigger,c({ref:n,className:a.cn(s,o)},u),m,i&&l.createElement("svg",{"aria-label":"Chevron Right Icon",stroke:"currentColor",fill:"currentColor","stroke-width":"1",viewBox:"0 0 16 16",height:"1em",width:"1em",className:"h-4 w-4 shrink-0 rotate-90 transition-transform duration-200"},l.createElement("path",{"fill-rule":"evenodd",d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"}))))}));u.displayName=r.Trigger.displayName;var d=l.forwardRef((function(t,n){var o=t.className,i=t.children,s=e.__rest(t,["className","children"]);return l.createElement(r.Content,c({ref:n,className:a.cn("overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",o)},s),l.createElement("div",null,i))}));d.displayName=r.Content.displayName;var f=function(e){var t=e.item,r=e.isSelected,n=e.onItemClick,o=e.onSubItemClick,c=e.direction,i=e.isOpen,f=void 0===i||i,p=function(e,t){return r&&r[t]===e?"bg-primary text-primary-foreground  cursor-default":"hover:bg-primary/10"};return t.subitems?l.createElement(m,{value:t.value,className:"overflow-x-clip",dir:c},l.createElement(u,{className:a.cn(p(t.value,0)),showArrow:f},l.createElement("div",{className:a.cn(!f&&"py-1","flex w-fit flex-row items-center  gap-2")},t.icon,f&&l.createElement("span",{className:a.cn("transition-all ",f?"opacity-100":"opacity-0")},t.label))),t.subitems&&l.createElement(d,{className:" mt-1 h-full rounded  "},l.createElement("div",{className:a.cn("flex h-full flex-col gap-2 bg-foreground/5 p-1")},t.subitems.map((function(e,r){return l.createElement("li",{key:r,onClick:function(r){r.stopPropagation(),o&&o([t.value,e.value])},className:a.cn("flex h-full cursor-pointer flex-row items-center gap-2 rounded bg-foreground/10 p-2 transition-all",p(e.value,1))},e.icon,e.label)}))))):l.createElement("div",{dir:c,onClick:function(){n&&n([t.value])},className:a.cn(s,p(t.value,0),"overflow-x-clip ")},l.createElement("div",{className:"flex flex-row items-center gap-2 "},t.icon,l.createElement("span",{className:a.cn("whitespace-nowrap transition-all",f?"opacity-100":"opacity-0")},t.label)))};exports.SidebarGroup=function(e){var t=e.title,r=e.items,a=e.selectedItem,n=e.openedItem,o=e.setOpenedItem,c=e.onItemClick,s=e.onSubItemClick,m=e.direction,u=e.isOpen;return l.createElement("div",null,t&&l.createElement("h3",{className:"mb-1 font-bold"},t),l.createElement("ul",{className:"flex flex-col gap-2"},l.createElement(i,{value:n,type:"single",onValueChange:function(e){o(e)},collapsible:!0,className:"flex flex-col gap-1"},r.map((function(e,t){return l.createElement(f,{isOpen:u,isSelected:a,key:t,direction:m,item:e,onItemClick:c,onSubItemClick:s})})))))},exports.SidebarItem=f;

package/lib/src/util.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../node_modules/clsx/dist/clsx.m.js"),r=require("../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");exports.cn=function(){for(var s=[],t=0;t<arguments.length;t++)s[t]=arguments[t];return r.twMerge(e.clsx(s))};

package/lib/stories/ElementsStories/Breadcrumb.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const BreadCrumb: any;
-export declare const BreadCrumWithSeparator: any;
-export declare const BreadcrumbIconSeparator: any;

package/lib/stories/ManualStories/BlocksIntroduction.stories.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Introduction: () => React.JSX.Element;

package/lib/stories/ManualStories/Customization.stories.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Customization: () => React.JSX.Element;

package/lib/stories/ManualStories/ElementsIntroduction.stories.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Introduction: () => React.JSX.Element;

package/lib/stories/ManualStories/Installation.stories.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Installation: () => React.JSX.Element;

package/lib/stories/ManualStories/LayoutIntroduction.stories.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Introduction: () => React.JSX.Element;

package/lib/stories/ManualStories/Overview.stories.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        className: string;
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Overview: () => React.JSX.Element;

package/lib/stories/ManualStories/Usage.stories.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "../stories-styles.css";
-declare const _default: {
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-        controls: {
-            expand: boolean;
-            disable: boolean;
-            hideNoControlsWarning: boolean;
-            exclude: any[];
-        };
-        options: {
-            showPanel: boolean;
-        };
-    };
-    title: string;
-};
-export default _default;
-export declare const Usage: () => React.JSX.Element;

package/lib/util.d.ts

@@ -1,10 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;
-type Palette = {
-    name: string;
-    colors: {
-        [key: number]: string;
-    };
-};
-declare function getPallette(baseColor: string): Palette;
-export { getPallette };

package/src/elements/HawaCardInput.tsx

@@ -1,318 +0,0 @@
-import React, { useState } from "react"
-import { HawaButton } from "./HawaButton"
-
-const CARDS = {
-  mada: "^(4(0(0861|1757|3024|6136|6996|7(197|395)|9201)|1(0621|0685|2565|7633|9593)|2(281(7|8|9)|0(132)|1(141)|6(897)|8(1|331|67(1|2|3)))|3(1361|2328|4107|9954)|4(0(533|647|795)|5564|6(393|404|672))|5(5(036|708)|7865|7997|8456)|6(2220|854(0|1|2|3))|7(4491)|8(301(0|1|2)|4783|609(4|5|6)|931(7|8|9))|93428)|5(0(4300|6968|8160)|13213|2(0058|1076|4(130|514)|9(415|741))|3(0060|0906|1095|1196|2013|5(825|989)|6023|7767|9931)|4(3(085|357)|9760)|5(4180|7606|8563|8848)|8(5265|8(8(4(5|6|7|8|9)|5(0|1))|98(2|3))|9(005|206)))|6(0(4906|5141)|36120)|9682(0(1|2|3|4|5|6|7|8|9)|1(0|1)))",
-  visa: "^4",
-  amex: "^(34|37)",
-  mastercard: "^5[1-5]",
-  discover: "^6011",
-  unionpay: "^62",
-  troy: "^9792",
-  diners: "^(30[0-5]|36)",
-}
-
-const currentYear = new Date().getFullYear()
-const monthsArr = Array.from({ length: 12 }, (x, i) => {
-  const month = i + 1
-  return month <= 9 ? "0" + month : month
-})
-const yearsArr = Array.from({ length: 9 }, (_x, i) => currentYear + i)
-
-export const HawaCardInput = ({
-  cardHolder,
-  cardMonth,
-  cardYear,
-  cardCvv,
-  rememberMe,
-  onUpdateState,
-  cardNumberRef,
-  cardHolderRef,
-  cardDateRef,
-  cardCvvRef,
-  rememberMeRef,
-  onCardInputFocus,
-  onCardInputBlur,
-  children,
-  handlePaymentPayfort,
-  selectedPaymentMethod,
-  isRegister,
-  accessCode,
-  shaRequestPassphrase,
-  transaction,
-  signature,
-  isCheckout,
-}) => {
-  //   const token = getToken()
-  //   const router = useRouter()
-  //   const formRegister = useRef()
-  //   const [loading, setLoading] = useState(false)
-  const [cardNumber, setCardNumber] = useState("")
-  const [expiryDate, setExpiryDate] = useState("")
-  const [binCardType, setBinCardType] = useState("")
-  //   const [tokenName, setTokenName] = useState("")
-  //   const [registeredCard, setRegisteredCard] = useState("")
-  const [registerSignature, setRegisterSignature] = useState("")
-  const [card, setCard] = useState("")
-  //   const [payfortForm, setPayfortForm] = useState("")
-  //   const classes = useStyles()
-  //   const [value, setValue] = React.useState("")
-  //   const [error, setError] = React.useState(false)
-  //   const [helperText, setHelperText] = React.useState("Choose wisely")
-
-  //   const { data: allCards, loading: loadingCards } = useQuery(getCards(), {
-  //     variables: { userId: token.User._id },
-  //   })
-
-  //   const { t, lang } = useTranslation("common")
-
-  const cardType = (cardNumber) => {
-    const number = cardNumber.replace(/\D/g, "")
-    let re
-    for (const [card, pattern] of Object.entries(CARDS)) {
-      re = new RegExp(pattern)
-      console.log("number=", number)
-      console.log("card=", card)
-      console.log("pattern=", pattern)
-      console.log("res=", re.test(number))
-      if (number.match(re) != null) {
-        return card
-      }
-    }
-
-    return "" // default type
-  }
-
-  // TODO: We can improve the regex check with a better approach like in the card component.
-
-  const onCardNumberChange = (event) => {
-    let { value, name } = event.target
-    let cardNumber = value
-    value = value.replace(/\D/g, "")
-    if (/^3[47]\d{0,13}$/.test(value)) {
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
-    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
-      // diner's club, 14 digits
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{6})/, "$1 $2 ")
-    } else if (/^\d{0,16}$/.test(value)) {
-      // regular cc number, 16 digits
-      cardNumber = value
-        .replace(/(\d{4})/, "$1 ")
-        .replace(/(\d{4}) (\d{4})/, "$1 $2 ")
-        .replace(/(\d{4}) (\d{4}) (\d{4})/, "$1 $2 $3 ")
-    }
-
-    setCardNumber(cardNumber.trimRight())
-    setBinCardType(cardType(cardNumber.trimRight()))
-    onUpdateState(name, cardNumber)
-  }
-  const handleFormChange = (event) => {
-    const { name, value } = event.target
-    if (name === "rememberMe") {
-      onUpdateState(name, !rememberMe)
-    } else {
-      onUpdateState(name, value)
-    }
-  }
-
-  return (
-    <div>
-      <div>
-        <div>{children}</div>
-        <div>
-          <div className="w-fit bg-red-200 p-2">
-            <label htmlFor="cardNumber" className="relative">
-              Card Number
-              <input
-                type="tel"
-                name="cardNumber"
-                className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-                autoComplete="off"
-                onChange={onCardNumberChange}
-                maxLength={19}
-                ref={cardNumberRef}
-                onFocus={(e) => onCardInputFocus(e, "cardNumber")}
-                onBlur={onCardInputBlur}
-                value={cardNumber}
-              />
-              {/* {binCardType && (
-                  <img className="bg-red-700" src={`/${binCardType}.png`} />
-                )} */}
-              <img
-                className="absolute right-2 top-1/2 translate-y-1/2 bg-red-700"
-                src={`../Assets/images/card-type/${binCardType}.png`}
-              />
-            </label>
-          </div>
-
-          <div className="flex w-fit flex-col bg-red-300 p-2">
-            <label htmlFor="cardName" className="card-input__label">
-              Card Holder{" "}
-            </label>
-            <input
-              type="text"
-              //   className="card-input__input"
-              className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-              autoComplete="off"
-              name="cardHolder"
-              onChange={handleFormChange}
-              ref={cardHolderRef}
-              onFocus={(e) => onCardInputFocus(e, "cardHolder")}
-              onBlur={onCardInputBlur}
-            />
-          </div>
-
-          <div className="flex w-fit flex-col bg-red-400 p-2">
-            <div className="flex flex-col">
-              <label htmlFor="cardMonth" className="card-input__label">
-                Expiration
-              </label>
-              <div className="flex flex-row gap-2">
-                <select
-                  className="rounded p-2.5"
-                  value={cardMonth}
-                  name="cardMonth"
-                  onChange={handleFormChange}
-                  ref={cardDateRef}
-                  onFocus={(e) => onCardInputFocus(e, "cardDate")}
-                  onBlur={onCardInputBlur}
-                >
-                  <option value="" disabled>
-                    Month
-                  </option>
-
-                  {monthsArr.map((val, index) => (
-                    <option key={index} value={val}>
-                      {val}
-                    </option>
-                  ))}
-                </select>
-                <select
-                  name="cardYear"
-                  className="rounded p-2.5"
-                  value={cardYear}
-                  onChange={handleFormChange}
-                  onFocus={(e) => onCardInputFocus(e, "cardDate")}
-                  onBlur={onCardInputBlur}
-                >
-                  <option value="" disabled>
-                    Year
-                  </option>
-
-                  {yearsArr.map((val, index) => (
-                    <option key={index} value={val}>
-                      {val}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-          </div>
-          <div className="flex w-fit flex-col bg-red-500 p-2">
-            <label htmlFor="cardCvv">CCV</label>
-            <input
-              type="tel"
-              className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-              maxLength={4}
-              autoComplete="off"
-              name="cardCvv"
-              onChange={handleFormChange}
-              //   onFocus={onCvvFocus}
-              //   onBlur={onCvvBlur}
-              ref={cardCvvRef}
-            />
-          </div>
-          {isCheckout && (
-            <div className="card-input">
-              <label htmlFor="rememberMe" className="card-input__label">
-                <input
-                  type="checkbox"
-                  autoComplete="off"
-                  name="rememberMe"
-                  checked={rememberMe}
-                  onChange={handleFormChange}
-                  ref={rememberMeRef}
-                />
-                Store Payment Details{" "}
-              </label>
-            </div>
-          )}
-          <div className="card-input" style={{ marginTop: "20px" }}>
-            <form
-              onSubmit={(e) => e.preventDefault()}
-              //   ref={(ref) => setPayfortForm(ref)}
-              id="formSendToAps"
-              action={`${process.env.NEXT_PUBLIC_QAWAIM_PAYFORT_ENVIRONMENT_URL}`}
-              method="POST"
-            >
-              <input type="hidden" name="access_code" value={accessCode} />
-              <input
-                type="hidden"
-                name="merchant_identifier"
-                value={`${process.env.NEXT_PUBLIC_QAWAIM_PAYFORT_MERCHANT_ID}`}
-              />
-              <input type="hidden" name="language" value={"en"} />
-              <input
-                type="hidden"
-                name="card_number"
-                value={cardNumber.replace(/\s/g, "")}
-              />
-              <input type="hidden" name="expiry_date" value={expiryDate} />
-              <input
-                type="hidden"
-                name="signature"
-                value={isCheckout ? signature : registerSignature}
-              />
-              <input type="hidden" name="card_holder_name" value={cardHolder} />
-              <input
-                type="hidden"
-                name="merchant_reference"
-                // value={isCheckout ? transaction?._id : card?._id}
-              />
-              <input
-                type="hidden"
-                name="service_command"
-                value={isCheckout ? "TOKENIZATION" : "CREATE_TOKEN"}
-              />
-              <input
-                type="hidden"
-                name="return_url"
-                // value={
-                //   isCheckout
-                //     ? `${process.env.NEXT_PUBLIC_QAWAIM_USER_PORTAL_URL}/aps_online/response`
-                //     : `${process.env.NEXT_PUBLIC_QAWAIM_USER_PORTAL_URL}/aps_online/register`
-                // }
-              />
-              {!isCheckout && (
-                <input
-                  type="hidden"
-                  name="currency"
-                  //   value={token.User.default_currency?.toUpperCase()}
-                />
-              )}
-              {isCheckout && (
-                <>
-                  <input
-                    type="hidden"
-                    name="card_security_code"
-                    value={cardCvv}
-                  />
-
-                  {/* {tokenName && (
-                    <input type="hidden" name="token_name" value={tokenName} />
-                  )} */}
-                </>
-              )}
-
-              <HawaButton>Pay</HawaButton>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}