@koomipay/react 1.0.1 → 1.0.2

package/dist/cjs/index.js

@@ -0,0 +1 @@
+"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),axios=require("axios"),AdyenCheckout=require("@adyen/adyen-web"),__assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var s in t=arguments[n])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function __awaiter(e,a,o,c){return new(o=o||Promise)(function(n,t){function r(e){try{i(c.next(e))}catch(e){t(e)}}function s(e){try{i(c.throw(e))}catch(e){t(e)}}function i(e){var t;e.done?n(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(r,s)}i((c=c.apply(e,a||[])).next())})}function __generator(r,s){var i,a,o,c={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},l={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function e(n){return function(e){var t=[n,e];if(i)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(i=1,a&&(o=2&t[0]?a.return:t[0]?a.throw||((o=a.return)&&o.call(a),0):a.next)&&!(o=o.call(a,t[1])).done)return o;switch(a=0,(t=o?[2&t[0],o.value]:t)[0]){case 0:case 1:o=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,a=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(o=0<(o=c.trys).length&&o[o.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!o||t[1]>o[0]&&t[1]<o[3]))c.label=t[1];else if(6===t[0]&&c.label<o[1])c.label=o[1],o=t;else{if(!(o&&c.label<o[2])){o[2]&&c.ops.pop(),c.trys.pop();continue}c.label=o[2],c.ops.push(t)}}t=s.call(r,c)}catch(e){t=[6,e],a=0}finally{i=o=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}}}function classNames(e){return Object.entries(e).map(function(e,t){return e[1]?e[0]:null}).filter(function(e){return e}).join(" ")}function classNameObject(e){return e?e.split(" ").reduce(function(e,t){return __assign(__assign({},e),((e={})[t]=!0,e))},{}):{}}function Label(e){var t=e.className,n=e.error,r=e.htmlFor,s=e.info,i=e.mandatory,e=e.children;return jsxRuntime.jsxs("div",__assign({className:"flex items-center justify-between"},{children:[jsxRuntime.jsxs("label",__assign({htmlFor:r,className:classNames(__assign(__assign({},classNameObject(t)),{"block text-base font-medium mb-1.5":!0,"text-gray-900 dark:text-white":!n,"text-red-600 dark:text-red-500":!!n}))},{children:[e,i&&jsxRuntime.jsx("span",__assign({className:"ml-1 text-red-500"},{children:"*"}))]})),s&&jsxRuntime.jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(n&&"text-red-600")},{children:s}))]}))}function resolveLogoUrl(e,t){return"".concat(t.assetHost,"/").concat(e)}function CheckoutCardLogo(e){var t=e.active,n=e.logoUrl,e=e.client.getConfig();return jsxRuntime.jsx("div",__assign({className:classNames({"h-10":!0,"grayscale opacity-30":!t})},{children:jsxRuntime.jsx("img",{className:"object-contain w-full h-full",src:resolveLogoUrl(n,e)})}))}function CheckoutInputField(e){var t=e.field,n=e.focus,r=e.valids,e=e.errors,e=!!e&&e[t],r=!!r&&r[t],s=null!=e,e=!!s&&e.errorMessage;return jsxRuntime.jsxs("div",__assign({className:"relative mb-4"},{children:[jsxRuntime.jsx("div",{className:classNames({"h-12 border px-3 py-1.5 rounded-md overflow-hidden":!0,"border-gray-200":!n&&!s,"bg-green-50 border-green-700":!!r,"bg-red-50 border-red-500":!n&&!!s&&!r,"bg-blue-50 border-blue-500 ring-2 ring-blue-200":!!n}),"data-cse":t}),!!r&&jsxRuntime.jsx("div",__assign({className:"absolute top-0 bottom-0 flex items-center text-green-700 right-3"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},{children:[jsxRuntime.jsx("path",{d:"M0 0h24v24H0z",fill:"none"}),jsxRuntime.jsx("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"})]}))})),!!e&&jsxRuntime.jsx("p",__assign({className:"mt-1.5 text-red-500 text-sm leading-tight"},{children:e}))]}))}function GrabPayComponent(e){var t=e.active,n=e.paymentMethod,r=e.onValid,s=e.onChange;return react.useEffect(function(){t&&("function"==typeof s&&s({type:n.type}),"function"==typeof r)&&r(!0)},[t]),t?jsxRuntime.jsx("div",{children:"After checkout, You will be redirected to payment page to complete this payment."}):null}function CardComponent(e){var t=e.client,n=e.active,r=e.type,s=e.brands,i=e.onValid,a=e.onChange,o=react.useRef(null),e=react.useState(!0),c=e[0],l=e[1],e=react.useState({}),u=e[0],d=e[1],e=react.useState(null),p=e[0],m=e[1],e=react.useState([]),h=e[0],x=e[1],e=react.useState({}),y=e[0],f=e[1],e=react.useState({}),g=e[0],v=e[1];react.useEffect(function(){n&&(i(!1),l(!0),d({}),m(null),x([]),f({}),v({}),function(){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,AdyenCheckout(j)];case 1:return t=e.sent(),o.current&&t.create("securedfields",{type:r,brands:s,styles:{error:{color:"red"},validated:{color:"green"},placeholder:{color:"#d8d8d8"}},onLoad:function(){l(!0)},onConfigSuccess:function(){l(!1)},onFocus:function(e){var e=e||{},t=e.focus,e=e.fieldType;m(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;x(e||[])}}).mount(o.current),[3,3];case 2:return t=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",t),[3,3];case 3:return[2]}})})}())},[n,r]),react.useEffect(function(){var e;u&&"function"==typeof i&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),i(e),a({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder}))},[u]);var e=t.getConfig(),j={locale:"en_US",environment:e.clientEnv,clientKey:e.clientKey,analytics:{enabled:!1},onChange:function(e){var t=(e=e||{}).data,n=e.valid,e=e.errors;d(!!t&&t.paymentMethod||{}),v(Object.assign(__assign(__assign({},n||{}),{encryptedExpiryDate:n.encryptedExpiryMonth&&n.encryptedExpiryYear}))),f(e||{})}};return n?jsxRuntime.jsxs("div",__assign({className:classNames({"relative transition-all":!0,"h-96 max-h-96":!!c,"h-auto max-h-120":!c})},{children:[jsxRuntime.jsxs("div",__assign({className:"flex my-3 space-x-3"},{children:[jsxRuntime.jsx(CheckoutCardLogo,{active:h.includes("visa"),logoUrl:"logo/visa.svg",client:t}),jsxRuntime.jsx(CheckoutCardLogo,{active:h.includes("mc"),logoUrl:"logo/mastercard.svg",client:t}),jsxRuntime.jsx(CheckoutCardLogo,{active:h.includes("amex"),logoUrl:"logo/american-express.svg",client:t})]})),jsxRuntime.jsxs("div",__assign({ref:o,className:classNames({"opacity-0":!!c})},{children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===p,valids:g,errors:y})]}),jsxRuntime.jsxs("div",__assign({className:"grid grid-cols-2 gap-6"},{children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"expiryDate"},{children:"Expiry date"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedExpiryDate",focus:"encryptedExpiryDate"===p,valids:g,errors:y})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsxRuntime.jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===p,valids:g,errors:y})]})]}))]})),jsxRuntime.jsxs("div",__assign({className:classNames({"absolute inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!c})},{children:[jsxRuntime.jsx("div",__assign({className:"w-16 h-16"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}))})),jsxRuntime.jsx("p",{children:"Loading"})]}))]})):null}function CheckoutPaymentMethod(e){var t=e.active,n=e.children,e=e.onClick;return jsxRuntime.jsx("div",__assign({className:classNames({"border px-3 py-2 mb-2 rounded-md cursor-pointer":!0,"bg-primary-500 text-white border-primary-500":!!t,"text-gray-300 border-gray-300":!t}),onClick:e},{children:n}))}function CheckoutContainer(e){var r=e.client,s=e.amount,t=e.onValid,e=e.onChange,n=r.getApiKey(),i=react.useState(!0),a=i[0],o=i[1],i=react.useState([]),c=i[0],l=i[1],i=react.useState(null),u=i[0],d=i[1];return react.useEffect(function(){n?function(n){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return[4,axios.post("".concat(r.getConfig().baseApiUri,"/koomipay/payment-methods"),{amount:{currency:s.currency,price:s.price}},{headers:{"X-API-KEY":n}})];case 1:return(t=e.sent())&&t.data&&t.data.success&&(l(t.data.paymentMethods),d(!!t.data.paymentMethods&&t.data.paymentMethods[0]),o(!1)),[2]}})})}(n):o(!1)},[n]),a?jsxRuntime.jsxs("div",__assign({className:classNames({"mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!a})},{children:[jsxRuntime.jsx("div",__assign({className:"w-16 h-16"},{children:jsxRuntime.jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}))})),jsxRuntime.jsx("p",{children:"Loading"})]})):jsxRuntime.jsxs("div",{children:[(c||[]).map(function(t){return jsxRuntime.jsx(CheckoutPaymentMethod,__assign({active:(u||{}).type===t.type,onClick:function(){var e;e=t,(u||{}).type!==(e||{}).type&&d(e)}},{children:t.name}),t.type)}),jsxRuntime.jsxs("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:[jsxRuntime.jsx(CardComponent,{client:r,active:!!u&&"scheme"===u.type,type:"card",brands:["mc","visa","amex"],onValid:t,onChange:e}),jsxRuntime.jsx(GrabPayComponent,{active:!!u&&u.type.includes("grabpay"),paymentMethod:u,onValid:t,onChange:e})]}))]})}Label.defaultProps={error:!1};var environments=["dev","test","live"],configuration={dev:{baseApiUri:"http://localhost:32022",assetHost:"http://localhost:3000",clientEnv:"TEST",clientKey:"test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG"},test:{baseApiUri:"https://api-pay-demo.koomi.app",assetHost:"https://pay-demo.koomi.app",clientEnv:"TEST",clientKey:"test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG"},live:{baseApiUri:"https://api-pay-demo.koomi.app",assetHost:"https://pay-demo.koomi.app",clientEnv:"TEST",clientKey:"test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG"}};function getConfig(e){if(!e)throw new Error('getConfig(env) expected env as string, but got "'.concat(e,'"'));if(environments.includes(e))return configuration[e];throw new Error("env must be one of ".concat(environments.join(", ")))}function createClient(e){var t=e.apiKey,e=e.env;return new KoomiPayClient({apiKey:t,env:e})}var KoomiPayClient=function(){function e(e){this.apiKey=e.apiKey,this.env=e.env,this.config=getConfig(e.env)}return e.prototype.setConfig=function(e){"apiKey"in e&&(this.apiKey=e.apiKey),"env"in e&&(this.env=e.env,this.config=getConfig(e.env))},e.prototype.getConfig=function(){return this.config},e.prototype.getApiKey=function(){return this.apiKey},e.prototype.getEnv=function(){return this.env},e.prototype.checkout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e.prototype.instantCheckout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e}();exports.CheckoutContainer=CheckoutContainer,exports.createClient=createClient,module.exports=Object.assign(exports.default||{},exports);

