integration-web-core--socle 1.4.2

package/cdp-due--customer-space-module-master/src/components/ipn-commons/stepper/steps/personal-data-address/stepPersonalDataAddressConfig.frlm.js

@@ -0,0 +1,31 @@
+import {
+	getAdministrativeIdentifierFields,
+	getProfessionalAccountCreationFields as getProfessionalFields,
+	professionalContext,
+} from '@/config/fields/professionalConfig.frlm';
+import { programTypes } from '@/constants/programTypes';
+import { getAdministrativeIdentifier } from '@/domains/administrative-identifier/administrativeIdentifier.rules';
+
+export const getLoyaltyProgramFields = (
+	program,
+	siretInfoTexts,
+	formValues,
+	professionalOrganisation,
+) => {
+	const isProgramForProsOnly =
+		program &&
+		program.customerTypes.length === 1 &&
+		program.customerTypes.includes(programTypes.PROFESSIONAL);
+	const hideCountry = !!getAdministrativeIdentifier(professionalOrganisation);
+
+	return isProgramForProsOnly
+		? [
+				...getProfessionalFields(professionalContext.LOYALTY, formValues, hideCountry).data,
+				getAdministrativeIdentifierFields(
+					professionalContext.LOYALTY,
+					siretInfoTexts,
+					formValues,
+				).data,
+		  ]
+		: [];
+};

package/cdp-due--customer-space-module-master/src/components/ipn-commons/stepper/steps/stepAdditionalInformation/useAdditionalInformation.js

@@ -0,0 +1,141 @@
+import { computed } from 'vue';
+
+import InputControl from '@/components/ipn-form/controls/input-control/InputControl.vue';
+import RadioControl from '@/components/ipn-form/controls/radio-control/RadioControl.vue';
+import SelectControl from '@/components/ipn-form/controls/SelectControl.vue';
+import { validations } from '@/components/ipn-form/validations';
+import useCustomerValues from '@/composables/useCustomerValues';
+import { tc } from '@/i18n';
+import { BU_CODES, getFromBuCode } from '@/utils/getFromBuCode';
+
+const inhabitantTypeConfig = {
+	name: 'inhabitantType',
+	legend: tc('customer-space-adherent-rental-resident_rental-label--text'),
+	control: RadioControl,
+	flexyClass: 'full',
+	isButton: true,
+	required: false,
+	options: [],
+	// TODO refacto :see further comment for configuration
+	// get index() {
+	// 	return config.ADDTIONAL_STEP.findIndex((el) => el.name === this.name);
+	// },
+};
+
+const houseTypeConfig = {
+	name: 'houseType',
+	legend: tc('customer-space-adherent-rental-resident_dwelling-label--text'),
+	control: RadioControl,
+	flexyClass: 'full',
+	isButton: true,
+	required: false,
+	options: [],
+};
+
+const hasGardenConfig = {
+	name: 'hasGarden',
+	legend: tc('customer-space-adherent-rental-resident_garder-label--text'),
+	control: RadioControl,
+	flexyClass: 'full',
+	isButton: true,
+	required: false,
+	options: [
+		{
+			label: tc('customer-space-item-yes'),
+			value: true,
+		},
+		{
+			label: tc('customer-space-item-no'),
+			value: false,
+		},
+	],
+};
+
+const birthdayConfig = {
+	name: 'birthDate',
+	legend: tc('customer-space_account-profile_form_birthday--label'),
+	control: InputControl,
+	flexyClass: 'full 1of2@from-l',
+	placeholder: tc('customer-space_account-profile_form_birthday--placeholder'),
+	validate: validations.validateBirthday,
+};
+
+const maritalStatusConfig = {
+	name: 'maritalStatus',
+	legend: tc('customer-space_account-profile_form_marital-status--label'),
+	control: SelectControl,
+	flexyClass: 'full 1of2@from-l',
+	options: [],
+	placeholder: tc('customer-space_account-profile_form_marital-status--placeholder'),
+};
+
+const nbOfFamilyMembersConfig = {
+	name: 'nbOfFamilyMembers',
+	legend: tc('customer-space_account-profile_form_nb-of-family-members--label'),
+	control: SelectControl,
+	options: [],
+	flexyClass: 'full 1of2@from-l',
+	placeholder: tc('customer-space_account-profile_form_nb-of-family-members--placeholder'),
+};
+
+export function useAdditionalInformation() {
+	const customerValues = useCustomerValues();
+
+	const inhabitantTypeField = computed(() => ({
+		...inhabitantTypeConfig,
+		options: (customerValues.value?.addresses.habitat.inhabitantType || [])
+			.map(({ text, value }) => ({ label: text, value }))
+			// TODO hotfix, remove to use full options
+			.filter(({ value }) => value === 'OWNER' || value === 'TENANT'),
+	}));
+
+	const houseTypeField = computed(() => ({
+		...houseTypeConfig,
+		options: (customerValues.value?.addresses.habitat.houseType || [])
+			.map(({ text, value }) => ({ label: text, value }))
+			// TODO hotfix, remove to use full options
+			.filter(({ value }) => value === 'HOUSE' || value === 'APARTMENT'),
+	}));
+
+	const maritalStatusField = computed(() => ({
+		...maritalStatusConfig,
+		options: customerValues.value?.inhabitant.civilStatus || [],
+	}));
+
+	const nbOfFamilyMembersField = computed(() => ({
+		...nbOfFamilyMembersConfig,
+		options: customerValues.value?.inhabitant.nbOfFamilyMembers || [],
+	}));
+
+	/*
+on imagine ADDTIONAL_STEPS = inhabitantType, houseType, hasGarden, => avec un matching via le name.
+on devrait aussi ajouter une validation au runtime sur la value de ADDTIONAL_STEPS ( pour catcher les mauvaises config asap.)
+on assigne à chaque object existant un index,
+on filtre ensuite sur les index >= 0.
+on trie ensuite par index
+on a notre tableau final.
+});
+
+*/
+
+	const fields = getFromBuCode({
+		[BU_CODES.DEFAULT]: computed(() => [
+			inhabitantTypeField.value,
+			houseTypeField.value,
+			hasGardenConfig,
+		]),
+		[BU_CODES.FRLM]: computed(() => [
+			inhabitantTypeField.value,
+			houseTypeField.value,
+			hasGardenConfig,
+		]),
+		[BU_CODES.ITLM]: computed(() => [
+			inhabitantTypeField.value,
+			birthdayConfig,
+			maritalStatusField.value,
+			nbOfFamilyMembersField.value,
+		]),
+	});
+
+	return { fields };
+}

