cja-phoenix 0.3.4 → 0.3.6

package/dist/types/components/structural/Modal.vue.d.ts

@@ -1,28 +1,23 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    title?: string | undefined;
-}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+}, {
     active: import("vue").Ref<boolean>;
     openModal: () => void;
     closeModal: () => void;
     toggleModal: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    title?: string | undefined;
-}>>> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+}>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
     body?(_: {}): any;
     footer?(_: {}): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/types/utils/formValidations.d.ts

@@ -1,6 +1,11 @@
 import * as yup from "yup";
 export declare const stringRequired: (messages: {
     required: string;
+    minLength?: string;
+    maxLength?: string;
+}, options?: {
+    minLength?: number;
+    maxLength?: number;
 }) => yup.StringSchema<string, yup.AnyObject, undefined, "">;
 export declare const emailRequired: (messages: {
     required: string;
@@ -8,6 +13,11 @@ export declare const emailRequired: (messages: {
 }) => yup.StringSchema<string, yup.AnyObject, undefined, "">;
 export declare const numberRequired: (messages: {
     required: string;
+    min?: string;
+    max?: string;
+}, options?: {
+    min?: number;
+    max?: number;
 }) => yup.NumberSchema<number, yup.AnyObject, undefined, "">;
 export declare const phoneRequired: (messages: {
     required: string;
@@ -34,8 +44,8 @@ export declare const fileDocumentRequired: (messages: {
 export declare const dateRequired: (messages: {
     required: string;
     invalid: string;
-    min?: string;
-    max?: string;
+    minDate?: string;
+    maxDate?: string;
 }, options?: {
     format?: "mm/yyyy" | "dd/mm/yyyy";
     maxDate?: Date;
@@ -45,3 +55,11 @@ export declare const nifRequired: (messages: {
     required: string;
     invalid: string;
 }) => yup.StringSchema<string, yup.AnyObject, undefined, "">;
+export declare const arrayRequired: (messages: {
+    required: string;
+    minLength?: string;
+    maxLength?: string;
+}, options?: {
+    minLength?: number;
+    maxLength?: number;
+}) => yup.ArraySchema<any[] | undefined, yup.AnyObject, undefined, "">;

package/dist/types/utils/getFromUrl.d.ts

@@ -1 +1 @@
-export declare const getFromUrl: (param: string, removeFromUrl?: boolean) => string | undefined;
+export declare const getFromUrl: (searchParam: string, removeFromUrl?: boolean) => string | string[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cja-phoenix",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "scripts": {
     "build:dev": "rimraf dist && vue-tsc && vite build -m development",
     "build:link": "rimraf dist && vue-tsc && vite build -m development && npm link",
@@ -23,9 +23,9 @@
   },
   "devDependencies": {
     "@gtm-support/vue-gtm": "^2.0.0",
+    "@histoire/plugin-vue": "^0.16.1",
     "@types/node": "^17.0.14",
     "@vitejs/plugin-vue": "^2.0.0",
-    "@histoire/plugin-vue": "^0.16.1",
     "histoire": "^0.16.2",
     "intl-tel-input": "^17.0.19",
     "maska": "^2.1.7",

package/src/components/composite/CheckoutCrossSell.vue

@@ -15,8 +15,8 @@
             :image="vert.image"
             :label="vert.label"
             :description="vert.description"
-            :model-value="crossSellData[vert.control]"
-            @update:model-value="(v) => (crossSellData[vert.control] = v)"
+            :model-value="crossSellData[vert.value]"
+            @update:model-value="(v) => (crossSellData[vert.value] = v)"
           />
         </div>
 
@@ -72,8 +72,8 @@
               :image="vert.image"
               :label="vert.label"
               :description="vert.description"
-              :model-value="crossSellData[vert.control]"
-              @update:model-value="(v) => (crossSellData[vert.control] = v)"
+              :model-value="crossSellData[vert.value]"
+              @update:model-value="(v) => (crossSellData[vert.value] = v)"
             />
           </div>
         </div>
@@ -136,50 +136,52 @@ const { t, setLocaleMessage } = useI18n({
 
 const step = ref(1);
 
-const crossSellOptions = computed(() => [
-  {
-    class: "all",
-    control: "all",
-    image: process.env.VUE_APP_IMG_URL + "xsell-checkout-cpj.svg",
-    label: t("xsell.checkout.input.all.title"),
-    description: t("xsell.checkout.input.all.description"),
-  },
-  {
-    class: "hl",
-    control: "mg",
-    image: process.env.VUE_APP_IMG_URL + "xsell-checkout-hl.svg",
-    label: t("xsell.checkout.input.hl.title"),
-    description: t("xsell.checkout.input.hl.description"),
-  },
-  {
-    class: "pl",
-    control: "pl",
-    image: process.env.VUE_APP_IMG_URL + "xsell-checkout-pl.svg",
-    label: t("xsell.checkout.input.pl.title"),
-    description: t("xsell.checkout.input.pl.description"),
-  },
-  {
-    class: "cc",
-    control: "cc",
-    image: process.env.VUE_APP_IMG_URL + "xsell-checkout-cc.svg",
-    label: t("xsell.checkout.input.cc.title"),
-    description: t("xsell.checkout.input.cc.description"),
-  },
-  {
-    class: "pl",
-    control: "csc",
-    image: process.env.VUE_APP_IMG_URL + "xsell-checkout-csc.svg",
-    label: t("xsell.checkout.input.csc.title"),
-    description: t("xsell.checkout.input.csc.description"),
-  },
-  {
-    class: "ci",
-    control: "ci",
-    image: process.env.VUE_APP_IMG_URL + "xsell-checkout-in.svg",
-    label: t("xsell.checkout.input.ci.title"),
-    description: t("xsell.checkout.input.ci.description"),
-  },
-]);
+const crossSellOptions = computed(() =>
+  [
+    {
+      class: "all",
+      value: "all",
+      image: process.env.VUE_APP_IMG_URL + "xsell-checkout-cpj.svg",
+      label: t("xsell.checkout.input.all.title"),
+      description: t("xsell.checkout.input.all.description"),
+    },
+    {
+      class: "hl",
+      value: "mg",
+      image: process.env.VUE_APP_IMG_URL + "xsell-checkout-hl.svg",
+      label: t("xsell.checkout.input.hl.title"),
+      description: t("xsell.checkout.input.hl.description"),
+    },
+    {
+      class: "pl",
+      value: "pl",
+      image: process.env.VUE_APP_IMG_URL + "xsell-checkout-pl.svg",
+      label: t("xsell.checkout.input.pl.title"),
+      description: t("xsell.checkout.input.pl.description"),
+    },
+    {
+      class: "cc",
+      value: "cc",
+      image: process.env.VUE_APP_IMG_URL + "xsell-checkout-cc.svg",
+      label: t("xsell.checkout.input.cc.title"),
+      description: t("xsell.checkout.input.cc.description"),
+    },
+    {
+      class: "pl",
+      value: "csc",
+      image: process.env.VUE_APP_IMG_URL + "xsell-checkout-csc.svg",
+      label: t("xsell.checkout.input.csc.title"),
+      description: t("xsell.checkout.input.csc.description"),
+    },
+    {
+      class: "ci",
+      value: "ci",
+      image: process.env.VUE_APP_IMG_URL + "xsell-checkout-in.svg",
+      label: t("xsell.checkout.input.ci.title"),
+      description: t("xsell.checkout.input.ci.description"),
+    },
+  ].filter((o) => o.value != props.activeVertical)
+);
 
 const crossSellData = ref({
   all: true,
@@ -308,10 +310,6 @@ const submit = () => {
 
 <style lang="scss" scoped>
 .cross-sell-container {
-  padding-top: 40px;
-  margin-top: 40px;
-  border-top: 1px solid #dedede;
-
   .cross-sell-wrapper {
     max-width: 1050px;
     margin: 0 auto;

package/src/components/structural/CjaButton.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Scaffold } from "..";
+import Scaffold from "./Scaffold.vue";
 
 withDefaults(
   defineProps<{

package/src/stories/CjaButton.story.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { CjaButton, TextInput } from "../components";
+import CjaButton from "../components/structural/CjaButton.vue";
+import TextInput from "../components/forms/TextInput.vue";
 
 const initState = () => ({
   content: "Button Text",

package/src/stories/ContentTabs.story.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ContentTabs } from "../components";
+import ContentTabs from "../components/structural/ContentTabs.vue";
 
 const initState = () => ({
   tabs: ["Tab 1", "Tab 2"],

package/src/stories/Modal.story.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import Modal from "../components/structural/Modal.vue";
-import { CjaButton } from "../components";
+import CjaButton from "../components/structural/CjaButton.vue";
 
 const modal = ref();
 

package/src/utils/cjaStore.ts

@@ -17,10 +17,13 @@ export const getCjaStore = (options: {
     ...options.state,
   }),
   actions: {
-    changeJourneyID(payload) {
-      this["journeyId"] = payload;
+    changeJourneyID(journeyId: string): void {
+      this.journeyId = journeyId;
     },
-    changeData(payload: { key: string; value: any }, target: string = "data") {
+    changeData(
+      payload: { key: string; value: any },
+      target: string = "data"
+    ): void {
       const field = this[target][payload.key];
 
       if (field) {
@@ -33,10 +36,10 @@ export const getCjaStore = (options: {
 
           if (field.options) {
             field.label = Array.isArray(field.value)
-              ? payload.value.map(
-                  (v) => field.options.find((opt) => opt.value == v)?.label
+              ? field.value.map(
+                  (v) => field.options.find((k) => k.value == v)?.label
                 )
-              : field.options.find((k) => k.value == payload.value)?.label;
+              : field.options.find((k) => k.value == field.value)?.label;
           }
         } else {
           field.value = payload.value;

package/src/utils/formValidations.ts

@@ -1,7 +1,24 @@
 import * as yup from "yup";
 
-export const stringRequired = (messages: { required: string }) =>
-  yup.string().typeError(messages.required).required(messages.required);
+export const stringRequired = (
+  messages: { required: string; minLength?: string; maxLength?: string },
+  options?: { minLength?: number; maxLength?: number }
+) => {
+  let validation = yup
+    .string()
+    .typeError(messages.required)
+    .required(messages.required);
+
+  if (options?.minLength && messages.minLength) {
+    validation = validation.min(options.minLength, messages.minLength);
+  }
+
+  if (options?.maxLength && messages.maxLength) {
+    validation = validation.min(options.maxLength, messages.maxLength);
+  }
+
+  return validation;
+};
 
 export const emailRequired = (messages: { required: string; email: string }) =>
   yup
@@ -10,8 +27,28 @@ export const emailRequired = (messages: { required: string; email: string }) =>
     .required(messages.required)
     .email(messages.email);
 
-export const numberRequired = (messages: { required: string }) =>
-  yup.number().typeError(messages.required).required(messages.required);
+export const numberRequired = (
+  messages: { required: string; min?: string; max?: string },
+  options?: {
+    min?: number;
+    max?: number;
+  }
+) => {
+  let validation = yup
+    .number()
+    .typeError(messages.required)
+    .required(messages.required);
+
+  if (options?.min && messages.min) {
+    validation = validation.min(options.min, messages.min);
+  }
+
+  if (options?.max && messages.max) {
+    validation = validation.max(options.max, messages.max);
+  }
+
+  return validation;
+};
 
 export const phoneRequired = (messages: { required: string; phone: string }) =>
   yup
@@ -54,8 +91,8 @@ export const dateRequired = (
   messages: {
     required: string;
     invalid: string;
-    min?: string;
-    max?: string;
+    minDate?: string;
+    maxDate?: string;
   },
   options?: {
     format?: "mm/yyyy" | "dd/mm/yyyy";
@@ -85,12 +122,12 @@ export const dateRequired = (
         context.originalValue.split("/")[yearPosition].length == 4
     );
 
-  if (options?.minDate) {
-    validation = validation.min(options.minDate, messages.min);
+  if (options?.minDate && messages.minDate) {
+    validation = validation.min(options.minDate, messages.minDate);
   }
 
-  if (options?.maxDate) {
-    validation = validation.max(options.maxDate, messages.max);
+  if (options?.maxDate && messages.maxDate) {
+    validation = validation.max(options.maxDate, messages.maxDate);
   }
 
   return validation;
@@ -117,3 +154,23 @@ export const nifRequired = (messages: { required: string; invalid: string }) =>
         11;
       return Number(nif[8]) == (mod == 0 || mod == 1 ? 0 : 11 - mod);
     });
+
+export const arrayRequired = (
+  messages: { required: string; minLength?: string; maxLength?: string },
+  options?: { minLength?: number; maxLength?: number }
+) => {
+  let validation = yup
+    .array()
+    .typeError(messages.required)
+    .min(1, messages.required);
+
+  if (options?.minLength && messages.minLength) {
+    validation = validation.min(options.minLength, messages.minLength);
+  }
+
+  if (options?.maxLength && messages.maxLength) {
+    validation = validation.min(options.maxLength, messages.maxLength);
+  }
+
+  return validation;
+};

package/src/utils/getFromUrl.ts

@@ -1,17 +1,25 @@
-export const getFromUrl = (param: string, removeFromUrl?: boolean) => {
+export const getFromUrl = (searchParam: string, removeFromUrl?: boolean) => {
   const url = new URL(window.location.href);
 
-  return url.searchParams.has(param)
+  return url.searchParams.has(searchParam)
     ? (() => {
-        //@ts-ignore
-        const returnParam = decodeURIComponent(url.searchParams.get(param));
+        const param = url.searchParams
+          .getAll(searchParam)
+          .map((p) => decodeURIComponent(p));
 
         if (removeFromUrl) {
-          url.searchParams.delete(param);
+          url.searchParams.delete(searchParam);
           history.replaceState(history.state, "", url.toString());
         }
 
-        return returnParam;
+        switch (param.length) {
+          case 0:
+            return undefined;
+          case 1:
+            return param[0];
+          default:
+            return param;
+        }
       })()
     : undefined;
 };