@malga-checkout-full/core
Version:
Core components for Malga Checkout Full
474 lines (473 loc) • 16.1 kB
JavaScript
import { Component, Host, h, Prop, State, Event, Fragment, } from '@stencil/core';
import { formatCustomer, formatFraudAnalysis, formatFraudAnalysisWithCustomerId, formatPaymentSession, formatSuccess, formatProducts, formatPaymentMethods, } from './malga-checkout-full.utils';
import { getCurrentLocale } from '@malga-checkout/i18n';
import { t } from '@malga-checkout/i18n';
const version = '1.22.0';
export class MalgaCheckoutFull {
constructor() {
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 = getCurrentLocale(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: t('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: t('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: t('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" }),
t('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 })));
}
static get is() { return "malga-checkout-full"; }
static get originalStyleUrls() { return {
"$": ["malga-checkout-full.scss"]
}; }
static get styleUrls() { return {
"$": ["malga-checkout-full.css"]
}; }
static get properties() { return {
"clientId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "client-id",
"reflect": false
},
"publicKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "public-key",
"reflect": false
},
"sessionId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "session-id",
"reflect": false
},
"merchantId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "merchant-id",
"reflect": false
},
"idempotencyKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "idempotency-key",
"reflect": false
},
"locale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Locale",
"resolved": "\"default\" | \"en\" | \"en-US\" | \"en_US\" | \"pt\" | \"pt-BR\" | \"pt_BR\"",
"references": {
"Locale": {
"location": "import",
"path": "@malga-checkout/i18n/dist/utils"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "locale",
"reflect": false
},
"sandbox": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "sandbox",
"reflect": false,
"defaultValue": "false"
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"paymentMethods": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutFullPaymentMethods",
"resolved": "MalgaCheckoutFullPaymentMethods",
"references": {
"MalgaCheckoutFullPaymentMethods": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{\n pix: undefined,\n credit: undefined,\n boleto: undefined,\n nupay: undefined,\n drip: undefined,\n }"
},
"pageConfig": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutFullPage",
"resolved": "MalgaCheckoutFullPage",
"references": {
"MalgaCheckoutFullPage": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{\n brandUrl: '',\n footerDescription: '',\n backRoute: '',\n delivery: 0,\n products: [],\n internationalCustomer: false,\n }"
},
"transactionConfig": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutFullTransaction",
"resolved": "MalgaCheckoutFullTransaction",
"references": {
"MalgaCheckoutFullTransaction": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{\n statementDescriptor: '',\n amount: 0,\n description: '',\n orderId: '',\n customerId: '',\n currency: 'BRL',\n capture: false,\n fraudAnalysis: null,\n paymentFlowMetadata: null,\n splitRules: null,\n providerReferenceKey: null,\n }"
},
"dialogConfig": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutFullDialog",
"resolved": "MalgaCheckoutFullDialog",
"references": {
"MalgaCheckoutFullDialog": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{\n show: true,\n }"
},
"appInfo": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaAppInfo",
"resolved": "MalgaAppInfo",
"references": {
"MalgaAppInfo": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"isLoading": {},
"language": {},
"paymentSession": {},
"customization": {},
"currentSection": {},
"customerFormFields": {}
}; }
static get events() { return [{
"method": "transactionSuccess",
"name": "transactionSuccess",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n data: MalgaCheckoutFullChargeSuccess\n }",
"resolved": "{ data: MalgaCheckoutFullChargeSuccess; }",
"references": {
"MalgaCheckoutFullChargeSuccess": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
}
}, {
"method": "transactionFailed",
"name": "transactionFailed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n error: MalgaCheckoutFullChargeError\n }",
"resolved": "{ error: MalgaCheckoutFullChargeError; }",
"references": {
"MalgaCheckoutFullChargeError": {
"location": "import",
"path": "./malga-checkout-full.types"
}
}
}
}]; }
}