Skip to content

Commit

Permalink
feat: Add support for the block editor form (Incomplete) #67
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuilhermeLinkNacional
GuilhermeLinkNacional committed Jun 25, 2024
1 parent d2dcb52 commit 685b5e3
Show file tree
Hide file tree
Showing 6 changed files with 301 additions and 36 deletions.
5 changes: 5 additions & 0 deletions includes/LknWCGatewayCieloDebit.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -620,6 +620,10 @@ class="lkn-cvv"
>

<div class="form-row form-row-wide">
<label
for="lkn_cc_installments"><?php esc_html_e('Installments', 'lkn-wc-gateway-cielo'); ?>
<span class="required">*</span>
</label>
<select
id="lkn_cc_installments"
name="lkn_cc_installments"
Expand Down Expand Up @@ -685,6 +689,7 @@ public function process_payment($order_id) {
'redirect' => '',
);
}
throw new Exception(json_encode($_POST));

$order = wc_get_order($order_id);

Expand Down
6 changes: 6 additions & 0 deletions includes/LknWcCieloDebitBlocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ public function get_payment_method_data() {
'accessToken' => $this->gateway->generate_debit_auth_token(),
'url' => get_page_link(),
'orderNumber' => uniqid(),
'activeInstallment' => $this->gateway->get_option('installment_payment'),
'installmentLimit' => $this->gateway->get_option('installment_limit', 12),
'dirScript3DS' => LKN_WC_GATEWAY_CIELO_URL . 'resources/js/debitCard/BP.Mpi.3ds20.min.js',
'dirScriptConfig3DS' => $dirScriptConfig3DS,
'totalCart' => $this->gateway->lknGetCartTotal(),
Expand All @@ -60,7 +62,11 @@ public function get_payment_method_data() {
'cardNumber' => __('Card Number', 'lkn-wc-gateway-cielo'),
'cardExpiryDate' => __('Expiry Date', 'lkn-wc-gateway-cielo'),
'securityCode' => __('Security Code', 'lkn-wc-gateway-cielo'),
'installments' => __('Installments', 'lkn-wc-gateway-cielo'),
'cardHolder' => __('Card Holder Name', 'lkn-wc-gateway-cielo'),
'creditCard' => __('Credit Card', 'lkn-wc-gateway-cielo'),
'debitCard' => __('Debit Card', 'lkn-wc-gateway-cielo'),
'cardType' => __('Card type', 'lkn-wc-gateway-cielo'),
)
);
}
Expand Down
159 changes: 135 additions & 24 deletions resources/js/debitCard/lknCieloDebit.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
const lknDCsettingsCielo = window.wc.wcSettings.getSetting('lkn_cielo_debit_data', {});
const lknDCLabelCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.title);
const lknDCAccessTokenCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.accessToken);
const lknDCActiveInstallmentCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.activeInstallment);
const lknDCUrlCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.url);
const lknDCTotalCartCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.totalCart);
const lknDCOrderNumberCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.orderNumber);
const lknDCDirScript3DSCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.dirScript3DS);
const lknDCInstallmentLimitCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.installmentLimit);
const lknDCDirScriptConfig3DSCielo = window.wp.htmlEntities.decodeEntities(lknDCsettingsCielo.dirScriptConfig3DS);
const lknDCTranslationsDebitCielo = lknDCsettingsCielo.translations;
const lknDCNonceCieloDebit = lknDCsettingsCielo.nonceCieloDebit;
const lknDCTranslationsCielo = lknDCsettingsCielo.translations;
const lknDCHideCheckoutButton = () => {
const lknDCElement = document.querySelectorAll('.wc-block-components-checkout-place-order-button');
if (lknDCElement && lknDCElement[0]) {
Expand Down Expand Up @@ -47,20 +50,68 @@ const lknDCContentCielo = props => {
const {
onPaymentSetup
} = eventRegistration;
const [options, setOptions] = window.wp.element.useState([]);
const [debitObject, setdebitObject] = window.wp.element.useState({
lkn_dc_cardholder_name: '',
lkn_dcno: '',
lkn_dc_expdate: '',
lkn_dc_cvc: ''
lkn_dc_cvc: '',
lkn_cc_installments: '1',
// Definir padrão como 1 parcela
lkn_cc_type: 'Credit'
});
const formatDebitCardNumber = value => {
if (value?.length > 24) return debitObject.lkn_dcno;
var _cleanedValue$replace;
if ((value === null || value === void 0 ? void 0 : value.length) > 24) return debitObject.lkn_dcno;
// Remove caracteres não numéricos
const cleanedValue = value?.replace(/\D/g, '');
const cleanedValue = value === null || value === void 0 ? void 0 : value.replace(/\D/g, '');
// Adiciona espaços a cada quatro dígitos
const formattedValue = cleanedValue?.replace(/(.{4})/g, '$1 ')?.trim();
const formattedValue = cleanedValue === null || cleanedValue === void 0 || (_cleanedValue$replace = cleanedValue.replace(/(.{4})/g, '$1 ')) === null || _cleanedValue$replace === void 0 ? void 0 : _cleanedValue$replace.trim();
return formattedValue;
};
const updateDebitObject = (key, value) => {
switch (key) {
case 'lkn_cc_cardholder_name':
// Atualiza o estado
setdebitObject({
...debitObject,
[key]: value
});
break;
case 'lkn_cc_expdate':
if (value.length > 7) return;

// Verifica se o valor é uma data válida (MM/YY)
const isValidDate = /^\d{2}\/\d{2}$/.test(value);
if (!isValidDate) {
var _cleanedValue$replace2;
// Remove caracteres não numéricos
const cleanedValue = value === null || value === void 0 ? void 0 : value.replace(/\D/g, '');
let formattedValue = cleanedValue === null || cleanedValue === void 0 || (_cleanedValue$replace2 = cleanedValue.replace(/^(.{2})/, '$1 / ')) === null || _cleanedValue$replace2 === void 0 ? void 0 : _cleanedValue$replace2.trim();

// Se o tamanho da string for 5, remove o espaço e a barra adicionados anteriormente
if (formattedValue.length === 4) {
formattedValue = formattedValue.replace(/\s\//, '');
}

// Atualiza o estado
setdebitObject({
...debitObject,
[key]: formattedValue
});
}
return;
case 'lkn_cc_cvc':
if (value.length > 8) return;
break;
default:
break;
}
setdebitObject({
...debitObject,
[key]: value
});
};
const updatedebitObject = (key, value) => {
switch (key) {
case 'lkn_dc_cardholder_name':
Expand All @@ -76,9 +127,10 @@ const lknDCContentCielo = props => {
// Verifica se o valor é uma data válida (MM/YY)
const isValidDate = /^\d{2}\/\d{2}$/.test(value);
if (!isValidDate) {
var _cleanedValue$replace3;
// Remove caracteres não numéricos
const cleanedValue = value?.replace(/\D/g, '');
let formattedValue = cleanedValue?.replace(/^(.{2})/, '$1 / ')?.trim();
const cleanedValue = value === null || value === void 0 ? void 0 : value.replace(/\D/g, '');
let formattedValue = cleanedValue === null || cleanedValue === void 0 || (_cleanedValue$replace3 = cleanedValue.replace(/^(.{2})/, '$1 / ')) === null || _cleanedValue$replace3 === void 0 ? void 0 : _cleanedValue$replace3.trim();

// Se o tamanho da string for 5, remove o espaço e a barra adicionados anteriormente
if (formattedValue.length === 4) {
Expand Down Expand Up @@ -126,41 +178,41 @@ const lknDCContentCielo = props => {
const cardHolder = document.getElementById('lkn_dc_cardholder_name');

// Remove classes de erro e mensagens de validação existentes
cardNumberInput?.classList.remove('has-error');
expDateInput?.classList.remove('has-error');
cvvInput?.classList.remove('has-error');
cardHolder?.classList.remove('has-error');
cardNumberInput === null || cardNumberInput === void 0 || cardNumberInput.classList.remove('has-error');
expDateInput === null || expDateInput === void 0 || expDateInput.classList.remove('has-error');
cvvInput === null || cvvInput === void 0 || cvvInput.classList.remove('has-error');
cardHolder === null || cardHolder === void 0 || cardHolder.classList.remove('has-error');
if (allFieldsFilled) {
lknDCProccessButton();
} else {
// Adiciona classes de erro aos campos vazios
if (debitObject.lkn_dc_cardholder_name.trim() === '') {
const parentDiv = cardHolder?.parentElement;
parentDiv?.classList.add('has-error');
const parentDiv = cardHolder === null || cardHolder === void 0 ? void 0 : cardHolder.parentElement;
parentDiv === null || parentDiv === void 0 || parentDiv.classList.add('has-error');
}
if (debitObject.lkn_dcno.trim() === '') {
const parentDiv = cardNumberInput?.parentElement;
parentDiv?.classList.add('has-error');
const parentDiv = cardNumberInput === null || cardNumberInput === void 0 ? void 0 : cardNumberInput.parentElement;
parentDiv === null || parentDiv === void 0 || parentDiv.classList.add('has-error');
}
if (debitObject.lkn_dc_expdate.trim() === '') {
const parentDiv = expDateInput?.parentElement;
parentDiv?.classList.add('has-error');
const parentDiv = expDateInput === null || expDateInput === void 0 ? void 0 : expDateInput.parentElement;
parentDiv === null || parentDiv === void 0 || parentDiv.classList.add('has-error');
}
if (debitObject.lkn_dc_cvc.trim() === '') {
const parentDiv = cvvInput?.parentElement;
parentDiv?.classList.add('has-error');
const parentDiv = cvvInput === null || cvvInput === void 0 ? void 0 : cvvInput.parentElement;
parentDiv === null || parentDiv === void 0 || parentDiv.classList.add('has-error');
}
}
};
window.wp.element.useEffect(() => {
lknDCInitCieloPaymentForm();
const unsubscribe = onPaymentSetup(async () => {
const Button3dsEnviar = document.querySelectorAll('.wc-block-components-checkout-place-order-button')[0].closest('form');
const paymentCavv = Button3dsEnviar?.getAttribute('data-payment-cavv');
const paymentEci = Button3dsEnviar?.getAttribute('data-payment-eci');
const paymentReferenceId = Button3dsEnviar?.getAttribute('data-payment-ref_id');
const paymentVersion = Button3dsEnviar?.getAttribute('data-payment-version');
const paymentXid = Button3dsEnviar?.getAttribute('data-payment-xid');
const paymentCavv = Button3dsEnviar === null || Button3dsEnviar === void 0 ? void 0 : Button3dsEnviar.getAttribute('data-payment-cavv');
const paymentEci = Button3dsEnviar === null || Button3dsEnviar === void 0 ? void 0 : Button3dsEnviar.getAttribute('data-payment-eci');
const paymentReferenceId = Button3dsEnviar === null || Button3dsEnviar === void 0 ? void 0 : Button3dsEnviar.getAttribute('data-payment-ref_id');
const paymentVersion = Button3dsEnviar === null || Button3dsEnviar === void 0 ? void 0 : Button3dsEnviar.getAttribute('data-payment-version');
const paymentXid = Button3dsEnviar === null || Button3dsEnviar === void 0 ? void 0 : Button3dsEnviar.getAttribute('data-payment-xid');
return {
type: emitResponse.responseTypes.SUCCESS,
meta: {
Expand All @@ -174,7 +226,9 @@ const lknDCContentCielo = props => {
lkn_cielo_3ds_eci: paymentEci,
lkn_cielo_3ds_ref_id: paymentReferenceId,
lkn_cielo_3ds_version: paymentVersion,
lkn_cielo_3ds_xid: paymentXid
lkn_cielo_3ds_xid: paymentXid,
lkn_cc_installments: debitObject.lkn_cc_installments,
lkn_cc_type: debitObject.lkn_cc_type
}
}
};
Expand All @@ -185,6 +239,33 @@ const lknDCContentCielo = props => {
unsubscribe();
};
}, [debitObject, emitResponse.responseTypes.ERROR, emitResponse.responseTypes.SUCCESS, onPaymentSetup]);
window.wp.element.useEffect(() => {
const installmentMin = 5;
// Verifica se 'lknCCActiveInstallmentCielo' é 'yes' e o valor total é maior que 10
if (lknDCActiveInstallmentCielo === 'yes' && lknDCTotalCartCielo > 10) {
const maxInstallments = lknDCInstallmentLimitCielo; // Limita o parcelamento até 12 vezes, deixei fixo para teste

for (let index = 1; index <= maxInstallments; index++) {
const installmentAmount = (lknDCTotalCartCielo / index).toLocaleString('pt-BR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const nextInstallmentAmount = lknDCTotalCartCielo / index;
if (nextInstallmentAmount < installmentMin) {
break;
}
setOptions(prevOptions => [...prevOptions, {
key: index,
label: `${index}x de R$ ${installmentAmount} sem juros`
}]);
}
} else {
setOptions(prevOptions => [...prevOptions, {
key: '1',
label: `1x de R$ ${lknDCTotalCartCielo} (à vista)`
}]);
}
}, []);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Pagamento processado pela Cielo API 3.0")), /*#__PURE__*/React.createElement(wcComponents.TextInput, {
id: "lkn_dc_cardholder_name",
label: lknDCTranslationsDebitCielo.cardHolder,
Expand Down Expand Up @@ -221,6 +302,36 @@ const lknDCContentCielo = props => {
style: {
marginBottom: '30px'
}
}), /*#__PURE__*/React.createElement(wcComponents.SortSelect, {
id: "lkn_cc_type",
label: lknDCTranslationsCielo.cardType,
value: debitObject.lkn_cc_type,
onChange: event => {
updateDebitObject('lkn_cc_type', event.target.value);
},
options: [{
key: 'Credit',
label: lknDCTranslationsCielo.creditCard
}, {
key: 'Debit',
label: lknDCTranslationsCielo.debitCard
}]
}), /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: '30px'
}
}), lknDCActiveInstallmentCielo === 'yes' && debitObject.lkn_cc_type == 'Credit' && /*#__PURE__*/React.createElement(wcComponents.SortSelect, {
id: "lkn_cc_installments",
label: lknDCTranslationsCielo.cardType,
value: debitObject.lkn_cc_installments,
onChange: event => {
updateDebitObject('lkn_cc_installments', event.target.value);
},
options: options
}), /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: '30px'
}
}), /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
Expand Down
Loading

0 comments on commit 685b5e3

Please sign in to comment.