package/dist/{types → cjs/types}/components/CheckoutContainer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { KoomiPayClient, CheckoutAmount } from "../../lib/client";
+import { KoomiPayClient, CheckoutAmount } from "../lib/client";
 export type CardPaymentMethodPayload = {
     type: string;
     brand?: string;

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckoutContainer } from "./components/CheckoutContainer";
+export { createClient } from "./lib/client";

package/dist/es/index.js

@@ -0,0 +1 @@
+import{jsxs,jsx}from"react/jsx-runtime";import{useState,useEffect,useRef}from"react";import axios from"axios";import AdyenCheckout from"@adyen/adyen-web";var __assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var s in t=arguments[n])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function __awaiter(e,o,i,c){return new(i=i||Promise)(function(n,t){function r(e){try{a(c.next(e))}catch(e){t(e)}}function s(e){try{a(c.throw(e))}catch(e){t(e)}}function a(e){var t;e.done?n(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(r,s)}a((c=c.apply(e,o||[])).next())})}function __generator(r,s){var a,o,i,c={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},l={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function e(n){return function(e){var t=[n,e];if(a)throw new TypeError("Generator is already executing.");for(;c=l&&t[l=0]?0:c;)try{if(a=1,o&&(i=2&t[0]?o.return:t[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,t[1])).done)return i;switch(o=0,(t=i?[2&t[0],i.value]:t)[0]){case 0:case 1:i=t;break;case 4:return c.label++,{value:t[1],done:!1};case 5:c.label++,o=t[1],t=[0];continue;case 7:t=c.ops.pop(),c.trys.pop();continue;default:if(!(i=0<(i=c.trys).length&&i[i.length-1])&&(6===t[0]||2===t[0])){c=0;continue}if(3===t[0]&&(!i||t[1]>i[0]&&t[1]<i[3]))c.label=t[1];else if(6===t[0]&&c.label<i[1])c.label=i[1],i=t;else{if(!(i&&c.label<i[2])){i[2]&&c.ops.pop(),c.trys.pop();continue}c.label=i[2],c.ops.push(t)}}t=s.call(r,c)}catch(e){t=[6,e],o=0}finally{a=i=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}}}function classNames(e){return Object.entries(e).map(function(e,t){return e[1]?e[0]:null}).filter(function(e){return e}).join(" ")}function classNameObject(e){return e?e.split(" ").reduce(function(e,t){return __assign(__assign({},e),((e={})[t]=!0,e))},{}):{}}function Label(e){var t=e.className,n=e.error,r=e.htmlFor,s=e.info,a=e.mandatory,e=e.children;return jsxs("div",__assign({className:"flex items-center justify-between"},{children:[jsxs("label",__assign({htmlFor:r,className:classNames(__assign(__assign({},classNameObject(t)),{"block text-base font-medium mb-1.5":!0,"text-gray-900 dark:text-white":!n,"text-red-600 dark:text-red-500":!!n}))},{children:[e,a&&jsx("span",__assign({className:"ml-1 text-red-500"},{children:"*"}))]})),s&&jsx("span",__assign({className:"text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(n&&"text-red-600")},{children:s}))]}))}function resolveLogoUrl(e,t){return"".concat(t.assetHost,"/").concat(e)}function CheckoutCardLogo(e){var t=e.active,n=e.logoUrl,e=e.client.getConfig();return jsx("div",__assign({className:classNames({"h-10":!0,"grayscale opacity-30":!t})},{children:jsx("img",{className:"object-contain w-full h-full",src:resolveLogoUrl(n,e)})}))}function CheckoutInputField(e){var t=e.field,n=e.focus,r=e.valids,e=e.errors,e=!!e&&e[t],r=!!r&&r[t],s=null!=e,e=!!s&&e.errorMessage;return jsxs("div",__assign({className:"relative mb-4"},{children:[jsx("div",{className:classNames({"h-12 border px-3 py-1.5 rounded-md overflow-hidden":!0,"border-gray-200":!n&&!s,"bg-green-50 border-green-700":!!r,"bg-red-50 border-red-500":!n&&!!s&&!r,"bg-blue-50 border-blue-500 ring-2 ring-blue-200":!!n}),"data-cse":t}),!!r&&jsx("div",__assign({className:"absolute top-0 bottom-0 flex items-center text-green-700 right-3"},{children:jsxs("svg",__assign({className:"w-6 h-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor"},{children:[jsx("path",{d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"})]}))})),!!e&&jsx("p",__assign({className:"mt-1.5 text-red-500 text-sm leading-tight"},{children:e}))]}))}function GrabPayComponent(e){var t=e.active,n=e.paymentMethod,r=e.onValid,s=e.onChange;return useEffect(function(){t&&("function"==typeof s&&s({type:n.type}),"function"==typeof r)&&r(!0)},[t]),t?jsx("div",{children:"After checkout, You will be redirected to payment page to complete this payment."}):null}function CardComponent(e){var t=e.client,n=e.active,r=e.type,s=e.brands,a=e.onValid,o=e.onChange,i=useRef(null),e=useState(!0),c=e[0],l=e[1],e=useState({}),u=e[0],d=e[1],e=useState(null),p=e[0],h=e[1],e=useState([]),y=e[0],f=e[1],e=useState({}),m=e[0],g=e[1],e=useState({}),v=e[0],x=e[1];useEffect(function(){n&&(a(!1),l(!0),d({}),h(null),f([]),g({}),x({}),function(){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,AdyenCheckout(_)];case 1:return t=e.sent(),i.current&&t.create("securedfields",{type:r,brands:s,styles:{error:{color:"red"},validated:{color:"green"},placeholder:{color:"#d8d8d8"}},onLoad:function(){l(!0)},onConfigSuccess:function(){l(!1)},onFocus:function(e){var e=e||{},t=e.focus,e=e.fieldType;h(t?e:null)},onBinLookup:function(e){e=(e||{}).detectedBrands;f(e||[])}}).mount(i.current),[3,3];case 2:return t=e.sent(),"development"===process.env.NODE_ENV&&console.log("[ERROR] Handle create checkout error: ",t),[3,3];case 3:return[2]}})})}())},[n,r]),useEffect(function(){var e;u&&"function"==typeof a&&(e=!!(u.encryptedCardNumber&&u.encryptedExpiryMonth&&u.encryptedExpiryYear&&u.encryptedSecurityCode),a(e),o({type:u.type,brand:u.brand,encryptedCardNumber:u.encryptedCardNumber,encryptedExpiryMonth:u.encryptedExpiryMonth,encryptedExpiryYear:u.encryptedExpiryYear,encryptedSecurityCode:u.encryptedSecurityCode,cardholder:u.cardholder}))},[u]);var e=t.getConfig(),_={locale:"en_US",environment:e.clientEnv,clientKey:e.clientKey,analytics:{enabled:!1},onChange:function(e){var t=(e=e||{}).data,n=e.valid,e=e.errors;d(!!t&&t.paymentMethod||{}),x(Object.assign(__assign(__assign({},n||{}),{encryptedExpiryDate:n.encryptedExpiryMonth&&n.encryptedExpiryYear}))),g(e||{})}};return n?jsxs("div",__assign({className:classNames({"relative transition-all":!0,"h-96 max-h-96":!!c,"h-auto max-h-120":!c})},{children:[jsxs("div",__assign({className:"flex my-3 space-x-3"},{children:[jsx(CheckoutCardLogo,{active:y.includes("visa"),logoUrl:"logo/visa.svg",client:t}),jsx(CheckoutCardLogo,{active:y.includes("mc"),logoUrl:"logo/mastercard.svg",client:t}),jsx(CheckoutCardLogo,{active:y.includes("amex"),logoUrl:"logo/american-express.svg",client:t})]})),jsxs("div",__assign({ref:i,className:classNames({"opacity-0":!!c})},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"cardNumber"},{children:"Card number"})),jsx(CheckoutInputField,{field:"encryptedCardNumber",focus:"encryptedCardNumber"===p,valids:v,errors:m})]}),jsxs("div",__assign({className:"grid grid-cols-2 gap-6"},{children:[jsxs("div",{children:[jsx(Label,__assign({htmlFor:"expiryDate"},{children:"Expiry date"})),jsx(CheckoutInputField,{field:"encryptedExpiryDate",focus:"encryptedExpiryDate"===p,valids:v,errors:m})]}),jsxs("div",{children:[jsx(Label,__assign({htmlFor:"securityCode"},{children:"Security Code (CVV/CVC)"})),jsx(CheckoutInputField,{field:"encryptedSecurityCode",focus:"encryptedSecurityCode"===p,valids:v,errors:m})]})]}))]})),jsxs("div",__assign({className:classNames({"absolute inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!c})},{children:[jsx("div",__assign({className:"w-16 h-16"},{children:jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}))})),jsx("p",{children:"Loading"})]}))]})):null}function CheckoutPaymentMethod(e){var t=e.active,n=e.children,e=e.onClick;return jsx("div",__assign({className:classNames({"border px-3 py-2 mb-2 rounded-md cursor-pointer":!0,"bg-primary-500 text-white border-primary-500":!!t,"text-gray-300 border-gray-300":!t}),onClick:e},{children:n}))}function CheckoutContainer(e){var r=e.client,s=e.amount,t=e.onValid,e=e.onChange,n=r.getApiKey(),a=useState(!0),o=a[0],i=a[1],a=useState([]),c=a[0],l=a[1],a=useState(null),u=a[0],d=a[1];return useEffect(function(){n?function(n){__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:return[4,axios.post("".concat(r.getConfig().baseApiUri,"/koomipay/payment-methods"),{amount:{currency:s.currency,price:s.price}},{headers:{"X-API-KEY":n}})];case 1:return(t=e.sent())&&t.data&&t.data.success&&(l(t.data.paymentMethods),d(!!t.data.paymentMethods&&t.data.paymentMethods[0]),i(!1)),[2]}})})}(n):i(!1)},[n]),jsxs("div",o?__assign({className:classNames({"mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center":!0,"opacity-0 pointer-events-none":!o})},{children:[jsx("div",__assign({className:"w-16 h-16"},{children:jsxs("svg",__assign({className:"w-full h-full animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},{children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}))})),jsx("p",{children:"Loading"})]}):{children:[(c||[]).map(function(t){return jsx(CheckoutPaymentMethod,__assign({active:(u||{}).type===t.type,onClick:function(){var e;e=t,(u||{}).type!==(e||{}).type&&d(e)}},{children:t.name}),t.type)}),jsxs("div",__assign({className:classNames({"border-t border-gray-200 mt-6 py-3":!0})},{children:[jsx(CardComponent,{client:r,active:!!u&&"scheme"===u.type,type:"card",brands:["mc","visa","amex"],onValid:t,onChange:e}),jsx(GrabPayComponent,{active:!!u&&u.type.includes("grabpay"),paymentMethod:u,onValid:t,onChange:e})]}))]})}Label.defaultProps={error:!1};var environments=["dev","test","live"],configuration={dev:{baseApiUri:"http://localhost:32022",assetHost:"http://localhost:3000",clientEnv:"TEST",clientKey:"test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG"},test:{baseApiUri:"https://api-pay-demo.koomi.app",assetHost:"https://pay-demo.koomi.app",clientEnv:"TEST",clientKey:"test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG"},live:{baseApiUri:"https://api-pay-demo.koomi.app",assetHost:"https://pay-demo.koomi.app",clientEnv:"TEST",clientKey:"test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG"}};function getConfig(e){if(!e)throw new Error('getConfig(env) expected env as string, but got "'.concat(e,'"'));if(environments.includes(e))return configuration[e];throw new Error("env must be one of ".concat(environments.join(", ")))}function createClient(e){var t=e.apiKey,e=e.env;return new KoomiPayClient({apiKey:t,env:e})}var KoomiPayClient=function(){function e(e){this.apiKey=e.apiKey,this.env=e.env,this.config=getConfig(e.env)}return e.prototype.setConfig=function(e){"apiKey"in e&&(this.apiKey=e.apiKey),"env"in e&&(this.env=e.env,this.config=getConfig(e.env))},e.prototype.getConfig=function(){return this.config},e.prototype.getApiKey=function(){return this.apiKey},e.prototype.getEnv=function(){return this.env},e.prototype.checkout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e.prototype.instantCheckout=function(n,r){return void 0===r&&(r={}),__awaiter(this,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:r&&this.setConfig(r),e.label=1;case 1:return e.trys.push([1,3,,4]),[4,axios.post("".concat(this.config.baseApiUri,"/koomipay/instant-checkout"),n,{headers:{"X-API-KEY":this.apiKey}})];case 2:return[2,e.sent()];case 3:throw t=e.sent(),console.log("[DEBUG] Instant Checkout error",t),new Error("Error when checkout, please check your payload");case 4:return[2]}})})},e}();export{CheckoutContainer,createClient};

