adp-web-components 0.0.47 → 0.0.48

package/dist/collection/components/forms/contact-us/params.js

@@ -0,0 +1,72 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { CITY_ENDPOINT } from "../../../global/api/urls";
+import { getLocaleLanguage } from "../../../global/lib/get-local-language";
+import { phoneValidator } from "./validations";
+const name = {
+    label: 'fullName',
+    formLocaleName: 'contactUs',
+};
+const email = {
+    type: 'email',
+    label: 'emailAddress',
+    formLocaleName: 'contactUs',
+};
+const message = {
+    label: 'writeAMessage',
+    formLocaleName: 'contactUs',
+    placeholder: 'leaveUsMessage',
+};
+const phone = {
+    type: 'text',
+    label: 'phoneNumber',
+    numberDirection: true,
+    formLocaleName: 'contactUs',
+    defaultValue: phoneValidator.default,
+    onChangeMiddleware: (event) => {
+        const target = event.target;
+        phoneValidator.reset();
+        target.value = phoneValidator.input(target.value);
+        return event;
+    },
+};
+const cityId = {
+    label: 'city',
+    placeholder: 'selectCity',
+    formLocaleName: 'contactUs',
+    fetcher: async (language, signal) => {
+        const response = await fetch(CITY_ENDPOINT, { signal, headers: { 'Accept-Language': language } });
+        const arrayRes = (await response.json());
+        const selectItems = arrayRes.map(item => ({ label: item.Name, value: item.ID }));
+        return selectItems;
+    },
+};
+const generalTicketType = {
+    label: 'inquiryType',
+    formLocaleName: 'contactUs',
+    placeholder: 'selectInquiryType',
+    fetcher: async (language, _) => {
+        const ticketTypes = (await getLocaleLanguage(language)).generalTicketTypes;
+        const generalInquiryTypes = [
+            {
+                value: 'GeneralInquiry',
+                label: ticketTypes.GeneralInquiry,
+            },
+            {
+                value: 'Complaint',
+                label: ticketTypes.Complaint,
+            },
+        ];
+        return generalInquiryTypes;
+    },
+};
+export const formFieldParams = {
+    name,
+    email,
+    message,
+    phone,
+    cityId,
+    generalTicketType,
+};

package/dist/collection/components/forms/contact-us/validations.js

@@ -0,0 +1,19 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { AsYouType } from "libphonenumber-js";
+import { object, string } from "yup";
+export const phoneValidator = new AsYouType('IQ');
+phoneValidator.default = '+' + phoneValidator.metadata.numberingPlan.metadata[0];
+phoneValidator.input(phoneValidator.default);
+export const contactUsSchema = object({
+    cityId: string(),
+    email: string().email('emailAddressNotValid'),
+    message: string().required('messageIsRequired'),
+    generalTicketType: string().required('inquiryTypeIsRequired'),
+    name: string().required('fullNameIsRequired').min(3, 'fullNameMinimum'),
+    phone: string()
+        .required('phoneNumberIsRequired')
+        .test('libphonenumber-validation', 'phoneNumberFormatInvalid', () => phoneValidator.isValid()),
+});

package/dist/collection/components/forms/contact-us-form.js

@@ -2,84 +2,16 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { object, string } from "yup";
 import { Host, h } from "@stencil/core";
 import { localeSchema } from "../../global/types/locales/index";
 import cn from "../../global/lib/cn";
 import { FormHook } from "../../global/lib/form-hook";
 import { getLocaleLanguage } from "../../global/lib/get-local-language";
 import { isValidStructure } from "../../global/lib/validate-form-structure";
