From 8c9b8ce0439c70acee558006e99efe1f68c9b593 Mon Sep 17 00:00:00 2001 From: Aashish Gurung <101558497+aashishgurung@users.noreply.github.com> Date: Mon, 27 May 2024 14:44:21 +0700 Subject: [PATCH] Integrate installment payment with WC blocks (#455) * Integrated installment with WC blocks. * Set terms to null if bank is changed. * removed commented if statement --------- Co-authored-by: Aashish --- assets/css/omise-css.css | 4 + .../js/build/omise_installment.asset.php | 1 + .../assets/js/build/omise_installment.js | 1 + .../blocks/assets/js/omise-installment.js | 120 ++++++++++++++++++ .../gateways/omise-block-installment.php | 87 +++++++++++++ includes/blocks/omise-block-payments.php | 1 + .../class-omise-payment-installment.php | 28 ++-- omise-woocommerce.php | 1 + .../class-omise-payment-installment-test.php | 4 +- webpack.config.js | 1 + 10 files changed, 235 insertions(+), 13 deletions(-) create mode 100644 includes/blocks/assets/js/build/omise_installment.asset.php create mode 100644 includes/blocks/assets/js/build/omise_installment.js create mode 100644 includes/blocks/assets/js/omise-installment.js create mode 100644 includes/blocks/gateways/omise-block-installment.php diff --git a/assets/css/omise-css.css b/assets/css/omise-css.css index 9688cdb1..d951fc5a 100644 --- a/assets/css/omise-css.css +++ b/assets/css/omise-css.css @@ -192,6 +192,7 @@ fieldset.card-exists, * 2.3). Form, bank list components */ ul.omise-banks-list { + list-style-type: none; margin: 0; } @@ -284,6 +285,7 @@ ul.omise-banks-list { /** Media Quries **/ @media all and (min-width: 375px) { ul.omise-banks-list { + list-style-type: none; margin: 0 0 0 1.75em; } @@ -303,6 +305,7 @@ ul.omise-banks-list { @media all and (min-width: 768px) { ul.omise-banks-list { + list-style-type: none; margin: 0; } @@ -319,6 +322,7 @@ ul.omise-banks-list { @media all and (min-width: 1024px) { ul.omise-banks-list { + list-style-type: none; margin: 0 0 0 1.75em; } diff --git a/includes/blocks/assets/js/build/omise_installment.asset.php b/includes/blocks/assets/js/build/omise_installment.asset.php new file mode 100644 index 00000000..504b1e4c --- /dev/null +++ b/includes/blocks/assets/js/build/omise_installment.asset.php @@ -0,0 +1 @@ + array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '9dc70441197f527b0184197ad3d95e93'); \ No newline at end of file diff --git a/includes/blocks/assets/js/build/omise_installment.js b/includes/blocks/assets/js/build/omise_installment.js new file mode 100644 index 00000000..20ad28c2 --- /dev/null +++ b/includes/blocks/assets/js/build/omise_installment.js @@ -0,0 +1 @@ +(()=>{"use strict";const e=window.React,t=window.wp.element,n=window.wp.i18n,a=window.wp.htmlEntities,l=window.wc.wcBlocksRegistry,r=(0,window.wc.wcSettings.getSetting)("omise_installment_data",{}),s=(0,a.decodeEntities)(r.title)||"No title set",m=l=>{const{eventRegistration:s,emitResponse:m}=l,{onPaymentSetup:i}=s,c=(0,a.decodeEntities)(r.description||""),{installment_backends:o,is_zero_interest:u}=r.data,p=(0,n.__)("Purchase Amount is lower than the monthly minimum payment amount.","omise"),_=(0,t.useRef)(null),d=(0,t.useRef)(null),E=e=>{_.current=e.target.value,d.current=null},y=e=>{d.current=e.target.value};return(0,t.useEffect)((()=>{const e=i((async()=>{if(!_.current||!d.current)return{type:m.responseTypes.ERROR,message:"Select a bank and term"};try{return{type:m.responseTypes.SUCCESS,meta:{paymentMethodData:{source:_.current,[`${_.current}_installment_terms`]:d.current}}}}catch(e){return{type:m.responseTypes.ERROR,message:e.message}}}));return()=>e()}),[i]),(0,e.createElement)(e.Fragment,null,c&&(0,e.createElement)("p",null,c),0==o.length?(0,e.createElement)("p",null,p):(0,e.createElement)("fieldset",{id:"omise-form-installment"},(0,e.createElement)("ul",{className:"omise-banks-list"},o.map(((t,a)=>(0,e.createElement)("li",{key:t._id+a,className:"item"},(0,e.createElement)("input",{id:t._id,type:"radio",name:"source[type]",value:t._id,onChange:E}),(0,e.createElement)("label",{htmlFor:t._id},(0,e.createElement)("div",{className:`bank-logo ${t.provider_code}`}),(0,e.createElement)("div",{className:"bank-label"},(0,e.createElement)("span",{className:"title"},t.provider_name),(0,e.createElement)("br",null),(0,e.createElement)("select",{id:`${t._id}_installment_terms`,name:`${t._id}_installment_terms`,className:"installment-term-select-box",onChange:y},(0,e.createElement)("option",null,"Select term"),t.available_plans.map(((t,a)=>(0,e.createElement)("option",{key:`${t.term_length}_${t.monthly_amount}_${a}`,value:t.term_length},(0,n.__)(`${t.term_length} months`,"omise"),(0,e.createElement)(e.Fragment,null," "),"(",(0,n.__)(`${t.monthly_amount} / months`,"omise"),")")))),u&&(0,e.createElement)(e.Fragment,null,(0,e.createElement)("br",null),(0,e.createElement)("span",{className:"omise-installment-interest-rate"},(0,n.__)(`( interest ${t.interest_rate} )`,"omise")))))))))))};(0,l.registerPaymentMethod)({name:r.name,label:(0,e.createElement)((t=>{const{PaymentMethodLabel:n}=t.components;return(0,e.createElement)(n,{text:s})}),null),content:(0,e.createElement)(m,null),edit:(0,e.createElement)(m,null),canMakePayment:()=>!0,ariaLabel:s,supports:{features:r.supports}})})(); \ No newline at end of file diff --git a/includes/blocks/assets/js/omise-installment.js b/includes/blocks/assets/js/omise-installment.js new file mode 100644 index 00000000..18be24c7 --- /dev/null +++ b/includes/blocks/assets/js/omise-installment.js @@ -0,0 +1,120 @@ +import {useEffect, useState, useRef} from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { decodeEntities } from '@wordpress/html-entities'; +import { registerPaymentMethod } from '@woocommerce/blocks-registry'; +import { getSetting } from '@woocommerce/settings'; + +const settings = getSetting( 'omise_installment_data', {} ) +const label = decodeEntities( settings.title ) || 'No title set' +const Label = ( props ) => { + const { PaymentMethodLabel } = props.components + return +} + +const InstallmentPaymentMethod = (props) => { + const {eventRegistration, emitResponse} = props; + const {onPaymentSetup} = eventRegistration; + const description = decodeEntities( settings.description || '' ) + const { installment_backends, is_zero_interest } = settings.data; + const noPaymentMethods = __( 'Purchase Amount is lower than the monthly minimum payment amount.', 'omise' ); + const installmentRef = useRef(null); + const termRef = useRef(null); + + const onInstallmentSelected = (e) => { + installmentRef.current = e.target.value + termRef.current = null + } + + const onTermsSelected = (e) => { + termRef.current = e.target.value + } + + useEffect(() => { + const unsubscribe = onPaymentSetup(async () => { + if (!installmentRef.current || !termRef.current) { + return {type: emitResponse.responseTypes.ERROR, message: 'Select a bank and term'} + } + try { + return { + type: emitResponse.responseTypes.SUCCESS, + meta: { + paymentMethodData: { + "source": installmentRef.current, + [`${installmentRef.current}_installment_terms`]: termRef.current, + } + } + }; + } catch (error) { + return {type: emitResponse.responseTypes.ERROR, message: error.message} + } + }); + return () => unsubscribe(); + }, [ onPaymentSetup ]); + + return (<> + {description &&

{description}

} + { + installment_backends.length == 0 + ?

{noPaymentMethods}

+ : ( +
+
    + { + installment_backends.map((backend, i) => ( +
  • + + +
    • + )) + } +
+
+ ) + } + ) +} + +registerPaymentMethod( { + name: settings.name, + label: