@cnamts/synapse 1.0.9 → 1.0.11

package/src/components/Amelipro/AmeliproPatientLogged/types.d.ts

@@ -0,0 +1,49 @@
+import { SelectItem } from '../AmeliproSelect/types'
+
+export interface IPatientInfos {
+	birthdate?: string
+	center?: string
+	exemptionDialogBtnText?: string
+	firstName?: string
+	name?: string
+	nir?: string
+	rank?: string
+	fund?: string
+	fundTooltip?: string
+	doctor?: string
+	doctorTooltip?: string
+	exemption?: string
+	exemptionLine2?: string
+	plan?: string
+	rights?: string
+	c2s?: string
+	c2sTooltip?: string
+	ame?: string
+	mtm?: string
+	selectItems?: SelectItem[]
+}
+
+export interface IPatientInfoLabels {
+	ame: string
+	birthdate: string
+	btnLabel: string
+	center: string
+	c2s: string
+	doctor: string
+	doctorDialogBtn: string
+	doctorDialogTitle: string
+	exemption: string
+	exemptionDialogTitle: string
+	exemptionLine2: string
+	firstName: string
+	fund: string
+	fundDialogTitle: string
+	moreInfo: string
+	mtm: string
+	name: string
+	nir: string
+	plan: string
+	rank: string
+	rights: string
+	selectLabel: string
+}

package/src/components/Amelipro/AmeliproPatientLogin/AmeliproPatientLogin.mdx

@@ -0,0 +1,18 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproPatientLoginStories from './AmeliproPatientLogin.stories';
+
+<Meta of={AmeliproPatientLoginStories} />
+
+# AmeliproPatientLogin
+
+L’élément `AmeliproPatientLogin` est utilisé pour afficher le formulaire d'identification patient
+
+<Canvas of={AmeliproPatientLoginStories.Default}  />
+
+## API
+
+<Controls of={AmeliproPatientLoginStories.Default} />
+
+
+