-import { CITY_ENDPOINT } from "../../global/api/urls";
-const contactUsSchema = object({
-    cityId: string(),
-    email: string().email('emailAddressNotValid'),
-    message: string().required('messageIsRequired'),
-    generalTicketType: string().required('inquiryTypeIsRequired'),
-    name: string().required('fullNameIsRequired').min(3, 'fullNameMinimum'),
-    phone: string()
-        .required('phoneNumberIsRequired')
-        .transform(value => value.replace(/^0/, ''))
-        .matches(/^\d+$/, 'phoneNumberFormatInvalid')
-        .length(10, 'phoneNumberFormatInvalid'),
-});
-const formElementMapper = {
-    name: 'text',
-    email: 'text',
-    phone: 'number',
-    cityId: 'select',
-    message: 'text-area',
-    generalTicketType: 'select',
-};
-const formFieldParams = {
-    name: {
-        label: 'fullName',
-        formLocaleName: 'contactUs',
-    },
-    email: {
-        type: 'email',
-        label: 'emailAddress',
-        formLocaleName: 'contactUs',
-    },
-    message: {
-        label: 'writeAMessage',
-        formLocaleName: 'contactUs',
-        placeholder: 'leaveUsMessage',
-    },
-    phone: { inputPreFix: '+964', type: 'number', label: 'phoneNumber', formLocaleName: 'contactUs' },
-    cityId: {
-        label: 'city',
-        placeholder: 'selectCity',
-        formLocaleName: 'contactUs',
-        fetcher: async (language, signal) => {
-            const response = await fetch(CITY_ENDPOINT, { signal, headers: { 'Accept-Language': language } });
-            const arrayRes = (await response.json());
-            const selectItems = arrayRes.map(item => ({ label: item.Name, value: item.ID }));
-            return selectItems;
-        },
-    },
-    generalTicketType: {
-        label: 'inquiryType',
-        formLocaleName: 'contactUs',
-        placeholder: 'selectInquiryType',
-        fetcher: async (language, _) => {
-            const ticketTypes = (await getLocaleLanguage(language)).generalTicketTypes;
-            const generalInquiryTypes = [
-                {
-                    value: 'GeneralInquiry',
-                    label: ticketTypes.GeneralInquiry,
-                },
-                {
-                    value: 'Complaint',
-                    label: ticketTypes.Complaint,
-                },
-            ];
-            return generalInquiryTypes;
-        },
-    },
-};
-const themes = {
-    tiq: '["div#container", ["div#inputs_wrapper", "name", "email", "cityId", "phone", "generalTicketType" ], "message#message",["div#recaptcha_container", "slot"], "submit.Submit"]',
-};
+import { formFieldParams } from "./contact-us/params";
+import { formElementMapper } from "./contact-us/mapper";
+import { contactUsSchema } from "./contact-us/validations";
+import themes from "./contact-us/themes.json";
 export class ContactUsForm {
     constructor() {
         this.recaptchaWidget = null;
@@ -169,12 +101,12 @@ export class ContactUsForm {
     static get is() { return "contact-us-form"; }
     static get originalStyleUrls() {
         return {
-            "$": ["contact-us-form.css"]
+            "$": ["contact-us/form.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["contact-us-form.css"]
+            "$": ["contact-us/form.css"]
         };
     }
     static get properties() {

package/dist/collection/components/vehicle-lookup/vehicle-specification.js

@@ -92,7 +92,8 @@ export class VehicleSpecification {
         return (h(Host, { key: '6ed532937cdafcfab7aabc39bbfd0d4c1dff1b00' }, h("div", { key: 'ddb8b2dc2838a030499b5241f3dfa15f7a68bf07', dir: this.locale.direction, class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: 'f81b91d6c7cfd81df70b691b56b10c26ebaf1efc' }, h(Loading, { key: 'b96b054448c12ccbaf6fa6291382f51e3c334376', isLoading: this.state.includes('loading') }), h("div", { key: '76cd0cc45c7f84986bd813effac5a53a0295c491', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: '60724b3858a6707e3afa18d985f50616fa8484f0', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: '60dcc26e1ecceb4cbca2c2de1e6db439c17e1019', class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: '4d3c1afca968d2c7fc2a925fc626d70492f49869', class: "px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'af212e18ce332b031699b6c3e00df805fbc31db1', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '21a2974e7222b7d6a8fcaa2df1978ecf7670eedf', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, texts.vehicleSpecification), h("div", { key: 'b3413a1f409cebfa51c3c84aab4acb1ddf88e3ac', class: "h-0 overflow-auto flex-1" }, !((_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vehicleSpecification) && h("div", { key: '4e1d80fd788a29fce807c7bf7a55cf306691c614', class: "h-[80px] flex items-center justify-center text-[18px]" }, texts.noData), !!((_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.vehicleSpecification) && (h("table", { key: 'b8edb5185c70b660818af1023ecdff2d371732fd', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: 'fb412628f875cca8d6a9d6921e9bec42a4ee4a64', class: "top-0 font-bold sticky bg-white" }, h("tr", { key: '7676f04f48b6fce484f65f0c80a17e2c500eba27' }, ['model', 'variant', 'katashiki', 'modelYear', 'sfx'].map(title => (h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, texts[title]))))), h("tbody", { key: '1075c4b0ea60a3ccca8c84ff0e85dbc743c2d344' }, h("tr", { key: 'a2e4bae8f5c53f9b2447242b12bba65288e7cece' }, h("td", { key: 'a792eb66c320e92c1b6a04159cf7f3d7076b30d3', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_e = (_d = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.vehicleVariantInfo) === null || _e === void 0 ? void 0 : _e.modelCode) || '...', " ", h("br", { key: '2994aa18bdadecc364a34a0f9d3b88908e2c6676', class: "my-2" }), ((_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _f === void 0 ? void 0 : _f.vehicleSpecification) === null || _g === void 0 ? void 0 : _g.modelDesc) || '...'), h("td", { key: '215d557dab5b54a432cc0a1fe8f0dde27aa1a5b4', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_j = (_h = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _h === void 0 ? void 0 : _h.identifiers) === null || _j === void 0 ? void 0 : _j.variant) || '...', " ", h("br", { key: 'ec59b6a49dd36a203d879bd60fd36094f3bc9407' }), ((_l = (_k = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _k === void 0 ? void 0 : _k.vehicleSpecification) === null || _l === void 0 ? void 0 : _l.variantDesc) || '...'), ['identifiers.katashiki', 'vehicleVariantInfo.modelYear', 'vehicleVariantInfo.sfx'].map(infoPath => {
             var _a;
             const [place, field] = infoPath.split('.');
-            const cellValue = (_a = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _a === void 0 ? void 0 : _a[place][field].toString();
+            const targetPlace = (_a = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _a === void 0 ? void 0 : _a[place];
+            const cellValue = targetPlace && targetPlace[field] ? targetPlace[field].toString() : '';
             return (h("td", { key: infoPath, class: cn('px-[10px] py-[20px] text-center whitespace-nowrap') }, cellValue.trim() ? cellValue : '...'));
         })))))))))))));
     }

package/dist/collection/global/lib/validate-form-structure.js

@@ -32,9 +32,9 @@ const recursiveParser = (structuredArray) => {
     return parent;
 };
 export const formStructureStringExample = '[["div.kodo#j7","name.name#name"], "div.d3#s2"]';
-export const isValidStructure = (structureString) => {
+export const isValidStructure = (requestedStructure) => {
     try {
-        const parsedStructure = JSON.parse(structureString);
+        const parsedStructure = typeof requestedStructure === 'string' ? JSON.parse(requestedStructure) : requestedStructure;
         if (!Array.isArray(parsedStructure) || !parsedStructure.length)
             throw new Error('Invalid structure');
         const structuredObject = recursiveParser(parsedStructure);

package/dist/collection/templates/vehicle-lookup/mock-data.js

@@ -1680,11 +1680,7 @@ const mockData = {
       },
     ],
     ssc: null,
-    vehicleVariantInfo: {
-      modelCode: '13461',
-      sfx: 'HN',
-      modelYear: 2023,
-    },
+    vehicleVariantInfo: null,
     vehicleSpecification: {
       modelDesc: 'HILUX 2.7 D/C 4*4/AT/High/ADD',
       variantDesc: '2.7L/DC/4x4/AT/High/ADD',