package/cdp-due--customer-space-module-master/src/components/ipn-commons/zipCode/ZipCode.vue

@@ -0,0 +1,30 @@
+<script setup>
+	import { computed } from 'vue';
+
+	import useForm from '@/components/ipn-form/composables/useForm';
+	import IpnField from '@/components/ipn-form/IpnField.vue';
+
+	import { useZipCode } from './hook';
+	import { zipCodeConfig } from './zipCodeConfig';
+
+	const emit = defineEmits(['updated']);
+
+	const props = defineProps({
+		attributes: {
+			type: Object,
+			default: zipCodeConfig,
+		},
+	});
+
+	const { domRef, formValues } = useForm();
+
+	const countryCode = computed(() => formValues.value?.countryCode);
+	const zipCode = computed(() => formValues.value?.zipCode);
+	const { config } = useZipCode(props, countryCode, zipCode, emit);
+</script>
+
+<template>
+	<div ref="domRef">
+		<IpnField v-if="!!config" v-bind="config" />
+	</div>
+</template>

package/cdp-due--customer-space-module-master/src/components/ipn-commons/zipCode/hook.js

@@ -0,0 +1,25 @@
+import { computed, watch } from 'vue';
+
+import { validations } from '@/components/ipn-form/validations';
+
+import { zipCodeRules } from './rules';
+
+export const useZipCode = (props, countryCode, zipCode, emit) => {
+	const config = computed(() =>
+		countryCode.value
+			? {
+					...props.attributes,
+					validate: zipCodeRules.getValidation({
+						countryCode: countryCode.value,
+						validate: props.attributes.validate,
+					}),
+			  }
+			: null,
+	);
+
+	watch(zipCode, (newZipCode) => {
+		emit('updated', !validations.zipCodeValidation(newZipCode) ? newZipCode : null);
+	});
+
+	return { config };
+};

package/cdp-due--customer-space-module-master/src/components/ipn-commons/zipCode/rules.js