package/src/components/Amelipro/AmeliproPatientLogin/AmeliproPatientLogin.stories.ts

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import AmeliproPatientLogin from './AmeliproPatientLogin.vue'
+import { ref, watch } from 'vue'
+
+const meta = {
+	argTypes: {
+		'autoCompleteCardItems': {
+			description: 'Liste des items pour le champ d\'autocomplétion',
+			table: {
+				type: {
+					detail: `[
+						{
+							disabled?: boolean
+							title: string
+							value: string | object
+						}
+					]`,
+					summary: 'AutoCompleteItem',
+				},
+			},
+		},
+		'click:vital-card': { description: 'Evénement émis au click sur le bouton "Lire carte"' },
+		'click:vital-card-app': { description: 'Evénement émis au click sur le bouton "Lire appli carte vitale"' },
+		'disableBtnAppVitalCard': { description: 'Désactive le bouton "Lire appli carte vitale"' },
+		'disableBtnNir': { description: 'Désactive le bouton "Valider NIR"' },
+		'disableBtnVitalCard': { description: 'Désactive le bouton "Lire carte"' },
+		'errorMessageAppVitalCard': { description: 'Message d\'erreur personnalisé concernant la partie Application carte vitale' },
+		'errorMessageNir': { description: 'Message d\'erreur personnalisé concernant la partie NIR' },
+		'errorMessageVitalCard': { description: 'Message d\'erreur personnalisé concernant la partie carte vitale' },
+		'loading': { description: 'Passe le composant dans un affichage en chargement' },
+		'messageAppVitalCard': { description: 'Slot pour un message personnalisé concernant la partie application carte vitale' },
+		'messageNir': { description: 'Slot pour un message personnalisé concernant la partie NIR' },
+		'messageVitalCard': { description: 'Slot pour un message personnalisé concernant la partie carte vitale' },
+		'modelValue': {
+			description: 'Valeur des champs du formulaire et le la modale pour la version mobile',
+			table: {
+				type: {
+					detail: `{
+						dialog: boolean
+						formValue?: {
+							fieldValue?: string | number
+							autoCompleteValue?: AutoCompleteItem | string
+						}
+					}`,
+					summary: 'IPatientLogin',
+				},
+			},
+		},
+		'noAppVitalCard': { description: 'Masque la partie Application carte vitale' },
+		'noNir': { description: 'Masque la partie NIR' },
+		'noVitalCard': { description: 'Masque la partie Carte vitale' },
+		'rulesAutoCompleteCard': { description: 'Règles appliquées au champ d\'autocomplétion' },
+		'rulesNir': { description: 'Règles appliquées au champ NIR' },
+		'submit:nir': { description: 'Evénement émis au click sur le bouton "Valider Le NIR" ou sur la touche "Entrée" dans le champ NIR' },
+		'uniqueId': { description: 'Identifiant unique du composant.' },
+		'update:model-value': { description: 'Evénement émis au lors de la mise à jour du v-model' },
+	},
+	component: AmeliproPatientLogin,
+	title: 'Composants/Amelipro/IDPA/AmeliproPatientLogin',
+} as Meta<typeof AmeliproPatientLogin>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproPatientLogin>
+
+export const Default: Story = {
+	args: {
+		'autoCompleteCardItems': [
+			{
+				title: 'Carte 1',
+				value: '1',
+			},
+			{
+				title: 'Carte 2',
+				value: '2',
+			},
+			{
+				title: 'Carte 3',
+				value: '3',
+			},
+		],
+		'modelValue': {
+			dialog: false,
+			formValue: {},
+		},
+		'uniqueId': 'test-id',
+		'onClick:vital-card': fn(),
+		'onClick:vital-card-app': fn(),
+		'onSubmit:nir': fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<AmeliproPatientLogin
+	v-model="myModel"
+	:autocomplete-card-items="autocompleteCardItems"
+	unique-id="test-id"
+/>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproPatientLogin } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const autoCompleteCardItems = [
+		{
+			title: 'Carte 1',
+			value: '1',
+		},
+		{
+			title: 'Carte 2',
+			value: '2',
+		},
+		{
+			title: 'Carte 3',
+			value: '3',
+		},
+	];
+
+	const myModel = ref({
+		dialog: false,
+		formValue: {},
+	})
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproPatientLogin },
+		setup() {
+			const model = ref(args.modelValue)
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<AmeliproPatientLogin
+	v-bind="args"
+	v-model="model"
+	@click:vital-card="args['onClick:vital-card']"
+	@click:vital-card-app="args['onClick:vital-card-app']"
+	@submit:nir="args['onSubmit:nir']"
+/>`,
+	}),
+}

package/src/components/Amelipro/AmeliproPatientLogin/AmeliproPatientLogin.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+	import { type PropType, computed } from 'vue'
+	import type { AutoCompleteItem } from '../AmeliproAutoCompleteField/types'
+	import type { IPatientLogin } from './types'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproCard from '../AmeliproCard/AmeliproCard.vue'
+	import AmeliproDialog from '../AmeliproDialog/AmeliproDialog.vue'
+	import AmeliproPatientLoginForm from './AmeliproPatientLoginForm/AmeliproPatientLoginForm.vue'
+	import { useDisplay } from 'vuetify'
+	import type { ValidationRule } from '@/utils/rules/types'
+
+	const props = defineProps({
+		autoCompleteCardItems: {
+			type: Array as PropType<AutoCompleteItem[]>,
+			default: undefined,
+		},
+		disableBtnAppVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		disableBtnNir: {
+			type: Boolean,
+			default: false,
+		},
+		disableBtnVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessageAppVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessageNir: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessageVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Object as PropType<IPatientLogin>,
+			default: () => ({ dialog: false, formValue: { fieldValue: undefined, autoCompleteValue: undefined } }),
+		},
+		noAppVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		noNir: {
+			type: Boolean,
+			default: false,
+		},
+		noVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		rulesAutoCompleteCard: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		rulesNir: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const { mdAndUp } = useDisplay()
+	const emit = defineEmits(['click:vital-card', 'click:vital-card-app', 'submit:nir', 'update:model-value'])
+
+	const componentValue = computed({
+		get: (): IPatientLogin => props.modelValue,
+		set: (newValue: IPatientLogin): void => {
+			emit('update:model-value', newValue, `${props.uniqueId}`)
+		},
+	})
+
+	const clickVitalCard = () => emit('click:vital-card', props.modelValue, `${props.uniqueId}-form-vital-card-btn`)
+	const clickVitalCardApp = () => emit('click:vital-card-app', props.modelValue, `${props.uniqueId}-form-vital-card-app-btn`)
+	const submitNir = () => emit('submit:nir', props.modelValue, `${props.uniqueId}-form-nir-btn`)
+</script>
+
+<template>
+	<div :id="uniqueId">
+		<AmeliproCard no-card-header>
+			<h2
+				:id="`${uniqueId}-title`"
+				class="ident-title "
+			>
+				Identification patient
+			</h2>
+
+			<AmeliproPatientLoginForm
+				v-if="mdAndUp"
+				v-model="componentValue.formValue"
+				:auto-complete-card-items="autoCompleteCardItems"
+				:disable-btn-app-vital-card="disableBtnAppVitalCard"
+				:disable-btn-nir="disableBtnNir"
+				:disable-btn-vital-card="disableBtnVitalCard"
+				:error-message-app-vital-card="errorMessageAppVitalCard"
+				:error-message-nir="errorMessageNir"
+				:error-message-vital-card="errorMessageVitalCard"
+				:loading="loading"
+				:no-app-vital-card="noAppVitalCard"
+				:no-nir="noNir"
+				:no-vital-card="noVitalCard"
+				:rules-auto-complete-card="rulesAutoCompleteCard"
+				:rules-nir="rulesNir"
+				:unique-id="`${uniqueId}-form`"
+				@click:vital-card="clickVitalCard"
+				@click:vital-card-app="clickVitalCardApp"
+				@submit:nir="submitNir"
+			>
+				<template
+					v-if="$slots.messageAppVitalCard"
+					#messageAppVitalCard
+				>
+					<slot name="messageAppVitalCard" />
+				</template>
+
+				<template
+					v-if="$slots.messageNir"
+					#messageNir
+				>
+					<slot name="messageNir" />
+				</template>
+
+				<template
+					v-if="$slots.messageVitalCard"
+					#messageVitalCard
+				>
+					<slot name="messageVitalCard" />
+				</template>
+			</AmeliproPatientLoginForm>
+
+			<div
+				v-if="!mdAndUp"
+				class="mt-6 w-100"
+			>
+				<AmeliproBtn
+					class="w-100"
+					:unique-id="`${uniqueId}-dialog-btn`"
+					@click="componentValue.dialog = true"
+				>
+					Identifier
+				</AmeliproBtn>
+
+				<AmeliproDialog
+					v-model="componentValue.dialog"
+					:labelledby="`${uniqueId}-dialog-title`"
+					:unique-id="`${uniqueId}-dialog`"
+				>
+					<template #header>
+						<h2
+							:id="`${uniqueId}-dialog-title`"
+							class="ma-0 text-h4"
+						>
+							Identification patient
+						</h2>
+					</template>
+
+					<template #default>
+						<AmeliproPatientLoginForm
+							v-model="componentValue.formValue"
+							:auto-complete-card-items="autoCompleteCardItems"
+							:disable-btn-app-vital-card="disableBtnAppVitalCard"
+							:disable-btn-nir="disableBtnNir"
+							:disable-btn-vital-card="disableBtnVitalCard"
+							:error-message-app-vital-card="errorMessageAppVitalCard"
+							:error-message-nir="errorMessageNir"
+							:error-message-vital-card="errorMessageVitalCard"
+							:loading="loading"
+							:no-app-vital-card="noAppVitalCard"
+							:no-nir="noNir"
+							:no-vital-card="noVitalCard"
+							:rules-auto-complete-card="rulesAutoCompleteCard"
+							:rules-nir="rulesNir"
+							:unique-id="`${uniqueId}-form`"
+							@click:vital-card="clickVitalCard"
+							@click:vital-card-app="clickVitalCardApp"
+							@submit:nir="submitNir"
+						>
+							<template
+								v-if="$slots.messageAppVitalCard"
+								#messageAppVitalCard
+							>
+								<slot name="messageAppVitalCard" />
+							</template>
+
+							<template
+								v-if="$slots.messageNir"
+								#messageNir
+							>
+								<slot name="messageNir" />
+							</template>
+
+							<template
+								v-if="$slots.messageVitalCard"
+								#messageVitalCard
+							>
+								<slot name="messageVitalCard" />
+							</template>
+						</AmeliproPatientLoginForm>
+					</template>
+				</AmeliproDialog>
+			</div>
+		</AmeliproCard>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.ident-title {
+	font-size: apTokens.$font-size-xs !important;
+	text-align: center;
+	font-weight: apTokens.$ap-font-weight-bold;
+	text-transform: uppercase;
+
+	@media #{apTokens.$media-up-md} {
+		text-align: left;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproPatientLogin/AmeliproPatientLoginForm/AmeliproPatientLoginForm.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+	import { type PropType, computed } from 'vue'
+	import AmeliproAutoCompleteField from '../../AmeliproAutoCompleteField/AmeliproAutoCompleteField.vue'
+	import AmeliproBtn from '../../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproMessage from '../../AmeliproMessage/AmeliproMessage.vue'
+	import AmeliproTextField from '../../AmeliproTextField/AmeliproTextField.vue'
+	import type { AutoCompleteItem } from '../../AmeliproAutoCompleteField/types'
+	import type { IPatientLoginForm } from './types'
+	import type { ValidationRule } from '@/utils/rules/types'
+	import { vMaska } from 'maska/vue'
+	import imgVital from '@/assets/amelipro/img/idpa/carte-vitale.svg'
+	import apcvLogo from '@/assets/amelipro/img/idpa/apcv_logo.svg'
+
+	const props = defineProps({
+		autoCompleteCardItems: {
+			type: Array as PropType<AutoCompleteItem[]>,
+			default: undefined,
+		},
+		disableBtnAppVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		disableBtnNir: {
+			type: Boolean,
+			default: false,
+		},
+		disableBtnVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessageAppVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessageNir: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessageVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Object as PropType<IPatientLoginForm>,
+			default: () => ({ fieldValue: undefined, autoCompleteValue: undefined }),
+		},
+		noAppVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		noNir: {
+			type: Boolean,
+			default: false,
+		},
+		noVitalCard: {
+			type: Boolean,
+			default: false,
+		},
+		rulesAutoCompleteCard: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		rulesNir: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const emit = defineEmits(['click:vital-card', 'click:vital-card-app', 'submit:nir', 'update:model-value'])
+
+	const currentValue = computed({
+		get: (): IPatientLoginForm => props.modelValue,
+		set: (newValue: IPatientLoginForm): void => {
+			emit('update:model-value', newValue, props.uniqueId)
+		},
+	})
+
+	const vitalCardBtnText = computed(() => (props.autoCompleteCardItems ? 'Lire carte virtuelle' : 'Lire la carte'))
+
+	const clickVitalCard = () => emit('click:vital-card', `${props.uniqueId}-vital-card-btn`)
+	const clickVitalCardApp = () => emit('click:vital-card-app', `${props.uniqueId}-vital-card-app-btn`)
+	const submitNir = () => emit('submit:nir', `${props.uniqueId}-nir-btn`)
+
+	const mask = {
+		tokens: {
+			'#': { pattern: /\d/ },
+			'X': { pattern: /[0-9a-z]/i },
+		},
+		mask: '#####XX######',
+	}
+</script>
+
+<template>
+	<div aria-live="polite">
+		<form v-if="!loading">
+			<div
+				v-if="!noVitalCard"
+				class="mt-4"
+			>
+				<img
+					alt="Carte Vitale"
+					class="mx-auto mb-6 d-block"
+					:src="imgVital"
+				>
+
+				<AmeliproAutoCompleteField
+					v-if="autoCompleteCardItems"
+					v-model="currentValue.autoCompleteValue"
+					:items="autoCompleteCardItems"
+					label="Sélectionnez une carte :"
+					:rules="rulesAutoCompleteCard"
+					:unique-id="`${uniqueId}-select-card`"
+				/>
+
+				<AmeliproBtn
+					class="w-100"
+					:disabled="disableBtnVitalCard"
+					:unique-id="`${uniqueId}-vital-card-btn`"
+					@click="clickVitalCard"
+				>
+					{{ vitalCardBtnText }}
+				</AmeliproBtn>
+
+				<AmeliproMessage
+					v-if="$slots.messageVitalCard"
+					align-start
+					class="w-100 mt-2"
+					text
+					:type="errorMessageVitalCard ? 'error' : 'info'"
+				>
+					<slot name="messageVitalCard" />
+				</AmeliproMessage>
+			</div>
+
+			<div
+				v-if="!noAppVitalCard"
+				class="mt-4"
+			>
+				<img
+					alt=""
+					class="mx-auto mb-6 d-block"
+					:src="apcvLogo"
+				>
+
+				<AmeliproBtn
+					class="w-100"
+					:disabled="disableBtnAppVitalCard"
+					:unique-id="`${uniqueId}-vital-card-app-btn`"
+					@click="clickVitalCardApp"
+				>
+					Lire appli carte vitale
+				</AmeliproBtn>
+
+				<AmeliproMessage
+					v-if="$slots.messageAppVitalCard"
+					align-start
+					class="w-100 mt-2"
+					text
+					:type="errorMessageAppVitalCard ? 'error' : 'info'"
+				>
+					<slot name="messageAppVitalCard" />
+				</AmeliproMessage>
+			</div>
+
+			<div
+				v-if="!noNir"
+				class="mt-4"
+			>
+				<AmeliproTextField
+					v-model="currentValue.fieldValue"
+					v-maska="mask"
+					aria-required
+					classes="mt-6"
+					clearable
+					:counter="13"
+					label="Saisir son NIR :"
+					:rules="rulesNir"
+					:unique-id="`${uniqueId}-nir`"
+					@keypress.enter.prevent="submitNir"
+				/>
+
+				<AmeliproBtn
+					class="w-100"
+					:disabled="disableBtnNir"
+					:unique-id="`${uniqueId}-nir-btn`"
+					@click="submitNir"
+				>
+					Valider le NIR
+				</AmeliproBtn>
+
+				<AmeliproMessage
+					v-if="$slots.messageNir"
+					align-start
+					class="w-100 mt-2"
+					text
+					:type="errorMessageNir ? 'error' : 'info'"
+				>
+					<slot name="messageNir" />
+				</AmeliproMessage>
+			</div>
+		</form>
+
+		<div
+			v-if="loading"
+			aria-busy="true"
+			class="d-block mt-8"
+		>
+			<p class="text-center">
+				<span
+					aria-hidden="true"
+					class="d-block mx-auto my-4"
+				>
+					<span class="loader" />
+				</span>
+				Veuillez patienter pendant le chargement...
+			</p>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.loader {
+	width: 30px;
+	height: 30px;
+	border: 4px solid apTokens.$ap-blue-darken1;
+	border-bottom-color: transparent;
+	border-radius: 50%;
+	display: inline-block;
+	box-sizing: border-box;
+	animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+</style>