@malga-checkout/core
Version:
Core components for Malga Checkout
454 lines (453 loc) • 13.5 kB
JavaScript
import { Component, Host, h, Prop, State, Event, Fragment, Watch, } from '@stencil/core';
import { v4 as uuid } from 'uuid';
import { clearEmptyObjectProperties, clearedObjectProperties, } from '@malga-checkout/utils';
import { t } from '@malga-checkout/i18n';
import settings from '../../stores/settings';
import payment from '../../stores/payment';
import { MalgaCheckoutService } from './malga-checkout.service';
import { handleDisablePayButton } from './malga-checkout.utils';
export class MalgaCheckout {
constructor() {
this.sandbox = false;
this.debug = false;
this.dialogConfig = {
show: true,
};
this.paymentMethods = {
pix: undefined,
credit: undefined,
boleto: undefined,
nupay: undefined,
};
this.transactionConfig = {
statementDescriptor: '',
amount: 0,
description: '',
orderId: '',
customerId: '',
currency: 'BRL',
capture: false,
customer: null,
fraudAnalysis: null,
splitRules: null,
paymentFlowMetadata: null,
providerReferenceKey: null,
};
this.isLoading = false;
this.isInternallyLoading = true;
this.isButtonLoading = false;
this.showCurrentPaymentMethod = (paymentMethod) => {
const paymentMethods = Object.keys(settings.paymentMethods);
const showPaymentMethod = paymentMethods.includes(paymentMethod);
return paymentMethods.length === 1 && showPaymentMethod;
};
this.handlePay = async () => {
try {
this.isButtonLoading = true;
await this.MalgaCheckoutService.pay();
this.isButtonLoading = false;
}
catch (err) {
this.isButtonLoading = false;
}
};
this.handleStoreSettings = () => {
settings.clientId = this.clientId;
settings.publicKey = this.publicKey;
settings.sessionId = this.sessionId;
settings.merchantId = this.merchantId;
settings.idempotencyKey = this.idempotencyKey || uuid();
settings.automaticallyGeneratedIdempotencyKey = !this.idempotencyKey;
settings.locale = this.locale;
settings.sandbox = this.sandbox;
settings.debug = this.debug;
settings.dialogConfig = this.dialogConfig;
settings.paymentMethods = this.paymentMethods;
settings.transactionConfig = this.transactionConfig;
settings.appInfo = this.appInfo;
};
this.handleStoreCurrentPaymentMethod = () => {
const paymentMethods = clearEmptyObjectProperties(settings.paymentMethods);
if (paymentMethods.length === 1) {
const [[currentPaymentMethod]] = paymentMethods;
payment.selectedPaymentMethod = currentPaymentMethod;
}
};
this.MalgaCheckoutService = new MalgaCheckoutService({
onPaymentSuccess: (data) => this.paymentSuccess.emit({ data }),
onPaymentFailed: (error) => this.paymentFailed.emit({ error }),
});
}
handleWatchIdempotencyKey() {
settings.idempotencyKey = this.idempotencyKey;
settings.automaticallyGeneratedIdempotencyKey = !this.idempotencyKey;
}
handleWatchTransactionConfig() {
settings.transactionConfig = this.transactionConfig;
}
handleWatchLocale() {
settings.locale = this.locale;
}
async handleSession() {
const paymentSession = await this.MalgaCheckoutService.handleSession(this.sessionId);
this.paymentSessionFetch.emit({ paymentSession });
this.handleStoreCurrentPaymentMethod();
this.isInternallyLoading = false;
}
async handleCustomerId() {
this.MalgaCheckoutService.handleCustomerId(this.transactionConfig.customerId);
}
async componentWillLoad() {
this.handleStoreSettings();
await this.handleSession();
this.handleCustomerId();
}
render() {
const paymentMethods = clearedObjectProperties(settings.paymentMethods);
if (this.isInternallyLoading || this.isLoading) {
return (h("div", { class: { 'malga-checkout__loaders': true } },
h("checkout-loader", null)));
}
return (h(Host, { class: { 'malga-checkout__container': true } },
h("section", { class: { 'malga-checkout__content': true } },
paymentMethods.length > 1 && (h("malga-payments", { paymentMethods: paymentMethods, onPaymentFail: ({ detail: { error } }) => this.paymentFailed.emit({ error }) })),
this.showCurrentPaymentMethod('credit') && (h(Fragment, null,
settings.transactionConfig.customerId && (h("malga-payments-credit-saved-cards", null)),
h("malga-payments-credit", null))),
this.showCurrentPaymentMethod('boleto') && h("malga-payments-boleto", null),
this.showCurrentPaymentMethod('pix') && (h("malga-payments-pix", { onPixPaymentFailed: ({ detail: { error } }) => this.paymentFailed.emit({ error }) })),
this.showCurrentPaymentMethod('nupay') && h("malga-payments-nupay", null),
this.showCurrentPaymentMethod('drip') && h("malga-payments-drip", null),
h("div", { class: { 'malga-checkout__submit': true } },
h("checkout-button", { isLoading: this.isButtonLoading, locale: settings.locale, label: t('paymentMethods.common.payButton', this.locale), disabled: handleDisablePayButton(), onClicked: this.handlePay }),
h("checkout-icon", { icon: "poweredByMalga" })))));
}
static get is() { return "malga-checkout"; }
static get originalStyleUrls() { return {
"$": ["malga-checkout.scss"]
}; }
static get styleUrls() { return {
"$": ["malga-checkout.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": false,
"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
},
"idempotencyKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "idempotency-key",
"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
},
"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"
},
"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
},
"dialogConfig": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutDialog",
"resolved": "MalgaCheckoutDialog",
"references": {
"MalgaCheckoutDialog": {
"location": "import",
"path": "./malga-checkout.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{\n show: true,\n }"
},
"paymentMethods": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutPaymentMethods",
"resolved": "MalgaCheckoutPaymentMethods",
"references": {
"MalgaCheckoutPaymentMethods": {
"location": "import",
"path": "./malga-checkout.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{\n pix: undefined,\n credit: undefined,\n boleto: undefined,\n nupay: undefined,\n }"
},
"transactionConfig": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutTransaction",
"resolved": "MalgaCheckoutTransaction",
"references": {
"MalgaCheckoutTransaction": {
"location": "import",
"path": "./malga-checkout.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 customer: null,\n fraudAnalysis: null,\n splitRules: null,\n paymentFlowMetadata: null,\n providerReferenceKey: null,\n }"
},
"isLoading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "is-loading",
"reflect": false,
"defaultValue": "false"
},
"appInfo": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "AppInfo",
"resolved": "AppInfo",
"references": {
"AppInfo": {
"location": "import",
"path": "../../types/malga-app-info"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"isInternallyLoading": {},
"isButtonLoading": {}
}; }
static get events() { return [{
"method": "paymentSessionFetch",
"name": "paymentSessionFetch",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n paymentSession: SessionNormalized\n }",
"resolved": "{ paymentSession: SessionNormalized; }",
"references": {
"SessionNormalized": {
"location": "import",
"path": "../../services/sessions/sessions.types"
}
}
}
}, {
"method": "paymentSuccess",
"name": "paymentSuccess",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n data: MalgaPaymentsSuccess\n }",
"resolved": "{ data: MalgaPaymentsSuccess; }",
"references": {
"MalgaPaymentsSuccess": {
"location": "import",
"path": "../../types/malga-payments-success.types"
}
}
}
}, {
"method": "paymentFailed",
"name": "paymentFailed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n error: MalgaPaymentsError\n }",
"resolved": "{ error: MalgaPaymentsError; }",
"references": {
"MalgaPaymentsError": {
"location": "import",
"path": "../../types/malga-payments-error.types"
}
}
}
}]; }
static get watchers() { return [{
"propName": "idempotencyKey",
"methodName": "handleWatchIdempotencyKey"
}, {
"propName": "transactionConfig",
"methodName": "handleWatchTransactionConfig"
}, {
"propName": "locale",
"methodName": "handleWatchLocale"
}]; }
}