Skip to content

Commit

Permalink
refactor: admin creditCard block and template
Browse files Browse the repository at this point in the history
  • Loading branch information
Mateus Picoloto committed Aug 28, 2023
1 parent a5bf5b2 commit 7febef4
Show file tree
Hide file tree
Showing 10 changed files with 237 additions and 132 deletions.
78 changes: 78 additions & 0 deletions Block/Form/CreditCard.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<?php

namespace Pagarme\Pagarme\Block\Form;

use Magento\Framework\View\Element\Template\Context;
use Magento\Payment\Block\Form;
use Magento\Quote\Model\Quote;
use Pagarme\Pagarme\Helper\Adminhtml\CheckoutHelper;

class CreditCard extends Form
{
/**
* @var CheckoutHelper
*/
protected $checkoutHelper;

public function __construct(
Context $context,
CheckoutHelper $checkoutHelper,
array $data = []
) {
parent::__construct($context, $data);
$this->checkoutHelper = $checkoutHelper;
}

public function getMethodCode()
{
return $this->escapeHtml(parent::getMethodCode());
}

/**
* @return string|null
*/
public function getPublicKey()
{
return $this->checkoutHelper->getPublicKey();
}

/**
* @param Quote $quote
* @return string
*/
public function getGrandTotal($quote)
{
return $this->checkoutHelper->formatGrandTotal($quote->getBaseGrandTotal());
}

/**
* @return string[]
*/
public function getMonths()
{
return $this->checkoutHelper->getMonths();
}

/**
* @return string[]
*/
public function getYears()
{
return $this->checkoutHelper->getYears();
}

/**
* @return array
*/
public function getAvailableBrands()
{
return $this->checkoutHelper->getBrandsAvailables(
$this->escapeHtml($this->getMethodCode())
);
}

public function getInstallmentsUrl()
{
return $this->checkoutHelper->getInstallmentsUrl($this->getBaseUrl());
}
}
2 changes: 1 addition & 1 deletion etc/di.xml
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,7 @@
<argument name="code" xsi:type="const">Pagarme\Pagarme\Model\Ui\CreditCard\ConfigProvider::CODE</argument>
<argument name="valueHandlerPool" xsi:type="object">PagarmeCreditCardValueHandlerPool</argument>
<argument name="commandPool" xsi:type="object">PagarmeCreditCardCommandPool</argument>
<argument name="formBlockType" xsi:type="string">Magento\Payment\Block\Form</argument>
<argument name="formBlockType" xsi:type="string">Pagarme\Pagarme\Block\Form\CreditCard</argument>
<argument name="infoBlockType" xsi:type="string">Pagarme\Pagarme\Block\Payment\Info\CreditCard</argument>
</arguments>
</virtualType>
Expand Down
7 changes: 7 additions & 0 deletions i18n/en_US.csv
Original file line number Diff line number Diff line change
Expand Up @@ -310,3 +310,10 @@
"View Billet","View Billet"
"Error updating cycles options for product with id %s. Error message: %s","Error updating cycles options for product with id %s. Error message: %s"
"Subscription product with id %s not founded","Subscription product with id %s not founded"
"Brands","Brands"
"Select a brand","Select a brand"
"Please, select a brand","Please, select a brand"
"Please, enter valid Credit Card Number","Please, enter valid Credit Card Number"
"Please, enter valid Name on Card","Please, enter valid Name on Card"
"Please, enter valid Expiration Date","Please, enter valid Expiration Date"
"The cvv field must be a minimum length of 3 and a maximum length of 4.","The cvv field must be a minimum length of 3 and a maximum length of 4."
7 changes: 7 additions & 0 deletions i18n/pt_BR.csv
Original file line number Diff line number Diff line change
Expand Up @@ -489,3 +489,10 @@
"View Billet","Visualizar Boleto"
"Error updating cycles options for product with id %s. Error message: %s","Erro ao atualizar as opções de ciclos para o produto com o id %s. Mensagem de erro: %s"
"Subscription product with id %s not founded","Produto de assinatura com id %s não encontrado"
"Brands","Bandeiras"
"Select a brand","Selecione uma bandeira"
"Please, select a brand","Por favor, selecione uma bandeira"
"Please, enter valid Credit Card Number","Por favor, digite um Número de Cartão de Crédito válido"
"Please, enter valid Name on Card","Por favor, digite um Nome no Cartão válido"
"Please, enter valid Expiration Date","Por favor, digite um Data de Validade válida"
"The cvv field must be a minimum length of 3 and a maximum length of 4.","O campo de cvv deve ter um tamanho mínimo de 3 e um tamanho máximo de 4."
1 change: 1 addition & 0 deletions view/adminhtml/layout/sales_order_create_index.xml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Pagarme_Pagarme::js/payment.js"/>
<css src="Pagarme_Pagarme::css/pagarme_order_create.css"/>
</head>
<body>
<referenceBlock name="order_create_billing_form">
Expand Down
3 changes: 2 additions & 1 deletion view/adminhtml/requirejs-config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
const config = {
map: {
'*': {
orderCharge: 'Pagarme_Pagarme/js/view/order/orderCharge'
orderCharge: 'Pagarme_Pagarme/js/view/order/orderCharge',
creditCardAdminPagarme: 'Pagarme_Pagarme/js/view/form/creditCard'
}
}
}
232 changes: 103 additions & 129 deletions view/adminhtml/templates/form/creditcard.phtml
Original file line number Diff line number Diff line change
@@ -1,141 +1,115 @@
<?php
$code = $block->escapeHtml($block->getMethodCode());