@@ -0,0 +1,12 @@
+import { COUNTRY_CODE } from '@/constants';
+
+function doNotCheckZipCode() {}
+
+export const zipCodeRules = {
+	getValidation({ countryCode, validate }) {
+		if (countryCode === COUNTRY_CODE) {
+			return validate;
+		}
+		return doNotCheckZipCode;
+	},
+};

package/cdp-due--customer-space-module-master/src/components/ipn-commons/zipCode/zipCodeConfig.js

@@ -0,0 +1,16 @@
+import InputControl from '@/components/ipn-form/controls/input-control/InputControl.vue';
+import { validations } from '@/components/ipn-form/validations';
+import { tc } from '@/i18n';
+import { BU_CODES, getFromBuCode } from '@/utils/getFromBuCode';
+
+export const zipCodeConfig = {
+	name: 'zipCode',
+	label: tc('customer-space_personal-data_account-store_zipcode--label'),
+	control: InputControl,
+	autocomplete: 'postal-code',
+	required: true,
+	mandatory: true,
+	placeholder: tc('customer-space_personal-data_account-addresses_layer-zipCode--placeholder'),
+	validate: validations.zipCodeValidation,
+	mask: getFromBuCode({ [BU_CODES.PTLM]: '####-###', [BU_CODES.DEFAULT]: null }),
+};

package/cdp-due--customer-space-module-master/src/components/ipn-components/HeadingTitle.vue

@@ -0,0 +1,62 @@
+<script>
+	export default {
+		inheritAttrs: false,
+	};
+</script>
+
+<script setup>
+	import MlContainer from '@/components/grid/MlContainer.vue';
+	import MlFlexy from '@/components/grid/MlFlexy.vue';
+	import MLink from '@/components/mozaic/m-link/MLink.vue';
+	import Title from '@/components/Title.vue';
+
+	defineProps({
+		buttonLabel: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: false,
+		},
+	});
+	const emit = defineEmits(['goBack']);
+</script>
+
+<template>
+	<!--
+		TODO: Refacto en composant "GoBackButton"
+	-->
+	<MlContainer class="heading-title" fluid>
+		<MLink
+			icon="ArrowArrowLeft16"
+			icon-position="left"
+			class="layout-header__go-back--button"
+			href="#"
+			v-bind="$attrs"
+			@click="emit('goBack')"
+		>
+			{{ $t(`${buttonLabel}`) }}
+		</MLink>
+
+		<MlFlexy alignment="center" space-around>
+			<Title v-if="title" centered>
+				{{ $t(`${title}`) }}
+			</Title>
+		</MlFlexy>
+	</MlContainer>
+</template>
+
+<style lang="scss" scoped>
+	@import 'settings-tools/_all-settings';
+
+	.heading-title {
+		padding: $mu100 auto;
+
+		.app-title {
+			@include set-font-scale('09', 's');
+
+			text-align: center;
+		}
+	}
+</style>

package/cdp-due--customer-space-module-master/src/components/ipn-focus-lock/IpnFocusLock.vue