package/dist/es/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/dist/es/types/components/CheckoutContainer.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { KoomiPayClient, CheckoutAmount } from "../lib/client";
+export type CardPaymentMethodPayload = {
+    type: string;
+    brand?: string;
+    encryptedCardNumber?: string;
+    encryptedExpiryMonth?: string;
+    encryptedExpiryYear?: string;
+    encryptedSecurityCode?: string;
+    cardholder?: string;
+};
+export type OnPaymentMethodChangeCallback = (args: CardPaymentMethodPayload) => void;
+export type CheckoutInputFieldProps = {
+    field: string;
+    focus: boolean;
+    valids: any;
+    errors: any;
+};
+export type GrabPayComponentProps = {
+    client?: KoomiPayClient;
+    active: boolean;
+    onValid: (isValid: boolean) => void;
+    onChange: OnPaymentMethodChangeCallback;
+    paymentMethod: any;
+};
+export type CardComponentProps = {
+    client: KoomiPayClient;
+    active: boolean;
+    type: string;
+    brands: string[];
+    onValid: (isValid: boolean) => void;
+    onChange: OnPaymentMethodChangeCallback;
+};
+export type CheckoutPaymentMethodProps = {
+    key: string;
+    active: boolean;
+    onClick: () => void;
+    children?: React.ReactNode | undefined;
+};
+export type KoomiPaymentMethod = {
+    type: string;
+    name: string;
+    [key: string]: any;
+};
+export type CheckoutContainerProps = {
+    client: KoomiPayClient;
+    amount: CheckoutAmount;
+    onValid: (args: any) => void;
+    onChange: (args: any) => void;
+};
+export declare function CheckoutContainer({ client, amount, onValid, onChange }: CheckoutContainerProps): JSX.Element;