$helper = $this->helper('\Pagarme\Pagarme\Helper\Adminhtml\CheckoutHelper');
$brandsAvailables = $helper->getBrandsAvailables($code);
$publicKey = $helper->getPublicKey();
/**
* @var \Pagarme\Pagarme\Block\Form\CreditCard $block
* @var \Magento\Sales\Block\Adminhtml\Order\Create\Billing\Method\Form $tmpBlock
*/

$quote = $tmpBlock->getQuote();
$baseGrandTotal = $helper->formatGrandTotal($quote->getBaseGrandTotal());

$months = $helper->getMonths();
$years = $helper->getYears();

$installmentUrl = $helper->getInstallmentsUrl($block->getBaseUrl());

$baseGrandTotal = $block->getGrandTotal($quote);
$code = $block->getMethodCode();
?>
<fieldset class="admin__fieldset payment-method" id="payment_form_<?= $code ?>" style="display:none; margin-top:15px;">
<input type="hidden" value="<?= $publicKey?>" class="public_key">
<input type="hidden" name="payment[cc_token_credit_card]" class="input-text cc_token" value="">
<input type="hidden" class="cc_amount" name="payment[cc_amount]" value="<?= $baseGrandTotal ?>"/>
<input type="hidden" class="cc_amount_without_tax" value="<?= $baseGrandTotal ?>"/>
<div class="admin__field _required installments">
<label class="label admin__field-label">
<span>Brands</span>
</label>
<div class="admin__field-control control installments">
<div class="control">
<select name="payment[cc_type]"
style="width: 335px;"
class="select select-type cc_type"
>
<option value="">Select a brand</option>
<?php foreach ($brandsAvailables as $brand) :?>
<option value="<?= $brand?>"><?= $brand?></option>
<?php endforeach;?>
</select>
<div class="hosted-error" >Please, select a brand</div>
</div>
</div>
</div>
<div class="admin__field _required">
<label class="label admin__field-label">
<span>Credit Card Number</span>
</label>
<div class="admin__field-control control">
<input id="pagarme_cc_number" name="payment[cc_number]" style="width: 335px;" class="hosted-control cc_number" />
<div class="hosted-error">Please, enter valid Credit Card Number</div>
</div>
</div>
<div class="admin__field _required">
<label class="label admin__field-label">
<span>Credit Card Name</span>
</label>
<div class="admin__field-control control">
<input id="pagarme_cc_name" name="payment[cc_owner]" style="width: 335px;" class="hosted-control cc_owner" />
<div class="hosted-error">Please, enter valid Credit Card Name</div>
</div>
<fieldset class="admin__fieldset payment-method fieldset-credit-card-pagarme"
id="payment_form_<?= $code; ?>"
style="display:none;"
data-mage-init='{
"creditCardAdminPagarme": {
"code": "<?= $code; ?>",
"installmentUrl": "<?= $block->getInstallmentsUrl(); ?>"
}
}'
>
<input type="hidden" value="<?= $block->getPublicKey(); ?>" class="public_key">
<input type="hidden" name="payment[cc_token_credit_card]" class="input-text cc_token" value="">
<input type="hidden" class="cc_amount" name="payment[cc_amount]" value="<?= $baseGrandTotal ?>"/>
<input type="hidden" class="cc_amount_without_tax" value="<?= $baseGrandTotal ?>"/>
<div class="admin__field _required installments">
<label class="label admin__field-label">
<span><?= __('Brands'); ?></span>
</label>
<div class="admin__field-control control installments">
<div class="control">
<select name="payment[cc_type]"
class="select select-type cc_type">
<option value=""><?= __('Select a brand'); ?></option>
<?php foreach ($block->getAvailableBrands() as $brand) : ?>
<option value="<?= $brand ?>"><?= $brand ?></option>
<?php endforeach; ?>
</select>
<div class="hosted-error"><?= __('Please, select a brand'); ?></div>
</div>
</div>
</div>
<div class="admin__field _required">
<label class="label admin__field-label">
<span><?= __('Credit Card Number'); ?></span>
</label>
<div class="admin__field-control control">
<input id="pagarme_cc_number" name="payment[cc_number]" class="hosted-control cc_number"/>
<div class="hosted-error"><?= __('Please, enter valid Credit Card Number'); ?></div>
</div>
</div>
<div class="admin__field _required">
<label class="label admin__field-label">
<span><?= __('Name on Card') ?></span>
</label>
<div class="admin__field-control control">
<input id="pagarme_cc_name" name="payment[cc_owner]" class="hosted-control cc_owner"/>
<div class="hosted-error"><?= __('Please, enter valid Name on Card'); ?></div>
</div>
</div>