@@ -0,0 +1,196 @@
+<template>
+	<div>
+		<div
+			v-if="hasLeadingGuards"
+			:tabIndex="disabled ? -1 : 0"
+			:style="hidden"
+			aria-hidden="true"
+		></div>
+
+		<div
+			v-if="hasLeadingGuards"
+			:tabIndex="disabled ? -1 : 1"
+			:style="hidden"
+			aria-hidden="true"
+		></div>
+
+		<div v-bind="groupAttr" data-lock @focusout="onBlur">
+			<slot></slot>
+		</div>
+
+		<div
+			v-if="hasTailingGuards"
+			:tabIndex="disabled ? -1 : 0"
+			:style="hidden"
+			aria-hidden="true"
+		></div>
+	</div>
+</template>
+
+<script>
+	import moveFocusInside, { constants, focusInside, focusIsHidden } from 'focus-lock';
+
+	function deferAction(action) {
+		const setImmediate = window.setImmediate;
+		if (typeof setImmediate !== 'undefined') {
+			setImmediate(action);
+		} else {
+			setTimeout(action, 1);
+		}
+	}
+
+	let lastActiveTrap = 0;
+	let lastActiveFocus = null;
+
+	let focusWasOutsideWindow = false;
+
+	const focusOnBody = () => document && document.activeElement === document.body;
+
+	const isFreeFocus = () => focusOnBody() || focusIsHidden();
+
+	const activateTrap = () => {
+		let result = false;
+		if (lastActiveTrap) {
+			const { observed, onActivation } = lastActiveTrap;
+			if (focusWasOutsideWindow || !isFreeFocus() || !lastActiveFocus) {
+				if (observed && !focusInside(observed)) {
+					onActivation();
+					result = moveFocusInside(observed, lastActiveFocus);
+				}
+				focusWasOutsideWindow = false;
+				lastActiveFocus = document && document.activeElement;
+			}
+		}
+		return result;
+	};
+
+	const reducePropsToState = (propsList) =>
+		propsList.filter(({ disabled }) => !disabled).slice(-1)[0];
+
+	const handleStateChangeOnClient = (trap) => {
+		if (lastActiveTrap !== trap) {
+			lastActiveTrap = null;
+		}
+		lastActiveTrap = trap;
+		if (trap) {
+			activateTrap();
+			deferAction(activateTrap);
+		}
+	};
+
+	let instances = [];
+
+	const emitChange = () => {
+		handleStateChangeOnClient(reducePropsToState(instances));
+	};
+
+	const onTrap = (event) => {
+		if (activateTrap() && event) {
+			// prevent scroll jump
+			event.stopPropagation();
+			event.preventDefault();
+		}
+	};
+
+	const onBlur = () => {
+		deferAction(activateTrap);
+	};
+
+	const onWindowBlur = () => {
+		focusWasOutsideWindow = true;
+	};
+
+	const attachHandler = () => {
+		document.addEventListener('focusin', onTrap, true);
+		document.addEventListener('focusout', onBlur);
+		window.addEventListener('blur', onWindowBlur);
+	};
+
+	const detachHandler = () => {
+		document.removeEventListener('focusin', onTrap, true);
+		document.removeEventListener('focusout', onBlur);
+		window.removeEventListener('blur', onWindowBlur);
+	};
+
+	export default {
+		name: 'Lock',
+		props: {
+			returnFocus: {
+				type: Boolean,
+			},
+			disabled: {
+				type: Boolean,
+			},
+			noFocusGuards: {
+				type: [Boolean, String],
+				default: false,
+			},
+			group: {
+				type: String,
+			},
+		},
+		data() {
+			return {
+				data: {
+					disabled: false,
+					vue: null,
+					observed: null,
+					onActivation: null,
+				},
+				hidden: '',
+				originalFocusedElement: null,
+			};
+		},
+		computed: {
+			groupAttr() {
+				return { [constants.FOCUS_GROUP]: this.group };
+			},
+			hasLeadingGuards() {
+				return this.noFocusGuards !== true;
+			},
+			hasTailingGuards() {
+				return this.hasLeadingGuards && this.noFocusGuards !== 'tail';
+			},
+		},
+		watch: {
+			disabled() {
+				this.data.disabled = this.disabled;
+				emitChange();
+			},
+		},
+
+		mounted() {
+			this.data.vue = this;
+			this.data.observed = this.$el.querySelector('[data-lock]');
+
+			this.data.disabled = this.disabled;
+			this.data.onActivation = () => {
+				this.originalFocusedElement =
+					this.originalFocusedElement || (document && document.activeElement);
+			};
+
+			if (!instances.length) {
+				attachHandler();
+			}
+			instances.push(this.data);
+			emitChange();
+		},
+
+		unmounted() {
+			instances = instances.filter(({ vue }) => vue !== this);
+			if (!instances.length) {
+				detachHandler();
+			}
+			if (this.returnFocus && this.originalFocusedElement && this.originalFocusedElement.focus) {
+				this.originalFocusedElement.focus();
+			}
+			emitChange();
+		},
+
+		methods: {
+			onBlur() {
+				deferAction(emitChange);
+			},
+		},
+	};
+</script>

package/cdp-due--customer-space-module-master/src/components/ipn-form/IpnControl.vue