package/dist/es/types/components/Label.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare function Label({ className, error, htmlFor, info, mandatory, children }: any): JSX.Element;
+declare namespace Label {
+    var defaultProps: {
+        error: boolean;
+    };
+}
+export default Label;

package/dist/es/types/config/index.d.ts

@@ -0,0 +1,10 @@
+export type ClientConfiguration = {
+    baseApiUri: string;
+    assetHost: string;
+    clientEnv: string;
+    clientKey: string;
+};
+export type ClientConfigurationEnvironment = {
+    [key: string]: ClientConfiguration;
+};
+export declare function getConfig(env: string): ClientConfiguration;

package/dist/es/types/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckoutContainer } from "./components/CheckoutContainer";
+export { createClient } from "./lib/client";

package/dist/es/types/lib/client.d.ts

@@ -0,0 +1,30 @@
+export type CheckoutPayload = {
+    orderID: String;
+    returnUrl: String;
+    items: CheckoutItem[];
+    amount: NonNullable<CheckoutAmount>;
+    paymentMethod: object;
+};
+export type CheckoutAmount = {
+    currency: NonNullable<string>;
+    price: NonNullable<number>;
+};
+export type CheckoutItem = {
+    productID: NonNullable<string | number>;
+    productName: NonNullable<string>;
+    quantity: NonNullable<number>;
+    price: NonNullable<number>;
+};
+export declare function createClient({ apiKey, env }: any): KoomiPayClient;
+export declare class KoomiPayClient {
+    apiKey: string;
+    env: string;
+    config: any;
+    constructor(opts: any);
+    setConfig(opts: any): void;
+    getConfig(): any;
+    getApiKey(): string;
+    getEnv(): string;
+    checkout(payload: CheckoutPayload, opts?: any): Promise<import("axios").AxiosResponse<any, any>>;
+    instantCheckout(payload: CheckoutPayload, opts?: any): Promise<import("axios").AxiosResponse<any, any>>;
+}

