From b8df20abbb9d9e0e8680821f43bc2b38a3dfe68d Mon Sep 17 00:00:00 2001 From: Aashish Date: Tue, 6 Aug 2024 14:49:44 +0700 Subject: [PATCH] Adding embedded card JS in WC block separately. --- includes/blocks/assets/js/build/credit_card.asset.php | 2 +- includes/blocks/assets/js/build/credit_card.js | 2 +- includes/blocks/gateways/omise-block-credit-card.php | 8 ++++++++ .../blocks/gateways/omise-block-credit-card-test.php | 1 + 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/includes/blocks/assets/js/build/credit_card.asset.php b/includes/blocks/assets/js/build/credit_card.asset.php index 907b3884..3aaebb9a 100644 --- a/includes/blocks/assets/js/build/credit_card.asset.php +++ b/includes/blocks/assets/js/build/credit_card.asset.php @@ -1 +1 @@ - array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '5064f6bb58dd3352c00f30554738304a'); \ No newline at end of file + array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '9d9c940edd665b09cdd8e15ab6212835'); \ No newline at end of file diff --git a/includes/blocks/assets/js/build/credit_card.js b/includes/blocks/assets/js/build/credit_card.js index 05f84a55..62d7baa9 100644 --- a/includes/blocks/assets/js/build/credit_card.js +++ b/includes/blocks/assets/js/build/credit_card.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.React,t=window.wp.i18n,n=window.wc.wcBlocksRegistry,r=window.wp.htmlEntities,a=window.wc.wcSettings,s=window.wp.element,c=({onChange:n,existingCards:r})=>(0,e.createElement)(e.Fragment,null,(0,e.createElement)("h3",null,(0,t.__)("Use an existing card","omise")),(0,e.createElement)("ul",{className:"omise-customer-card-list"},r.map(((t,r)=>(0,e.createElement)("li",{key:t.id,className:"item"},(0,e.createElement)("input",{defaultChecked:0===r,id:`card-${t.id}`,type:"radio",name:"card_id",value:t.id,onChange:n}),(0,e.createElement)("label",{htmlFor:`card-${t.id}`},(0,e.createElement)("strong",null,t.brand)," xxxx ",t.last_digits))))),(0,e.createElement)("input",{id:"new_card_info",type:"radio",name:"card_id",value:"",onChange:n}),(0,e.createElement)("label",{id:"label-new_card_info",htmlFor:"new_card_info"},(0,e.createElement)("h3",null,(0,t.__)("Create a charge using new card","omise")))),l=t=>{const{settings:n}=t,{existing_cards:a,description:l}=n,i=(0,s.useRef)(null),o=(0,s.useRef)(!1),m=(0,s.useRef)(null),d=(0,s.useRef)(null),u=(0,s.useRef)(null),[p,_]=(0,s.useState)(a&&a.length>0),{eventRegistration:g,emitResponse:E}=t,{onPaymentSetup:y,onCheckoutValidation:h}=g;return(0,s.useEffect)((()=>{var e;p||showOmiseEmbeddedCardForm({element:i.current,publicKey:n.public_key,hideRememberCard:!n.user_logged_in,locale:n.lcoale,theme:null!==(e=n.card_form_theme)&&void 0!==e?e:"light",design:n.form_design,brandIcons:n.card_brand_icons,onSuccess:e=>{console.log("payload"),console.log(e),e.remember&&(o.current=e.remember),m.current=e.token},onError:e=>{u.current=e}})}),[p]),(0,s.useEffect)((()=>{if(!p)return h((()=>(OmiseCard.requestCardToken(),!0)))}),[h,p]),(0,s.useEffect)((()=>{const e=y((async()=>await new Promise(((e,t)=>{const n=setInterval((()=>{if(d.current&&""!==d.current.value){clearInterval(n);try{const t={type:E.responseTypes.SUCCESS,meta:{paymentMethodData:{card_id:d.current.value}}};e(t)}catch(e){const n={type:E.responseTypes.ERROR,message:e.message};t(n)}}else if(m.current&&""!==m.current.value){clearInterval(n);try{const t={type:E.responseTypes.SUCCESS,meta:{paymentMethodData:{omise_save_customer_card:o.current,omise_token:m.current}}};e(t)}catch(e){const n={type:E.responseTypes.ERROR,message:e.message};t(n)}}else if(u.current){clearInterval(n);const e={type:E.responseTypes.ERROR,message:u.current};t(e)}}),1e3)}))));return()=>e()}),[E.responseTypes.ERROR,E.responseTypes.SUCCESS,y]),(0,e.createElement)(e.Fragment,null,a&&a.length>0&&(0,e.createElement)(c,{existingCards:a,onChange:e=>{const t=e.target;_(""!==t.value),d.current=t}}),!p&&(0,e.createElement)("p",null,(0,r.decodeEntities)(l||"")),(0,e.createElement)("div",{ref:i,id:"omise-card",style:{width:"100%",display:p?"none":"block"}}),!p&&(0,e.createElement)(e.Fragment,null,(0,e.createElement)("input",{type:"hidden",name:"omise_save_customer_card",id:"omise_save_customer_card"}),(0,e.createElement)("input",{type:"hidden",className:"omise_token",name:"omise_token"})))},i=(0,a.getSetting)("omise_data",{}),o=(0,t.__)("Credit/Debit card","omise"),m=(0,r.decodeEntities)(i.title)||o;window.OMISE_CUSTOM_FONT_OTHER="Other";const d=t=>(0,e.createElement)(l,{...t,settings:i});(0,n.registerPaymentMethod)({name:i.name||"",label:(0,e.createElement)((t=>{const{PaymentMethodLabel:n}=t.components;return(0,e.createElement)(n,{text:m})}),null),content:(0,e.createElement)(d,{settings:i}),edit:(0,e.createElement)(d,{settings:i}),canMakePayment:()=>i.is_active,ariaLabel:m,supports:{features:i.supports}})})(); \ No newline at end of file +(()=>{"use strict";const e=window.React,t=window.wp.i18n,n=window.wc.wcBlocksRegistry,r=window.wp.htmlEntities,a=window.wc.wcSettings,s=window.wp.element,c=({onChange:n,existingCards:r})=>(0,e.createElement)(e.Fragment,null,(0,e.createElement)("h3",null,(0,t.__)("Use an existing card","omise")),(0,e.createElement)("ul",{className:"omise-customer-card-list"},r.map(((t,r)=>(0,e.createElement)("li",{key:t.id,className:"item"},(0,e.createElement)("input",{defaultChecked:0===r,id:`card-${t.id}`,type:"radio",name:"card_id",value:t.id,onChange:n}),(0,e.createElement)("label",{htmlFor:`card-${t.id}`},(0,e.createElement)("strong",null,t.brand)," xxxx ",t.last_digits))))),(0,e.createElement)("input",{id:"new_card_info",type:"radio",name:"card_id",value:"",onChange:n}),(0,e.createElement)("label",{id:"label-new_card_info",htmlFor:"new_card_info"},(0,e.createElement)("h3",null,(0,t.__)("Create a charge using new card","omise")))),i=t=>{const{settings:n}=t,{existing_cards:a,description:i}=n,l=(0,s.useRef)(null),o=(0,s.useRef)(!1),m=(0,s.useRef)(null),d=(0,s.useRef)(null),u=(0,s.useRef)(null),[p,_]=(0,s.useState)(a&&a.length>0),{eventRegistration:E,emitResponse:g}=t,{onPaymentSetup:y,onCheckoutValidation:h}=E;return(0,s.useEffect)((()=>{var e;p||showOmiseEmbeddedCardForm({element:l.current,publicKey:n.public_key,hideRememberCard:!n.user_logged_in,locale:n.lcoale,theme:null!==(e=n.card_form_theme)&&void 0!==e?e:"light",design:n.form_design,brandIcons:n.card_brand_icons,onSuccess:e=>{e.remember&&(o.current=e.remember),m.current=e.token},onError:e=>{u.current=e}})}),[p]),(0,s.useEffect)((()=>{if(!p)return h((()=>(OmiseCard.requestCardToken(),!0)))}),[h,p]),(0,s.useEffect)((()=>{const e=y((async()=>await new Promise(((e,t)=>{const n=setInterval((()=>{if(d.current&&""!==d.current.value){clearInterval(n);try{const t={type:g.responseTypes.SUCCESS,meta:{paymentMethodData:{card_id:d.current.value}}};e(t)}catch(e){const n={type:g.responseTypes.ERROR,message:e.message};t(n)}}else if(m.current&&""!==m.current.value){clearInterval(n);try{const t={type:g.responseTypes.SUCCESS,meta:{paymentMethodData:{omise_save_customer_card:o.current,omise_token:m.current}}};e(t)}catch(e){const n={type:g.responseTypes.ERROR,message:e.message};t(n)}}else if(u.current){clearInterval(n);const e={type:g.responseTypes.ERROR,message:u.current};t(e)}}),1e3)}))));return()=>e()}),[g.responseTypes.ERROR,g.responseTypes.SUCCESS,y]),(0,e.createElement)(e.Fragment,null,a&&a.length>0&&(0,e.createElement)(c,{existingCards:a,onChange:e=>{const t=e.target;_(""!==t.value),d.current=t}}),!p&&(0,e.createElement)("p",null,(0,r.decodeEntities)(i||"")),(0,e.createElement)("div",{ref:l,id:"omise-card",style:{width:"100%",display:p?"none":"block"}}),!p&&(0,e.createElement)(e.Fragment,null,(0,e.createElement)("input",{type:"hidden",name:"omise_save_customer_card",id:"omise_save_customer_card"}),(0,e.createElement)("input",{type:"hidden",className:"omise_token",name:"omise_token"})))},l=(0,a.getSetting)("omise_data",{}),o=(0,t.__)("Credit/Debit card","omise"),m=(0,r.decodeEntities)(l.title)||o;window.OMISE_CUSTOM_FONT_OTHER="Other";const d=t=>(0,e.createElement)(i,{...t,settings:l});(0,n.registerPaymentMethod)({name:l.name||"",label:(0,e.createElement)((t=>{const{PaymentMethodLabel:n}=t.components;return(0,e.createElement)(n,{text:m})}),null),content:(0,e.createElement)(d,{settings:l}),edit:(0,e.createElement)(d,{settings:l}),canMakePayment:()=>l.is_active,ariaLabel:m,supports:{features:l.supports}})})(); \ No newline at end of file diff --git a/includes/blocks/gateways/omise-block-credit-card.php b/includes/blocks/gateways/omise-block-credit-card.php index 92aa4096..2b8a5229 100644 --- a/includes/blocks/gateways/omise-block-credit-card.php +++ b/includes/blocks/gateways/omise-block-credit-card.php @@ -45,6 +45,14 @@ public function get_payment_method_script_handles() { $script_asset = require_once __DIR__ . '/../assets/js/build/credit_card.asset.php'; if (is_array($script_asset)) { + wp_register_script( + 'embedded-js', + plugins_url( '../../assets/javascripts/omise-embedded-card.js', __FILE__ ), + [], + OMISE_WOOCOMMERCE_PLUGIN_VERSION, + true + ); + wp_register_script( "{$this->name}-payments-blocks", plugin_dir_url( __DIR__ ) . 'assets/js/build/credit_card.js', diff --git a/tests/unit/includes/blocks/gateways/omise-block-credit-card-test.php b/tests/unit/includes/blocks/gateways/omise-block-credit-card-test.php index 8a9bf51f..985fbb90 100644 --- a/tests/unit/includes/blocks/gateways/omise-block-credit-card-test.php +++ b/tests/unit/includes/blocks/gateways/omise-block-credit-card-test.php @@ -90,6 +90,7 @@ public function get_payment_method_script_handles() Monkey\Functions\expect('wp_script_is'); Monkey\Functions\expect('wp_register_script'); Monkey\Functions\expect('plugin_dir_url'); + Monkey\Functions\expect('plugin_url'); Monkey\Functions\expect('is_checkout')->andReturn(true); Monkey\Functions\expect('wc_string_to_bool')->andReturn(null);