@malga-checkout-full/core
Version:
Core components for Malga Checkout Full
330 lines (309 loc) • 16.3 kB
JavaScript
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-852d68dc.js';
import { c as cleanTextOnlyNumbers } from './clean-text-only-numbers-8dcdf6bd.js';
import './index-cfe6a98e.js';
import { _, Z } from './i18n.es-d68d56ce.js';
import './_commonjsHelpers-ba3f0406.js';
// Unique ID creation requires a high quality random # generator. In the browser we therefore
// require the crypto API and do not support built-in fallback to lower quality random number
// generators (like Math.random()).
let getRandomValues;
const rnds8 = new Uint8Array(16);
function rng() {
// lazy load so that environments that need to polyfill have a chance to do so
if (!getRandomValues) {
// getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
if (!getRandomValues) {
throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
}
}
return getRandomValues(rnds8);
}
/**
* Convert array of 16 byte values to UUID string format of the form:
* XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
*/
const byteToHex = [];
for (let i = 0; i < 256; ++i) {
byteToHex.push((i + 0x100).toString(16).slice(1));
}
function unsafeStringify(arr, offset = 0) {
// Note: Be careful editing this code! It's been tuned for performance
// and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
}
const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
const native = {
randomUUID
};
function v4(options, buf, offset) {
if (native.randomUUID && !buf && !options) {
return native.randomUUID();
}
options = options || {};
const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
rnds[6] = rnds[6] & 0x0f | 0x40;
rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
if (buf) {
offset = offset || 0;
for (let i = 0; i < 16; ++i) {
buf[offset + i] = rnds[i];
}
return buf;
}
return unsafeStringify(rnds);
}
const getDocumentType = (identification) => {
if (identification.length === 11)
return 'cpf';
return 'cnpj';
};
const getCustomerDocumentBrl = (customer) => {
const identification = cleanTextOnlyNumbers(customer.identification);
return {
type: getDocumentType(identification),
country: 'BR',
number: identification,
};
};
const getCustomerDocument = (customer) => ({
type: customer.documentType,
country: customer.documentCountry,
number: customer.identification,
});
const formatCustomer = (customer, isInternationalCustomer) => {
const customerAddress = {
zipCode: customer.zipCode,
street: customer.street,
streetNumber: customer.streetNumber,
complement: customer.complement,
district: customer.district,
city: customer.city,
state: customer.state,
country: customer.country,
};
const hasCustomerAddress = Object.values(customerAddress).some((value) => value);
const address = hasCustomerAddress ? customerAddress : null;
const document = isInternationalCustomer
? getCustomerDocument(customer)
: getCustomerDocumentBrl(customer);
return {
name: customer.name,
email: customer.email,
phoneNumber: customer.phoneNumber,
document,
address,
};
};
const formatProducts = (isSession, items, products) => {
if (isSession) {
return items.map((item) => ({
name: item.name,
unitPrice: item.unitPrice,
quantity: item.quantity,
sku: item.name,
risk: 'Low',
}));
}
if (products) {
return products.map((product) => ({
name: product.name,
quantity: product.quantity,
sku: product.sku,
unitPrice: product.amount,
risk: product.risk,
}));
}
return [];
};
const formatFraudAnalysis = (customer, products, usePartialCustomer) => ({
customer,
cart: products,
usePartialCustomer,
});
const formatFraudAnalysisWithCustomerId = (products, usePartialCustomer) => ({
cart: products,
usePartialCustomer,
});
const formatPaymentSession = (paymentSession, transactionConfig) => {
if (!paymentSession)
return;
return Object.assign(Object.assign({}, paymentSession), { checkoutPaymentMethods: paymentSession.checkoutPaymentMethods, transactionConfig: Object.assign(Object.assign({}, transactionConfig), paymentSession.transactionConfig), customization: paymentSession.customization });
};
const formatSuccess = (MalgaPaymentsSuccess) => (Object.assign({}, MalgaPaymentsSuccess));
const formatDripPaymentMethod = (drip, products) => {
const items = products.map((product) => ({
id: v4(),
title: product.name,
quantity: product.quantity,
unitPrice: product.amount,
}));
return {
items: drip.items || items,
browser: drip.browser || null,
};
};
const formatPaymentMethods = (paymentMethods, products) => {
const currentPaymentMethods = paymentMethods;
if (currentPaymentMethods.drip) {
currentPaymentMethods.drip = formatDripPaymentMethod(paymentMethods.drip, products);
}
return currentPaymentMethods;
};
const version = "1.22.2";
const malgaCheckoutFullCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\"); :root{--malga-checkout-color-page-background:#eef2f6;--malga-checkout-color-brand-accent-light:#79DBD4;--malga-checkout-color-brand-accent-normal:#39BFAD;--malga-checkout-color-brand-clean:#C3F4EF;--malga-checkout-color-brand-light:#79DBD4;--malga-checkout-color-brand-normal:#39BFAD;--malga-checkout-color-brand-middle:#2FAC9B;--malga-checkout-color-brand-dark:#147F70;--malga-checkout-color-grey-light:#666666;--malga-checkout-color-grey-normal:#4D4D4D;--malga-checkout-color-grey-middle:#333333;--malga-checkout-color-grey-dark:#1A1A1A;--malga-checkout-color-grey-darkness:#000000;--malga-checkout-color-accent-light:#ffffff;--malga-checkout-color-accent-normal:#F1F1F1;--malga-checkout-color-accent-middle:#CBCBCB;--malga-checkout-color-warning-light:#FFF8E6;--malga-checkout-color-warning-normal:#F9DF8D;--malga-checkout-color-warning-middle:#FFA400;--malga-checkout-color-warning-dark:#ED3A3D;--malga-checkout-color-modal-success:#00AE42;--malga-checkout-color-modal-error:#ED3A3D;--malga-checkout-color-modal-neutral:#4D4D4D;--malga-checkout-color-disabled:#F9F9F9;--malga-checkout-color-modal-action-button-error:#000000;--malga-checkout-color-modal-action-button-error-hover:#333333;--malga-checkout-color-modal-action-button-success:#000000;--malga-checkout-color-modal-action-button-success-hover:#333333;--malga-checkout-color-modal-action-button-success-font-color:#ffffff;--malga-checkout-color-modal-action-button-error-font-color:#ffffff;--malga-checkout-typography-family:\"Inter\", sans-serif;--malga-checkout-spacing-xxs:4px;--malga-checkout-spacing-xs:8px;--malga-checkout-spacing-sm:16px;--malga-checkout-spacing-default:24px;--malga-checkout-spacing-md:32px;--malga-checkout-spacing-lg:48px;--malga-checkout-spacing-xlg:64px;--malga-checkout-spacing-xxlg:96px;--malga-checkout-size-min-width:250px;--malga-checkout-border-radius-default:4px;--malga-checkout-border-radius-md:6px;--malga-checkout-border-radius-lg:20px;--malga-checkout-transition-slow:0.3s;--malga-checkout-transition-default:0.5s}body{padding:0;margin:0}.malga-checkout-full__container{display:flex;flex-direction:column;margin:0;padding:0;width:100%;height:100vh;background-color:var(--malga-checkout-color-page-background)}.malga-checkout-full__container--full-height{height:100%}.malga-checkout-full__informations>checkout-accordion:first-child{margin-bottom:var(--malga-checkout-spacing-sm)}";
const MalgaCheckoutFull = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.transactionSuccess = createEvent(this, "transactionSuccess", 7);
this.transactionFailed = createEvent(this, "transactionFailed", 7);
this.sandbox = false;
this.debug = false;
this.paymentMethods = {
pix: undefined,
credit: undefined,
boleto: undefined,
nupay: undefined,
drip: undefined,
};
this.pageConfig = {
brandUrl: '',
footerDescription: '',
backRoute: '',
delivery: 0,
products: [],
internationalCustomer: false,
};
this.transactionConfig = {
statementDescriptor: '',
amount: 0,
description: '',
orderId: '',
customerId: '',
currency: 'BRL',
capture: false,
fraudAnalysis: null,
paymentFlowMetadata: null,
splitRules: null,
providerReferenceKey: null,
};
this.dialogConfig = {
show: true,
};
this.isLoading = true;
this.language = 'default';
this.currentSection = 'identification';
this.customerFormFields = {
name: '',
email: '',
phoneNumber: '',
documentCountry: '',
documentType: '',
identification: '',
zipCode: '',
street: '',
streetNumber: '',
complement: '',
district: '',
city: '',
state: '',
country: '',
};
this.handleChangeCustomization = (paymentSession) => {
if (paymentSession && paymentSession.customization) {
this.customization = paymentSession.customization;
}
};
this.handleSetPaymentSessionData = (paymentSession) => {
this.paymentSession = paymentSession;
this.isLoading = false;
};
this.handleChangeSection = (section) => {
this.currentSection = section;
};
this.handleSetCustomerFormValues = (field, value) => {
this.customerFormFields = Object.assign(Object.assign({}, this.customerFormFields), { [field]: value });
};
this.handleSetManyCustomerFormValues = (currentCustomerField) => {
this.customerFormFields = Object.assign(Object.assign({}, this.customerFormFields), currentCustomerField);
};
this.handleFraudAnalysis = (customer) => {
var _a, _b;
const items = this.paymentSession && this.paymentSession.items;
const products = formatProducts(!!this.paymentSession, items, this.pageConfig.products);
if (this.transactionConfig.customerId) {
return formatFraudAnalysisWithCustomerId(products, (_a = this.transactionConfig.fraudAnalysis) === null || _a === void 0 ? void 0 : _a.usePartialCustomer);
}
return formatFraudAnalysis(customer, products, (_b = this.transactionConfig.fraudAnalysis) === null || _b === void 0 ? void 0 : _b.usePartialCustomer);
};
this.renderBrand = () => {
if (this.customization && this.customization.brandUrl) {
return this.customization.brandUrl;
}
return this.pageConfig.brandUrl;
};
this.handleGetAmount = () => {
if (this.paymentSession) {
return this.paymentSession.amount;
}
return this.transactionConfig.amount;
};
this.handleGetProducts = () => {
if (this.paymentSession) {
return this.paymentSession.items.map((item) => {
return {
name: item.name,
amount: item.unitPrice,
quantity: item.quantity,
description: item.description,
};
});
}
return this.pageConfig.products;
};
this.handleChangeLanguage = (language) => {
this.language = language;
};
this.handlePaymentMethods = () => {
if (this.paymentSession)
return this.paymentSession.checkoutPaymentMethods;
return formatPaymentMethods(this.paymentMethods, this.pageConfig.products);
};
}
componentWillLoad() {
if (!this.sessionId) {
this.isLoading = false;
}
if (this.transactionConfig.customerId) {
this.currentSection = 'payments';
}
this.language = _(this.locale);
}
render() {
const customer = formatCustomer(this.customerFormFields, this.pageConfig.internationalCustomer);
const checkoutCustomer = this.transactionConfig.customerId ? null : customer;
const currency = this.paymentSession
? this.paymentSession.currency
: this.transactionConfig.currency;
const transactionConfig = this.paymentSession
? this.paymentSession.transactionConfig
: this.transactionConfig;
const paymentMethods = this.handlePaymentMethods();
const fraudAnalysis = this.handleFraudAnalysis(customer);
return (h(Host, { class: {
'malga-checkout-full__container': true,
'malga-checkout-full__container--full-height': this.currentSection === 'identification',
} }, h("malga-checkout-full-header", { locale: this.language, language: this.language, brand: this.renderBrand(), backRoute: this.pageConfig.backRoute, onChangeLanguage: ({ detail: { value } }) => this.handleChangeLanguage(value) }), h("malga-checkout-full-content", null, h("checkout-order-summary", { slot: "order", locale: this.language, label: Z('page.order', this.language), amount: this.handleGetAmount(), products: this.handleGetProducts(), delivery: this.pageConfig.delivery, currency: currency, isLoading: this.isLoading }), h("div", { slot: "informations", class: "malga-checkout-full__informations" }, !this.transactionConfig.customerId && (h("checkout-accordion", { label: Z('page.identification', this.language), isEditable: this.currentSection !== 'identification', opened: this.currentSection === 'identification', onExpandClick: () => this.handleChangeSection('identification') }, h("malga-checkout-full-identification", { locale: this.language, internationalCustomer: this.pageConfig.internationalCustomer, formValues: this.customerFormFields, onFieldChange: ({ detail }) => {
this.handleSetCustomerFormValues(detail.field, detail.value);
}, onManyFieldsChange: ({ detail }) => {
this.handleSetManyCustomerFormValues(detail.customerFormValues);
}, onSubmitForm: () => this.handleChangeSection('payments'), isLoading: this.isLoading }))), h("checkout-accordion", { label: Z('page.payment', this.language), opened: this.currentSection === 'payments' || this.isLoading, onExpandClick: () => this.handleChangeSection('payments') }, h(Fragment, null, h("span", { slot: "accordion-header-additional-information" }, h("checkout-icon", { icon: "lock" }), Z('page.secureAndEncrypted', this.language)), h("malga-checkout", { locale: this.language, publicKey: this.publicKey, clientId: this.clientId, sessionId: this.sessionId, merchantId: this.merchantId, idempotencyKey: this.idempotencyKey, sandbox: this.sandbox, debug: this.debug, transactionConfig: Object.assign(Object.assign({}, transactionConfig), { customerId: this.transactionConfig.customerId, customer: checkoutCustomer, fraudAnalysis }), paymentMethods: paymentMethods, dialogConfig: this.dialogConfig, onPaymentSuccess: ({ detail: { data } }) => this.transactionSuccess.emit({
data: formatSuccess(data),
}), onPaymentFailed: ({ detail: { error } }) => this.transactionFailed.emit({ error }), onPaymentSessionFetch: ({ detail: { paymentSession } }) => {
this.handleChangeCustomization(paymentSession);
this.handleSetPaymentSessionData(formatPaymentSession(paymentSession, this.transactionConfig));
}, isLoading: this.isLoading, appInfo: Object.assign(Object.assign({}, this.appInfo), { platform: { name: 'Checkout Full SDK', version } }) }))))), h("malga-checkout-full-footer", { language: this.language, onChangeLanguage: ({ detail: { value } }) => this.handleChangeLanguage(value), description: this.pageConfig.footerDescription })));
}
};
MalgaCheckoutFull.style = malgaCheckoutFullCss;
export { MalgaCheckoutFull as malga_checkout_full };