package/dist/es/types/utils/format.d.ts

@@ -0,0 +1,2 @@
+export declare function classNames(classNameHash: object): string;
+export declare function classNameObject(classNameString: string): {};

package/package.json

@@ -9,20 +9,13 @@
     "payments",
     "components"
   ],
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Koomipay react components",
-  "main": "dist/index.js",
-  "types": "dist/types",
-  "typings": "dist/types",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "types": "dist/cjs/types",
+  "typings": "dist/es/types",
   "license": "MIT",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    },
-    "./dist/koomipay.css": "./dist/koomipay.css",
-    "./package.json": "./package.json"
-  },
   "files": [
     "dist",
     "README",
@@ -33,14 +26,18 @@
     "clean": "rm -rf ./dist/*",
     "dev": "npm run clean && concurrently \"npm run dev:build-ts\" \"npm run dev:build-css\"",
     "dev:build-css": "tailwind -i ./src/global.css -o ./dist/koomipay.css --postcss ./postcss.config.js",
-    "dev:build-ts": "tsc && tsc-alias",
+    "dev:build-ts": "rollup -c",
     "prod:build-css": "tailwind -i ./src/global.css -o ./dist/koomipay.css --postcss ./postcss.config.js --minify",
-    "prod:build-ts": "tsc && tsc-alias",
+    "prod:build-ts": "ENV=production rollup -c && npm run minify",
+    "minify": "concurrently \"npm run minify:cjs\" \"npm run minify:es\"",
+    "minify:cjs": "uglifyjs --compress --mangle -o dist/cjs/index.js -- dist/cjs/index.js",
+    "minify:es": "uglifyjs --compress --mangle -o dist/es/index.js -- dist/es/index.js",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Novitee Team",
   "devDependencies": {
+    "@rollup/plugin-typescript": "^10.0.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.3",
@@ -55,10 +52,11 @@
     "debug": "^4.3.4",
     "postcss": "^8.4.19",
     "postcss-import": "^15.0.0",
+    "rollup": "^3.5.1",
     "tailwindcss": "^3.2.4",
-    "tsc-alias": "^1.8.1",
     "tsconfig-paths": "^4.1.1",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "uglify-js": "^3.17.4"
   },
   "dependencies": {
     "@adyen/adyen-web": "^5.29.0",

package/dist/components/CheckoutContainer.js

@@ -1,249 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckoutContainer = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var axios_1 = tslib_1.__importDefault(require("axios"));
-var adyen_web_1 = tslib_1.__importDefault(require("@adyen/adyen-web"));
-var format_1 = require("../utils/format");
-var Label_1 = tslib_1.__importDefault(require("./Label"));
-function resolveLogoUrl(url, config) {
-    return "".concat(config.assetHost, "/").concat(url);
-}
-function CheckoutCardLogo(_a) {
-    var active = _a.active, logoUrl = _a.logoUrl, client = _a.client;
-    var config = client.getConfig();
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, format_1.classNames)({
-            "h-10": true,
-            "grayscale opacity-30": !active,
-        }) }, { children: (0, jsx_runtime_1.jsx)("img", { className: "object-contain w-full h-full", src: resolveLogoUrl(logoUrl, config) }) })));
-}
-function CheckoutInputField(_a) {
-    var field = _a.field, focus = _a.focus, valids = _a.valids, errors = _a.errors;
-    var fieldError = !!errors && errors[field];
-    var valid = !!valids && valids[field];
-    var filled = fieldError != null;
-    var errorMessage = !!filled && fieldError.errorMessage;
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "relative mb-4" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, format_1.classNames)({
-                    "h-12 border px-3 py-1.5 rounded-md overflow-hidden": true,
-                    "border-gray-200": !focus && !filled,
-                    "bg-green-50 border-green-700": !!valid,
-                    "bg-red-50 border-red-500": !focus && !!filled && !valid,
-                    "bg-blue-50 border-blue-500 ring-2 ring-blue-200": !!focus,
-                }), "data-cse": field }), !!valid && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "absolute top-0 bottom-0 flex items-center text-green-700 right-3" }, { children: (0, jsx_runtime_1.jsxs)("svg", tslib_1.__assign({ className: "w-6 h-6", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" })] })) }))), !!errorMessage && (0, jsx_runtime_1.jsx)("p", tslib_1.__assign({ className: "mt-1.5 text-red-500 text-sm leading-tight" }, { children: errorMessage }))] })));
-}
-function GrabPayComponent(_a) {
-    var active = _a.active, paymentMethod = _a.paymentMethod, onValid = _a.onValid, onChange = _a.onChange;
-    (0, react_1.useEffect)(function () {
-        if (!!active) {
-            if (typeof onChange === "function") {
-                onChange({
-                    type: paymentMethod.type,
-                });
-            }
-            if (typeof onValid === "function") {
-                onValid(true);
-            }
-        }
-    }, [active]);
-    if (!active) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)("div", { children: "After checkout, You will be redirected to payment page to complete this payment." });
-}
-function CardComponent(_a) {
-    var client = _a.client, active = _a.active, type = _a.type, brands = _a.brands, onValid = _a.onValid, onChange = _a.onChange;
-    var cardContainerRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
-    var _c = (0, react_1.useState)({}), paymentData = _c[0], setPaymentData = _c[1];
-    var _d = (0, react_1.useState)(null), inputFocus = _d[0], setInputFocus = _d[1];
-    var _e = (0, react_1.useState)([]), activeCards = _e[0], setActiveCards = _e[1];
-    var _f = (0, react_1.useState)({}), errors = _f[0], setErrors = _f[1];
-    var _g = (0, react_1.useState)({}), validFields = _g[0], setValidFields = _g[1];
-    (0, react_1.useEffect)(function () {
-        if (!!active) {
-            onValid(false);
-            setLoading(true);
-            setPaymentData({});
-            setInputFocus(null);
-            setActiveCards([]);
-            setErrors({});
-            setValidFields({});
-            handleCreateCheckout({ type: type });
-        }
-    }, [active, type]);
-    (0, react_1.useEffect)(function () {
-        if (!!paymentData && typeof onValid === "function") {
-            var isValid = !!paymentData.encryptedCardNumber &&
-                !!paymentData.encryptedExpiryMonth &&
-                !!paymentData.encryptedExpiryYear &&
-                !!paymentData.encryptedSecurityCode;
-            onValid(isValid);
-            onChange({
-                type: paymentData.type,
-                brand: paymentData.brand,
-                encryptedCardNumber: paymentData.encryptedCardNumber,
-                encryptedExpiryMonth: paymentData.encryptedExpiryMonth,
-                encryptedExpiryYear: paymentData.encryptedExpiryYear,
-                encryptedSecurityCode: paymentData.encryptedSecurityCode,
-                cardholder: paymentData.cardholder,
-            });
-            // onChange(paymentData)
-        }
-    }, [paymentData]);
-    function handleOnChange(state) {
-        var _a = state || {}, data = _a.data, valid = _a.valid, errors = _a.errors;
-        setPaymentData((!!data && data.paymentMethod) || {});
-        setValidFields(Object.assign(tslib_1.__assign(tslib_1.__assign({}, (valid || {})), { encryptedExpiryDate: valid.encryptedExpiryMonth && valid.encryptedExpiryYear })));
-        setErrors(errors || {});
-    }
-    var clientConfig = client.getConfig();
-    var configuration = {
-        locale: "en_US",
-        environment: clientConfig.clientEnv,
-        clientKey: clientConfig.clientKey,
-        analytics: {
-            enabled: false,
-        },
-        onChange: handleOnChange,
-    };
-    function handleCreateCheckout(opts) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var checkout, e_1;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, (0, adyen_web_1.default)(configuration)];
-                    case 1:
-                        checkout = _a.sent();
-                        if (!!cardContainerRef.current) {
-                            checkout
-                                .create("securedfields", {
-                                type: type,
-                                brands: brands,
-                                styles: {
-                                    error: {
-                                        color: "red",
-                                    },
-                                    validated: {
-                                        color: "green",
-                                    },
-                                    placeholder: {
-                                        color: "#d8d8d8",
-                                    },
-                                },
-                                onLoad: function () {
-                                    setLoading(true);
-                                },
-                                onConfigSuccess: function () {
-                                    setLoading(false);
-                                },
-                                onFocus: function (data) {
-                                    var _a = data || {}, focus = _a.focus, fieldType = _a.fieldType;
-                                    if (!!focus) {
-                                        setInputFocus(fieldType);
-                                    }
-                                    else {
-                                        setInputFocus(null);
-                                    }
-                                },
-                                onBinLookup: function (data) {
-                                    var detectedBrands = (data || {}).detectedBrands;
-                                    setActiveCards(detectedBrands || []);
-                                },
-                            })
-                                .mount(cardContainerRef.current);
-                        }
-                        return [3 /*break*/, 3];
-                    case 2:
-                        e_1 = _a.sent();
-                        if (process.env.NODE_ENV === "development") {
-                            console.log("[ERROR] Handle create checkout error: ", e_1);
-                        }
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        });
-    }
-    if (!active) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, format_1.classNames)({
-            "relative transition-all": true,
-            "h-96 max-h-96": !!loading,
-            "h-auto max-h-120": !loading,
-        }) }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "flex my-3 space-x-3" }, { children: [(0, jsx_runtime_1.jsx)(CheckoutCardLogo, { active: activeCards.includes("visa"), logoUrl: "logo/visa.svg", client: client }), (0, jsx_runtime_1.jsx)(CheckoutCardLogo, { active: activeCards.includes("mc"), logoUrl: "logo/mastercard.svg", client: client }), (0, jsx_runtime_1.jsx)(CheckoutCardLogo, { active: activeCards.includes("amex"), logoUrl: "logo/american-express.svg", client: client })] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ ref: cardContainerRef, className: (0, format_1.classNames)({
-                    "opacity-0": !!loading,
-                }) }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Label_1.default, tslib_1.__assign({ htmlFor: "cardNumber" }, { children: "Card number" })), (0, jsx_runtime_1.jsx)(CheckoutInputField, { field: "encryptedCardNumber", focus: inputFocus === "encryptedCardNumber", valids: validFields, errors: errors })] }), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "grid grid-cols-2 gap-6" }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Label_1.default, tslib_1.__assign({ htmlFor: "expiryDate" }, { children: "Expiry date" })), (0, jsx_runtime_1.jsx)(CheckoutInputField, { field: "encryptedExpiryDate", focus: inputFocus === "encryptedExpiryDate", valids: validFields, errors: errors })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Label_1.default, tslib_1.__assign({ htmlFor: "securityCode" }, { children: "Security Code (CVV/CVC)" })), (0, jsx_runtime_1.jsx)(CheckoutInputField, { field: "encryptedSecurityCode", focus: inputFocus === "encryptedSecurityCode", valids: validFields, errors: errors })] })] }))] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, format_1.classNames)({
-                    "absolute inset-0 flex flex-col gap-3 items-center justify-center": true,
-                    "opacity-0 pointer-events-none": !loading,
-                }) }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "w-16 h-16" }, { children: (0, jsx_runtime_1.jsxs)("svg", tslib_1.__assign({ className: "w-full h-full animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, { children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })) })), (0, jsx_runtime_1.jsx)("p", { children: "Loading" })] }))] })));
-}
-function CheckoutPaymentMethod(_a) {
-    var active = _a.active, children = _a.children, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, format_1.classNames)({
-            "border px-3 py-2 mb-2 rounded-md cursor-pointer": true,
-            "bg-primary-500 text-white border-primary-500": !!active,
-            "text-gray-300 border-gray-300": !active,
-        }), onClick: onClick }, { children: children })));
-}
-function CheckoutContainer(_a) {
-    var client = _a.client, amount = _a.amount, onValid = _a.onValid, onChange = _a.onChange;
-    var apiKey = client.getApiKey();
-    var _b = (0, react_1.useState)(true), loadingPaymentMethod = _b[0], setLoadingPaymentMethod = _b[1];
-    var _c = (0, react_1.useState)([]), paymentMethods = _c[0], setPaymentMethods = _c[1];
-    var _d = (0, react_1.useState)(null), currentPaymentMethod = _d[0], setPaymentMethod = _d[1];
-    (0, react_1.useEffect)(function () {
-        if (!!apiKey) {
-            handleGeneratePaymentMethods(apiKey);
-        }
-        else {
-            setLoadingPaymentMethod(false);
-        }
-    }, [apiKey]);
-    function handleGeneratePaymentMethods(apiKey) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var response;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, axios_1.default.post("".concat(client.getConfig().baseApiUri, "/koomipay/payment-methods"), {
-                            amount: {
-                                currency: amount.currency,
-                                price: amount.price,
-                            },
-                        }, {
-                            headers: {
-                                "X-API-KEY": apiKey,
-                            },
-                        })];
-                    case 1:
-                        response = _a.sent();
-                        if (!!response && response.data && response.data.success) {
-                            setPaymentMethods(response.data.paymentMethods);
-                            setPaymentMethod(!!response.data.paymentMethods && response.data.paymentMethods[0]);
-                            setLoadingPaymentMethod(false);
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
-    function handleChangePaymentMethod(updatedPaymentMethod) {
-        if ((currentPaymentMethod || {}).type !== (updatedPaymentMethod || {}).type) {
-            setPaymentMethod(updatedPaymentMethod);
-        }
-    }
-    if (!!loadingPaymentMethod) {
-        return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, format_1.classNames)({
-                "mx-auto w-64 h-64 inset-0 flex flex-col gap-3 items-center justify-center": true,
-                "opacity-0 pointer-events-none": !loadingPaymentMethod,
-            }) }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "w-16 h-16" }, { children: (0, jsx_runtime_1.jsxs)("svg", tslib_1.__assign({ className: "w-full h-full animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, { children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })) })), (0, jsx_runtime_1.jsx)("p", { children: "Loading" })] })));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(paymentMethods || []).map(function (paymentMethod) { return ((0, jsx_runtime_1.jsx)(CheckoutPaymentMethod, tslib_1.__assign({ active: (currentPaymentMethod || {}).type === paymentMethod.type, onClick: function () { return handleChangePaymentMethod(paymentMethod); } }, { children: paymentMethod.name }), paymentMethod.type)); }), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, format_1.classNames)({
-                    "border-t border-gray-200 mt-6 py-3": true,
-                }) }, { children: [(0, jsx_runtime_1.jsx)(CardComponent, { client: client, active: !!currentPaymentMethod && currentPaymentMethod.type === "scheme", type: "card", brands: ["mc", "visa", "amex"], onValid: onValid, onChange: onChange }), (0, jsx_runtime_1.jsx)(GrabPayComponent, { active: !!currentPaymentMethod && currentPaymentMethod.type.includes("grabpay"), paymentMethod: currentPaymentMethod, onValid: onValid, onChange: onChange })] }))] }));
-}
-exports.CheckoutContainer = CheckoutContainer;