<div class="admin__field _required">
<label class="label admin__field-label">
<span>Expiration Date</span>
</label>
<div class="admin__field-control control">
<div class="hosted-date-wrap">
<select name="payment[cc_exp_month]"
style="width: 170px;"
class="select select-type cc_exp_month"
>
<?php foreach ($months as $index => $month) :?>
<option value="<?= $index?>"><?= $index ." - " .$month?></option>
<?php endforeach;?>
</select>
<div class="admin__field _required">
<label class="label admin__field-label">
<span><?= __('Expiration Date'); ?></span>
</label>
<div class="admin__field-control control">
<div class="hosted-date-wrap">
<select name="payment[cc_exp_month]"
class="select select-type cc_exp_month">
<?php foreach ($block->getMonths() as $index => $month) : ?>
<option value="<?= $index ?>"><?= $index . " - " . $month ?></option>
<?php endforeach; ?>
</select>

<select name="payment[cc_exp_year]"
style="width: 90px;"
class="select select-type cc_exp_year"
>
<?php foreach ($years as $year) :?>
<option value="<?= $year?>"><?= $year?></option>
<?php endforeach;?>
</select>
<div class="hosted-error">Please, enter valid Expiration Date</div>
</div>
</div>
<select name="payment[cc_exp_year]"
class="select select-type cc_exp_year">
<?php foreach ($block->getYears() as $year) : ?>
<option value="<?= $year ?>"><?= $year ?></option>
<?php endforeach; ?>
</select>
<div class="hosted-error"><?= __('Please, enter valid Expiration Date'); ?></div>
</div>
<div class="admin__field _required">
<label class="label admin__field-label">
<span>CVV</span>
</label>
<div class="admin__field-control control">
<input id="pagarme_cc_cid" type="number" min="0" name="payment[cc_cid]" class="hosted-control hosted-cid cc_cid"/>
</div>
</div>
<div class="admin__field _required">
<label class="label admin__field-label">
<span><?= __('CVV'); ?></span>
</label>
<div class="admin__field-control control">
<input id="pagarme_cc_cid"
type="number"
min="0"
name="payment[cc_cid]"
class="hosted-control hosted-cid cc_cid"/>

<div class="hosted-error">The cvv field must be a minimum length of 3 and a maximum length of 4.</div>
</div>
<div class="hosted-error">
<?= __('The cvv field must be a minimum length of 3 and a maximum length of 4.'); ?>
</div>
</div>
</div>

<div class="admin__field _required installments">
<label class="label admin__field-label">
<span>Installments</span>
</label>
<div class="admin__field-control control installments">
<div class="control">
<select name="payment[cc_installments]"
style="width: 335px;"
class="select select-installments cc_installments"
>
<option value="">Select a brand</option>
</select>
<div class="hosted-error">This field is required</div>
</div>
</div>
<div class="admin__field _required installments">
<label class="label admin__field-label">
<span><?= __('Installments'); ?></span>
</label>
<div class="admin__field-control control installments">
<div class="control">
<select name="payment[cc_installments]"
class="select select-installments cc_installments">
<option value=""><?= __('Select a brand'); ?></option>
</select>
<div class="hosted-error"><?= __('This field is required'); ?></div>
</div>
</fieldset>

<script>
require([
"jquery",
'Pagarme_Pagarme/js/core/models/creditCardModel',
"jquery/ui"
], function (
$,
CreditCardModel
) {
'use strict';

$(document).ready(function(){
var code = "<?= $code ?>";
var installmenUrl = "<?= $installmentUrl ?>";

var config = {
isMultibuyerEnabled: false,
order : window.order,
payment : window.payment,
installmenUrl: installmenUrl
};

CreditCardModel.init(code, config);
});
});
</script>
</div>
</div>
</fieldset>
15 changes: 15 additions & 0 deletions view/adminhtml/web/css/pagarme_order_create.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.fieldset-credit-card-pagarme {
margin-top:15px;
}

.fieldset-credit-card-pagarme .admin__field .admin__field-control .cc_type,
.fieldset-credit-card-pagarme .admin__field .admin__field-control .cc_number,
.fieldset-credit-card-pagarme .admin__field .admin__field-control .cc_owner,
.fieldset-credit-card-pagarme .admin__field .admin__field-control .cc_installments {
width: 335px;
}

.fieldset-credit-card-pagarme .admin__field .admin__field-control .cc_exp_month,
.fieldset-credit-card-pagarme .admin__field .admin__field-control .cc_exp_year {
width: auto;
}
2 changes: 1 addition & 1 deletion view/adminhtml/web/js/core/models/creditCardModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ define([
CreditCardModel.addListeners = function(config) {
Listeners.addCreditCardNumberListener(this.formObject);
Listeners.addCreditCardHolderNameListener(this.formObject);
Listeners.addCreditCardBrandListener(this.formObject, config.installmenUrl);
Listeners.addCreditCardBrandListener(this.formObject, config.installmentUrl);
Listeners.addCreditCardInstallmentsListener(this.formObject);
};

Expand Down
Loading

0 comments on commit 7febef4

Please sign in to comment.