@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/collection/components/dispute-management/dispute-response/customer-details.js

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core";
+import { FormController } from "../../../ui-components/form/form";
+import CustomerDetailsSchema from "./schemas/customer-details-schema";
+import { DisputeEvidenceDocument } from "../../../api/DisputeEvidenceDocument";
+import { DisputeResponseFormStep } from "./dispute-response-form-types";
+import { heading5 } from "../../../styles/parts";
+export class CustomerDetails {
+    constructor() {
+        this.inputHandler = (name, value) => {
+            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
+        };
+        this.handleFileSelection = (e) => {
+            const target = e.target;
+            const name = target.name;
+            const files = target.files;
+            for (const file of files) {
+                this.documentList.push(new DisputeEvidenceDocument(file, name));
+            }
+        };
+        this.disputeResponse = undefined;
+        this.form = undefined;
+        this.errors = {};
+        this.documentList = [];
+    }
+    async validateAndSubmit(onSuccess) {
+        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.customerDetails));
+    }
+    ;
+    componentWillLoad() {
+        this.form = new FormController(CustomerDetailsSchema);
+    }
+    componentDidLoad() {
+        this.form.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    render() {
+        var _a, _b, _c;
+        return (h("div", { key: 'f3b9a18d93cea09e6c9f7a134ed566ad12887839' }, h("div", { key: 'f9d3594930e9ae5d5907462bbe76c242019a19bc', class: "row gy-3" }, h("div", { key: '809f4e25c8a4d8652ae4711a33321b17d35f5796', class: "col-12" }, h("h2", { key: '56f784698452620cb30b532840b02ee2ca3b6a7a', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '6775574f0e8f1047a11e3e9594f9f237aee09aa2', class: "col-12" }, h("form-control-text", { key: '4fc621b96baed074292ccbe8507a58d18f005237', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: 'f57ace60afc3a74711dc98ea054345413ff51d48', class: "col-12" }, h("form-control-text", { key: '31a88ff6476ecd98fd6def5c39778940b448da51', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '3ea9b1729c1a516fdbf33b28674e33a5ec5f200a', class: "col-12" }, h("form-control-textarea", { key: '6eb19b40b3a514db9e1ead3e57832da37d791db6', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: '363371261754410c5548fc9286a5d9edbec5e4a0', class: "col-12" }, h("form-control-file-v2", { key: 'bf3976ab48c50bb7cd6fd7c29a39a36bee8a70c5', label: "Customer Signature", name: "customer_signature", onChange: this.handleFileSelection })), h("div", { key: '7a85113b3a4c95e0571759f040a63757eead2788', class: "col-12" }, h("form-control-file-v2", { key: '686b82077404ce7c345a51b4c572452fa0491b7d', label: "Customer Communication", name: "customer_communication", onChange: this.handleFileSelection })))));
+    }
+    static get is() { return "justifi-customer-details"; }
+    static get properties() {
+        return {
+            "disputeResponse": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dispute-response",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "form": {},
+            "errors": {},
+            "documentList": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validateAndSubmit": {
+                "complexType": {
+                    "signature": "(onSuccess: (formData: any, documentList: DisputeEvidenceDocument[], formStep: DisputeResponseFormStep) => void) => Promise<void>",
+                    "parameters": [{
+                            "name": "onSuccess",
+                            "type": "(formData: any, documentList: DisputeEvidenceDocument[], formStep: DisputeResponseFormStep) => void",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DisputeEvidenceDocument": {
+                            "location": "import",
+                            "path": "../../../api/DisputeEvidenceDocument",
+                            "id": "src/api/DisputeEvidenceDocument.ts::DisputeEvidenceDocument"
+                        },
+                        "DisputeResponseFormStep": {
+                            "location": "import",
+                            "path": "./dispute-response-form-types",
+                            "id": "src/components/dispute-management/dispute-response/dispute-response-form-types.ts::DisputeResponseFormStep"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+;

package/dist/collection/components/dispute-management/dispute-response/dispute-response-actions.js

@@ -0,0 +1,117 @@
+import { ComponentErrorSeverity } from "../../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../../api/services/utils";
+export const makeGetDisputeResponse = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchDisputeResponse(id, authToken, params, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const disputeResponse = response.data;
+            onSuccess({ disputeResponse, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+export const makeUpdateDisputeResponse = ({ authToken, disputeId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.updateDisputeResponse(disputeId, authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+export const makeSubmitDisputeResponse = ({ authToken, disputeId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.submitDisputeResponse(disputeId, authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+export const makeCreateDisputeEvidence = ({ authToken, disputeId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.createDisputeEvidence(disputeId, authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};

package/dist/collection/components/dispute-management/dispute-response/dispute-response-core.js

@@ -0,0 +1,362 @@
+import { h } from "@stencil/core";
+import { DisputeManagementClickActions } from "../event-types";
+import { heading4 } from "../../../styles/parts";
+import { Button } from "../../../ui-components/button";
+export class DisputeResponseCore {
+    constructor() {
+        this.componentStepMapping = [
+            () => h("justifi-product-or-service", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-customer-details", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-cancellation-policy", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-refund-policy", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-duplicate-charge", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-electronic-evidence", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-shipping-details", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+            () => h("justifi-additional-statement", { ref: (el) => this.currentStepComponentRef = el, disputeResponse: this.disputeResponse }),
+        ];
+        this.saveData = async (formData, formStep) => {
+            const hasFormData = Object.keys(formData).length;
+            if (!hasFormData) {
+                this.stepCompleteEvent.emit({ response: null, formStep: formStep });
+                return;
+            }
+            if (this.isLastStep) {
+                return this.submitDisputeResponse({
+                    payload: formData,
+                    onSuccess: (response) => {
+                        this.submitEvent.emit({ response: response });
+                        this.stepCompleteEvent.emit({ response: response, formStep: formStep });
+                    },
+                    onError: ({ error, code, severity }) => {
+                        this.errorEvent.emit({
+                            errorCode: code,
+                            message: error,
+                            severity,
+                        });
+                    },
+                });
+            }
+            else {
+                return this.updateDisputeResponse({
+                    payload: formData,
+                    onSuccess: (response) => {
+                        this.disputeResponse = Object.assign({}, response.data);
+                        this.stepCompleteEvent.emit({ response: response, formStep: formStep });
+                    },
+                    onError: ({ error, code, severity }) => {
+                        this.errorEvent.emit({
+                            errorCode: code,
+                            message: error,
+                            severity,
+                        });
+                    },
+                });
+            }
+        };
+        this.initializeMakePresignedURLs = async () => {
+            const presignedUrlPromises = this.documentList.map((document) => {
+                return this.getPresignedFileUrl(document);
+            });
+            return await Promise.all(presignedUrlPromises);
+        };
+        this.initializeFileUploads = async () => {
+            const uploadDocumentPromises = this.documentList.map((document) => {
+                return this.uploadDocument(document);
+            });
+            return Promise.all(uploadDocumentPromises);
+        };
+        this.getPresignedFileUrl = async (document) => {
+            return this.createDisputeEvidence({
+                payload: {
+                    file_name: document.file_name,
+                    file_type: document.file_type,
+                    dispute_evidence_type: document.dispute_evidence_type,
+                },
+                onSuccess: (response) => {
+                    document.presignedUrl = response.data.presigned_url;
+                    this.isLoading = false;
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        errorCode: code,
+                        message: error,
+                        severity,
+                    });
+                    this.isLoading = false;
+                },
+            });
+        };
+        this.uploadDocument = async (document) => {
+            const fileData = await document.getFileString();
+            if (!document.presignedUrl) {
+                throw new Error('Presigned URL is not set');
+            }
+            const response = await fetch(document.presignedUrl, {
+                method: 'PUT',
+                body: fileData,
+            });
+            return response;
+        };
+        this.onCancel = () => {
+            this.clickEvent.emit({ name: DisputeManagementClickActions.cancelDispute });
+        };
+        this.handleSubmit = async (formData, documentList, formStep) => {
+            this.isLoading = true;
+            if (documentList.length) {
+                this.documentList = documentList;
+                await this.initializeMakePresignedURLs();
+                await this.initializeFileUploads();
+            }
+            // this needs to happen last because it fires the 'submit-event' and 'complete-form-step-event' event
+            await this.saveData(formData, formStep);
+            this.isLoading = false;
+        };
+        // after each of these steps where validateAndSubmit is called, reload the dispute
+        // and set isLoading, and pass defaults into each step
+        this.onBack = async () => {
+            await this.currentStepComponentRef.validateAndSubmit(async (formData, documentList, formStep) => {
+                this.clickEvent.emit({ name: DisputeManagementClickActions.previousStep });
+                await this.handleSubmit(formData, documentList, formStep);
+                this.currentStep--;
+            });
+        };
+        this.onNext = async () => {
+            await this.currentStepComponentRef.validateAndSubmit(async (formData, documentList, formStep) => {
+                this.clickEvent.emit({ name: DisputeManagementClickActions.nextStep });
+                await this.handleSubmit(formData, documentList, formStep);
+                this.currentStep++;
+            });
+        };
+        this.onSubmit = async () => {
+            await this.currentStepComponentRef.validateAndSubmit(async (formData, documentList, formStep) => {
+                this.clickEvent.emit({ name: DisputeManagementClickActions.submit });
+                const submitData = Object.assign(Object.assign({}, formData), { forfeit: false });
+                await this.handleSubmit(submitData, documentList, formStep);
+            });
+        };
+        this.updateDisputeResponse = undefined;
+        this.submitDisputeResponse = undefined;
+        this.createDisputeEvidence = undefined;
+        this.disputeResponse = {};
+        this.isLoading = false;
+        this.documentList = [];
+        this.currentStep = 0;
+        this.currentStepComponentRef = undefined;
+    }
+    get currentStepComponent() {
+        return this.componentStepMapping[this.currentStep]();
+    }
+    get isLastStep() {
+        return this.currentStep === this.componentStepMapping.length - 1;
+    }
+    get isFirstStep() {
+        return this.currentStep === 0;
+    }
+    render() {
+        return (h("div", { key: '4c1c801c82506c50ee304934ec0c42efc986f07c', class: "row gy-3" }, h("div", { key: '27c27411ac45d0a20f5fd99e4a11eb0efe6b0007', class: "col-12" }, h("h1", { key: '48aa1635accfafe2ed76e733296bade6fdeeddf5', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '79ca608ae5ba5a4249556754972216a82104c004', class: "col-12" }, this.currentStepComponent), h("div", { key: '39ecb37977d852c3528f09afced344d40e2022ac', class: "col-12" }, h("div", { key: '23d7523bffc81324b8e99b5f2354c75f52af9d52', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
+    }
+    static get is() { return "justifi-dispute-response-core"; }
+    static get properties() {
+        return {
+            "updateDisputeResponse": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(args: {\n    payload: any,\n    onSuccess: (disputeResponse: any) => void,\n    onError: (disputeResponse: any) => void\n  }) => Promise<IApiResponse<IDispute>>",
+                    "resolved": "(args: { payload: any; onSuccess: (disputeResponse: any) => void; onError: (disputeResponse: any) => void; }) => Promise<IApiResponse<IDispute>>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "IApiResponse": {
+                            "location": "import",
+                            "path": "../../../api",
+                            "id": "src/api/index.ts::IApiResponse"
+                        },
+                        "IDispute": {
+                            "location": "import",
+                            "path": "../../../api/Dispute",
+                            "id": "src/api/Dispute.ts::IDispute"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "submitDisputeResponse": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(args: {\n    payload: any,\n    onSuccess: (disputeResponse: any) => void,\n    onError: (disputeResponse: any) => void\n  }) => Promise<IApiResponse<IDispute>>",
+                    "resolved": "(args: { payload: any; onSuccess: (disputeResponse: any) => void; onError: (disputeResponse: any) => void; }) => Promise<IApiResponse<IDispute>>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "IApiResponse": {
+                            "location": "import",
+                            "path": "../../../api",
+                            "id": "src/api/index.ts::IApiResponse"
+                        },
+                        "IDispute": {
+                            "location": "import",
+                            "path": "../../../api/Dispute",
+                            "id": "src/api/Dispute.ts::IDispute"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "createDisputeEvidence": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(args: {\n    payload: any,\n    onSuccess: (disputeResponse: any) => void,\n    onError: (disputeResponse: any) => void\n  }) => Promise<IApiResponse<any>>",
+                    "resolved": "(args: { payload: any; onSuccess: (disputeResponse: any) => void; onError: (disputeResponse: any) => void; }) => Promise<IApiResponse<any>>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "IApiResponse": {
+                            "location": "import",
+                            "path": "../../../api",
+                            "id": "src/api/index.ts::IApiResponse"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "disputeResponse": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dispute-response",
+                "reflect": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "documentList": {},
+            "currentStep": {},
+            "currentStepComponentRef": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "stepCompleteEvent",
+                "name": "complete-form-step-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentFormStepCompleteEvent",
+                    "resolved": "ComponentFormStepCompleteEvent",
+                    "references": {
+                        "ComponentFormStepCompleteEvent": {
+                            "location": "import",
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentFormStepCompleteEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
+                    "references": {
+                        "ComponentSubmitEvent": {
+                            "location": "import",
+                            "path": "../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+;

package/dist/collection/components/dispute-management/dispute-response/dispute-response-form-types.js

@@ -0,0 +1,12 @@
+export var DisputeResponseFormStep;
+(function (DisputeResponseFormStep) {
+    DisputeResponseFormStep["disputeReason"] = "dispute_reason";
+    DisputeResponseFormStep["productOrService"] = "product_or_service";
+    DisputeResponseFormStep["customerDetails"] = "customer_details";
+    DisputeResponseFormStep["cancellationPolicy"] = "cancellation_policy";
+    DisputeResponseFormStep["refundPolicy"] = "refund_policy";
+    DisputeResponseFormStep["duplicateCharge"] = "duplicate_charge";
+    DisputeResponseFormStep["electronicEvidence"] = "electronic_evidence";
+    DisputeResponseFormStep["shippingDetails"] = "shipping_details";
+    DisputeResponseFormStep["additionalStatement"] = "additional_statement";
+})(DisputeResponseFormStep || (DisputeResponseFormStep = {}));