package/dist/components/Label.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var format_1 = require("../utils/format");
-function Label(_a) {
-    var className = _a.className, error = _a.error, htmlFor = _a.htmlFor, info = _a.info, mandatory = _a.mandatory, children = _a.children;
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "flex items-center justify-between" }, { children: [(0, jsx_runtime_1.jsxs)("label", tslib_1.__assign({ htmlFor: htmlFor, className: (0, format_1.classNames)(tslib_1.__assign(tslib_1.__assign({}, (0, format_1.classNameObject)(className)), { "block text-base font-medium mb-1.5": true, "text-gray-900 dark:text-white": !error, "text-red-600 dark:text-red-500": !!error })) }, { children: [children, mandatory && (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "ml-1 text-red-500" }, { children: "*" }))] })), info && (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "text-sm leading-5 text-gray-500 dark:text-gray-500 ".concat(error && "text-red-600") }, { children: info }))] })));
-}
-exports.default = Label;
-Label.defaultProps = {
-    error: false,
-};

package/dist/config/index.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConfig = void 0;
-var environments = ["dev", "test", "live"];
-var configuration = {
-    "dev": {
-        "baseApiUri": "http://localhost:32022",
-        "assetHost": "http://localhost:3000",
-        "clientEnv": "TEST",
-        "clientKey": "test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG",
-    },
-    "test": {
-        "baseApiUri": "https://api-pay-demo.koomi.app",
-        "assetHost": "https://pay-demo.koomi.app",
-        "clientEnv": "TEST",
-        "clientKey": "test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG",
-    },
-    "live": {
-        "baseApiUri": "https://api-pay-demo.koomi.app",
-        "assetHost": "https://pay-demo.koomi.app",
-        "clientEnv": "TEST",
-        "clientKey": "test_6FPMOVL2VVGJ7PASYRZDHX2AHAM6D5SG",
-    }
-};
-function getConfig(env) {
-    if (!env) {
-        throw new Error("getConfig(env) expected env as string, but got \"".concat(env, "\""));
-    }
-    if (!environments.includes(env)) {
-        throw new Error("env must be one of ".concat(environments.join(", ")));
-    }
-    return configuration[env];
-}
-exports.getConfig = getConfig;

package/dist/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createClient = exports.CheckoutContainer = void 0;
-var CheckoutContainer_1 = require("./components/CheckoutContainer");
-Object.defineProperty(exports, "CheckoutContainer", { enumerable: true, get: function () { return CheckoutContainer_1.CheckoutContainer; } });
-var client_1 = require("./lib/client");
-Object.defineProperty(exports, "createClient", { enumerable: true, get: function () { return client_1.createClient; } });

package/dist/lib/client.js

@@ -1,98 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoomiPayClient = exports.createClient = void 0;
-var tslib_1 = require("tslib");
-var config_1 = require("../config");
-var axios_1 = tslib_1.__importDefault(require("axios"));
-function createClient(_a) {
-    var apiKey = _a.apiKey, env = _a.env;
-    return new KoomiPayClient({ apiKey: apiKey, env: env });
-}
-exports.createClient = createClient;
-var KoomiPayClient = /** @class */ (function () {
-    function KoomiPayClient(opts) {
-        this.apiKey = opts.apiKey;
-        this.env = opts.env;
-        this.config = (0, config_1.getConfig)(opts.env);
-    }
-    KoomiPayClient.prototype.setConfig = function (opts) {
-        if ("apiKey" in opts) {
-            this.apiKey = opts.apiKey;
-        }
-        if ("env" in opts) {
-            this.env = opts.env;
-            this.config = (0, config_1.getConfig)(opts.env);
-        }
-    };
-    KoomiPayClient.prototype.getConfig = function () {
-        return this.config;
-    };
-    KoomiPayClient.prototype.getApiKey = function () {
-        return this.apiKey;
-    };
-    KoomiPayClient.prototype.getEnv = function () {
-        return this.env;
-    };
-    KoomiPayClient.prototype.checkout = function (payload, opts) {
-        if (opts === void 0) { opts = {}; }
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var response, error_1;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!!opts) {
-                            this.setConfig(opts);
-                        }
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, axios_1.default.post("".concat(this.config.baseApiUri, "/koomipay/checkout"), payload, {
-                                headers: {
-                                    "X-API-KEY": this.apiKey,
-                                },
-                            })];
-                    case 2:
-                        response = _a.sent();
-                        return [2 /*return*/, response];
-                    case 3:
-                        error_1 = _a.sent();
-                        console.log("[DEBUG] Checkout error", error_1);
-                        throw new Error("Error when checkout, please check your payload");
-                    case 4: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    KoomiPayClient.prototype.instantCheckout = function (payload, opts) {
-        if (opts === void 0) { opts = {}; }
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var response, error_2;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!!opts) {
-                            this.setConfig(opts);
-                        }
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, axios_1.default.post("".concat(this.config.baseApiUri, "/koomipay/instant-checkout"), payload, {
-                                headers: {
-                                    "X-API-KEY": this.apiKey,
-                                },
-                            })];
-                    case 2:
-                        response = _a.sent();
-                        return [2 /*return*/, response];
-                    case 3:
-                        error_2 = _a.sent();
-                        console.log("[DEBUG] Instant Checkout error", error_2);
-                        throw new Error("Error when checkout, please check your payload");
-                    case 4: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    return KoomiPayClient;
-}());
-exports.KoomiPayClient = KoomiPayClient;

package/dist/types/index.d.ts

@@ -1,2 +0,0 @@
-export { CheckoutContainer } from "../components/CheckoutContainer";
-export { createClient } from "../lib/client";

package/dist/utils/format.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.classNameObject = exports.classNames = void 0;
-var tslib_1 = require("tslib");
-function classNames(classNameHash) {
-    return Object.entries(classNameHash)
-        .map(function (pair, i) { return (pair[1] ? pair[0] : null); })
-        .filter(function (x) { return x; })
-        .join(' ');
-}
-exports.classNames = classNames;
-function classNameObject(classNameString) {
-    if (!classNameString)
-        return {};
-    return classNameString.split(" ").reduce(function (prev, className) {
-        var _a;
-        return (tslib_1.__assign(tslib_1.__assign({}, prev), (_a = {}, _a[className] = true, _a)));
-    }, {});
-}
-exports.classNameObject = classNameObject;