@@ -0,0 +1,142 @@
+<script setup>
+	import { computed, onUnmounted, watch } from 'vue';
+	import MIcon from '@mozaic-ds/vue-3/src/components/icon/MIcon.vue';
+
+	import useForm from './composables/useForm';
+	import { removeField, setFormError, setFormValue, updateField } from './module/actions';
+	import { getFormError, getFormField, getFormValue } from './module/getters';
+	import { validateField } from './validations';
+
+	const props = defineProps({
+		name: {
+			type: String,
+			required: true,
+		},
+		control: {
+			type: Object,
+			required: true,
+		},
+		required: {
+			type: Boolean,
+			default: null,
+		},
+		validate: {
+			type: Function,
+			default: null,
+		},
+		removePastedSpaces: {
+			type: Boolean,
+			default: false,
+		},
+		isInfoMode: {
+			type: Boolean,
+			default: false,
+		},
+	});
+
+	const emit = defineEmits(['controlChange']);
+
+	const { domRef, formName } = useForm();
+
+	onUnmounted(() => {
+		removeField({ name: formName.value, fieldName: props.name });
+	});
+
+	watch(
+		[formName, () => props.name, () => props.required, () => props.validate],
+		([newFormName, name, required, validate]) => {
+			if (newFormName && name) {
+				updateField({ name: newFormName, field: { name, required, validate } });
+			}
+		},
+		{ immediate: true },
+	);
+
+	const value = computed(() => getFormValue(formName.value, props.name));
+	const error = computed(() => getFormError(formName.value, props.name));
+	const formField = computed(() => getFormField(formName.value, props.name));
+
+	const handleChange = async (val) => {
+		const changeData = {
+			formName: formName.value,
+			fieldName: props.name,
+			value: val,
+		};
+		setFormValue(changeData);
+		emit('controlChange', { data: changeData, element: domRef.value });
+	};
+
+	watch(value, async () =>
+		setFormError({
+			formName: formName.value,
+			fieldName: props.name,
+			error: await validateField(formName.value, props.name),
+		}),
+	);
+
+	watch([value, formField], async ([newValue, newFormField], [prevValue, prevFormField]) => {
+		if (prevFormField && (newFormField !== prevFormField || value.value !== newValue)) {
+			setFormError({
+				formName: formName.value,
+				fieldName: props.name,
+				error: await validateField(formName.value, props.name),
+			});
+		}
+	});
+
+	const isValid = computed(() => !!value.value && (!error.value || !props.required));
+
+	const removeEventSpaces = (event) => {
+		event.preventDefault();
+		const left = event.target.value.substring(0, event.target.selectionStart);
+		const right = event.target.value.substring(
+			event.target.selectionEnd,
+			event.target.value.length,
+		);
+		const pasted = (event.dataTransfer || event.clipboardData).getData('text');
+		const valueWithoutSpaces = (left + pasted + right).replace(/ /g, '');
+
+		handleChange(valueWithoutSpaces);
+	};
+</script>
+
+<template>
+	<div class="field-container">
+		<component
+			:is="control"
+			:id="name"
+			ref="domRef"
+			v-bind="$attrs"
+			:name="name"
+			:value="value"
+			:is-invalid="!!error"
+			:is-valid="isValid"
+			:required="required"
+			@input="handleChange"
+			@paste="removePastedSpaces && removeEventSpaces($event)"
+		>
+			<slot />
+		</component>
+
+		<MIcon
+			v-if="isValid && isInfoMode"
+			name="NotificationInformation24"
+			class="ipn-field__information-icon"
+		/>
+	</div>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings.scss';
+
+	.field-container {
+		position: relative;
+
+		.ipn-field__information-icon {
+			position: absolute;
+			bottom: 12px;
+			right: 6px;
+			color: $color-info-600;
+		}
+	}
+</style>

package/cdp-due--customer-space-module-master/src/components/ipn-form/IpnDatePicker.vue

@@ -0,0 +1,36 @@
+<script setup>
+	defineProps({
+		value: {
+			type: Date,
+			default: null,
+		},
+	});
+
+	const emit = defineEmits(['input']);
+
+	const handleChange = (e) => {
+		e.stopImmediatePropagation();
+		emit('input', e.target.value);
+	};
+</script>
+
+<template>
+	<input
+		v-bind="$attrs"
+		type="date"
+		class="mc-text-input mc-field__input"
+		:value="value"
+		@input="handleChange"
+	/>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings';
+
+	.example {
+		@include set-font-face();
+
+		margin: $mu200 0;
+		padding: 0 $mu200;
+	}
+</style>