| 1 |
|
| 2 |
import { registerPaymentMethod, registerExpressPaymentMethod } from '@woocommerce/blocks-registry'; |
| 3 |
import { decodeEntities } from '@wordpress/html-entities'; |
| 4 |
import { getSetting } from '@woocommerce/settings'; |
| 5 |
import ExpressComponent from './ExpressComponent.jsx'; |
| 6 |
import { useFetch } from './Helpers.js'; |
| 7 |
|
| 8 |
|
| 9 |
let cache = {}; |
| 10 |
const settings = getSetting('hyperpay_blocks_data', {}); |
| 11 |
|
| 12 |
|
| 13 |
/** |
| 14 |
* Label component |
| 15 |
* |
| 16 |
* @param {*} props Props from payment API. |
| 17 |
*/ |
| 18 |
const Label = (props) => { |
| 19 |
|
| 20 |
const { PaymentMethodLabel, PaymentMethodIcons } = props.components; |
| 21 |
|
| 22 |
|
| 23 |
return <div style={{ display: 'flex', justifyContent: 'space-between', width: "100%", paddingRight: 5, paddingLeft: 5 }}> |
| 24 |
<PaymentMethodLabel text={decodeEntities(props.setting.title)} /> |
| 25 |
<PaymentMethodIcons icons={props.setting.icon.map((brand, index) => ({ id: props.setting.title + index, src: brand }))} /> |
| 26 |
</div> |
| 27 |
}; |
| 28 |
|
| 29 |
const Content = (props) => { |
| 30 |
const { PaymentMethodLabel } = props.components; |
| 31 |
|
| 32 |
return <> |
| 33 |
{props.setting.description && |
| 34 |
<div style={{ display: 'flex', justifyContent: 'space-between', width: "100%", paddingRight: 5, paddingLeft: 5 }}> |
| 35 |
<PaymentMethodLabel text={props.setting.description} /> |
| 36 |
</div> |
| 37 |
} |
| 38 |
</> |
| 39 |
}; |
| 40 |
|
| 41 |
|
| 42 |
|
| 43 |
const memoizedCanMakePayment = async (data, setting) => { |
| 44 |
let fetching = false |
| 45 |
let country = data.billingAddress.country |
| 46 |
let currency_code = data.cartTotals.currency_code |
| 47 |
let total_price = data.cartTotals.total_price |
| 48 |
|
| 49 |
let key = `${setting.name}_${country}_${currency_code}_${total_price}` |
| 50 |
|
| 51 |
if (key in cache) { |
| 52 |
return cache[key]; |
| 53 |
} else if (fetching) { |
| 54 |
return |
| 55 |
} else { |
| 56 |
fetching = true |
| 57 |
let res = await useFetch("hyperpay_can_make_payment&payment_method=" + setting.name) |
| 58 |
.post("",data) |
| 59 |
|
| 60 |
setting.description = res.data.description |
| 61 |
cache[key] = res.data.canMakePayment; |
| 62 |
return cache[key] |
| 63 |
|
| 64 |
} |
| 65 |
} |
| 66 |
|
| 67 |
|
| 68 |
settings.blocks?.forEach(setting => { |
| 69 |
let gateWay = { |
| 70 |
name: setting.name, |
| 71 |
label: <Label setting={setting} />, |
| 72 |
content: <Content setting={setting} />, |
| 73 |
edit: <div>{decodeEntities(setting.description)}</div>, |
| 74 |
canMakePayment: async (data) => { |
| 75 |
if (setting.isDynamicCheck) { |
| 76 |
return memoizedCanMakePayment(data, setting) |
| 77 |
} |
| 78 |
|
| 79 |
return true |
| 80 |
}, |
| 81 |
ariaLabel: decodeEntities(setting.title), |
| 82 |
supports: { |
| 83 |
features: setting.supports, |
| 84 |
}, |
| 85 |
}; |
| 86 |
|
| 87 |
registerPaymentMethod(gateWay); |
| 88 |
}) |
| 89 |
|
| 90 |
settings.express?.forEach(setting => { |
| 91 |
const gateWay = { |
| 92 |
name: setting.name, |
| 93 |
content: <ExpressComponent setting={setting} />, |
| 94 |
edit: <img style={{ maxHeight:50,maxWidth:238 }} src={setting.action_button}/>, |
| 95 |
canMakePayment: () => !!window.ApplePaySession, |
| 96 |
ariaLabel: decodeEntities(setting.title), |
| 97 |
paymentMethodId: setting.name, |
| 98 |
supports: { |
| 99 |
features: settings.supports, |
| 100 |
}, |
| 101 |
}; |
| 102 |
|
| 103 |
registerExpressPaymentMethod(gateWay); |
| 104 |
}) |
| 105 |
|
| 106 |
|
