integration-web-core--socle 1.4.2

package/cdp-due--customer-space-module-master/src/contents/dashboard/loyalty-card/IpnLoyaltyCardBasic.vue

@@ -0,0 +1,214 @@
+<script setup>
+	import { computed } from 'vue';
+	import MIcon from '@mozaic-ds/vue-3/src/components/icon/MIcon.vue';
+	import MLink from '@mozaic-ds/vue-3/src/components/link/MLink';
+
+	import MlFlexy from '@/components/grid/MlFlexy';
+	import MlFlexyCol from '@/components/grid/MlFlexyCol';
+	import Tooltip from '@/components/Tooltip.vue';
+	import { useCustomerInfo } from '@/composables/useCustomerInfo';
+	import { PROFILE_BACKEND_URI } from '@/constants/index';
+	import IpnLoyaltyCard from '@/contents/dashboard/loyalty-card/IpnLoyaltyCard';
+	import { useGetProgram } from '@/domains/loyalty/program/getProgram.composable';
+	import { composeUrl } from '@/utils/composeUrl';
+	import { formatter } from '@/utils/formatter';
+	import { sendGaEvent } from '@/utils/tracking';
+	import { sendTrackingEvent } from '@/utils/tracking/sendTrackingEvent';
+
+	import { displayBarCodeEvent, loyaltyCardDownloadEvent } from './trackingEvents';
+
+	const { customerInfo } = useCustomerInfo();
+	const { loyaltyProgramHasPoints } = useGetProgram();
+
+	const DOWNLOAD_LOYALTY_CARD = 'customers/[customerNumber]/loyalties/_generateCard';
+
+	const badges = computed(() => customerInfo.value?.loyalty?.badges);
+
+	const downloadLoyaltyCardToPDF = () => composeUrl(PROFILE_BACKEND_URI, DOWNLOAD_LOYALTY_CARD);
+	const onClick = (event) => {
+		sendGaEvent('CS - loyalty', 'download "loyalty card"', '/');
+		sendTrackingEvent(event.target, loyaltyCardDownloadEvent);
+		sendTrackingEvent(event.target, displayBarCodeEvent);
+	};
+
+	const displayRank = computed(
+		() =>
+			customerInfo.value?.loyalty?.rank &&
+			customerInfo.value?.loyalty?.rank.status !== 'INACTIVE',
+	);
+</script>
+
+<template>
+	<IpnLoyaltyCard add-class="ipn-loyalty-card__basic">
+		<template #default>
+			<div class="ipn-loyalty-card__basic__main">
+				<div class="ipn-loyalty-card__basic__main--header">
+					<div>
+						<p
+							:class="`ipn-loyalty-card__basic--title${
+								customerInfo?.loyalty.type.label.length <= 22 ? '' : ' small'
+							}`"
+						>
+							{{ customerInfo?.loyalty.type.label }}
+						</p>
+
+						<p v-if="displayRank">
+							{{ customerInfo?.loyalty.rank?.type?.label }}
+						</p>
+					</div>
+
+					<p
+						v-if="customerInfo?.loyalty.endDate"
+						class="ipn-loyalty-card__basic--expiration mu-ml-100"
+					>
+						{{ $t('customer-space_dashboard_loyalty_house-card-expiration--label') }}
+						{{ formatter(customerInfo?.loyalty.endDate, 'date') }}
+					</p>
+				</div>
+
+				<MlFlexy>
+					<MlFlexyCol modifiers="1of2" class="ipn-loyalty-card__basic--column">
+						<template v-if="badges?.length">
+							<MlFlexy class="ipn-loyalty-card__basic--badges">
+								<div
+									v-for="badge in badges"
+									:key="badge.value"
+									class="ipn-loyalty-card__basic--badge"
+								>
+									<Tooltip
+										:id="badge.value"
+										v-slot="slotProps"
+										:title="
+											$t(
+												'customer-space_dashboard_loyalty_house-card--badge',
+												{
+													label: badge.type.label,
+												},
+											)
+										"
+									>
+										<MIcon
+											class="ipn-loyalty-card__basic--premium"
+											name="Premium32"
+											v-bind="slotProps"
+										/>
+									</Tooltip>
+								</div>
+							</MlFlexy>
+						</template>
+					</MlFlexyCol>
+
+					<MlFlexyCol
+						v-if="loyaltyProgramHasPoints"
+						modifiers="1of2"
+						class="ipn-loyalty-card__basic__main__right-info ipn-loyalty-card__basic--column"
+					>
+						<div>
+							<p class="ipn-loyalty-card__basic--pts">
+								{{
+									$t('customer-space_dashboard_loyalty_house-card-points--label')
+								}}
+							</p>
+
+							<p class="ipn-loyalty-card__basic--points">
+								{{ customerInfo?.loyalty.points }}
+							</p>
+						</div>
+					</MlFlexyCol>
+				</MlFlexy>
+			</div>
+		</template>
+
+		<template #footer>
+			<MLink
+				v-if="customerInfo?.loyalty.hasCardNumber"
+				class="ipn-loyalty-card__basic__link"
+				:href="downloadLoyaltyCardToPDF()"
+				icon="DownloadWeb24"
+				@mouseup="onClick"
+			>
+				{{ $tc('customer-space_dashboard_loyalty_house-card_download--buton') }}
+				<MIcon name="ArrowArrowRight16" class="link--icon" />
+			</MLink>
+		</template>
+	</IpnLoyaltyCard>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings.scss';
+
+	.ipn-loyalty-card__basic {
+		&__main {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: $mu100;
+			height: px-to-rem(176);
+			background: $color-secondary-green-600;
+			color: $color-grey-000;
+			&--header {
+				display: flex;
+				justify-content: space-between;
+			}
+			&__right-info {
+				text-align: right;
+			}
+		}
+		&--column {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			height: 100%;
+		}
+		&--title {
+			@include set-font-scale('07', 'm');
+			@include set-font-weight('semi-bold');
+			&.small {
+				@include set-font-scale('06', 'm');
+			}
+		}
+		&--premium {
+			background-color: $color-grey-000;
+			padding: $mu050;
+			border-radius: 50%;
+			color: $color-primary-01-500;
+			position: relative;
+		}
+		&--badges {
+			column-gap: $mu100;
+			row-gap: $mu050;
+			margin-top: $mu050;
+		}
+		&--badge {
+			width: fit-content;
+			position: relative;
+		}
+		&--duration,
+		&--expiration,
+		&--pts {
+			@include set-font-scale('05', 'm');
+		}
+		&--points {
+			@include set-font-scale('08', 'm');
+			@include set-font-weight('semi-bold');
+		}
+		&__link {
+			position: relative;
+			width: 100%;
+			color: $color-font-darkest;
+			display: flex;
+			justify-content: flex-start !important;
+			padding: $mu075 $mu100;
+			background: $color-grey-000;
+			border-bottom-left-radius: get-border-radius('l');
+			border-bottom-right-radius: get-border-radius('l');
+			border: 2px solid $color-grey-300;
+			border-top: none;
+			.link--icon {
+				position: absolute;
+				right: 0;
+				margin-right: $mu100;
+			}
+		}
+	}
+</style>

package/cdp-due--customer-space-module-master/src/contents/dashboard/loyalty-card/IpnLoyaltyCardPassMaison.vue

@@ -0,0 +1,156 @@
+<script setup>
+	import MLink from '@mozaic-ds/vue-3/src/components/link/MLink';
+
+	import { PROFILE_BACKEND_URI } from '@/constants/index';
+	import IpnLoyaltyCard from '@/contents/dashboard/loyalty-card/IpnLoyaltyCard';
+	import { composeUrl } from '@/utils/composeUrl';
+	import { sendGaEvent } from '@/utils/tracking';
+	import { sendTrackingEvent } from '@/utils/tracking/sendTrackingEvent';
+
+	import { housePassDownloadEvent } from './trackingEvents';
+
+	const DOWNLOAD_LOYALTY_CARD = 'customers/[customerNumber]/loyalties/_generateCard';
+
+	const downloadLoyaltyCardToPDF = () => composeUrl(PROFILE_BACKEND_URI, DOWNLOAD_LOYALTY_CARD);
+	const onClick = (event) => {
+		sendGaEvent('CS - loyalty', 'download "loyalty card"', '/');
+		sendTrackingEvent(event.target, housePassDownloadEvent);
+	};
+</script>
+
+<template>
+	<IpnLoyaltyCard add-class="ipn-loyalty-card__pass">
+		<template #default>
+			<div class="ipn-loyalty-card__pass__main">
+				<!--
+					TODO: remplacer ce svg par ce que nous renvoie le back
+				-->
+				<svg
+					width="114"
+					height="76"
+					viewBox="0 0 114 76"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M42.6177 58.368H31.0657C30.5607 58.3672 30.0767 58.166 29.7199 57.8087C29.3631 57.4513 29.1627 56.9669 29.1627 56.4619V31.2755L46.2627 15.6499L62.6574 30.4547H68.6766L46.2414 10.1992L20.064 34.121L22.8 37.088L25.1377 34.96V56.4467C25.1385 58.0214 25.7642 59.5314 26.8774 60.6451C27.9905 61.7588 29.5002 62.3853 31.0749 62.3869H47.6489L42.6177 58.368Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M35.4008 41.5935V33.6621H37.2947L39.4409 37.6536L41.6084 33.6621H43.4902V41.5935H41.7179V36.7659L40.1584 39.8242H38.7326L37.167 36.7538V41.5813L35.4008 41.5935Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M50.7315 40.6728C50.4184 41.0112 50.0387 41.2813 49.6163 41.466C49.1938 41.6507 48.7378 41.746 48.2767 41.746C47.8157 41.746 47.3596 41.6507 46.9371 41.466C46.5147 41.2813 46.135 41.0112 45.8219 40.6728C45.2139 39.9614 44.9099 38.9481 44.9099 37.6328C44.9099 36.3175 45.2139 35.3041 45.8219 34.5928C46.135 34.2543 46.5147 33.9843 46.9371 33.7996C47.3596 33.6149 47.8157 33.5195 48.2767 33.5195C48.7378 33.5195 49.1938 33.6149 49.6163 33.7996C50.0387 33.9843 50.4184 34.2543 50.7315 34.5928C51.3395 35.3041 51.6435 36.3175 51.6435 37.6328C51.6435 38.9481 51.3395 39.9614 50.7315 40.6728ZM48.2782 40.1894C48.4891 40.1916 48.6975 40.1437 48.8862 40.0496C49.0829 39.9477 49.2519 39.7996 49.3787 39.6179C49.5446 39.3776 49.6585 39.1053 49.7131 38.8184C49.8712 38.0297 49.8712 37.2176 49.7131 36.4289C49.6573 36.1434 49.5435 35.8723 49.3787 35.6325C49.2553 35.4527 49.0888 35.3068 48.8944 35.208C48.7001 35.1092 48.484 35.0608 48.2661 35.067C48.0394 35.0619 47.8152 35.1151 47.6151 35.2216C47.4149 35.328 47.2455 35.4842 47.123 35.675C46.8434 36.0793 46.7066 36.7269 46.7066 37.6237C46.7004 38.0258 46.7381 38.4274 46.819 38.8214C46.8731 39.1074 46.9848 39.3795 47.1474 39.6209C47.2741 39.8026 47.4431 39.9507 47.6398 40.0526C47.8382 40.1499 48.0574 40.1969 48.2782 40.1894Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M52.9811 41.5935V33.6621H54.6257L57.6353 38.4319V33.6621H59.4076V41.5935H57.76L54.7443 36.8115V41.5935H52.9811Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M63.4296 41.5925V33.6612H66.0865C66.8471 33.6279 67.5931 33.8769 68.1811 34.3604C68.4504 34.5988 68.6626 34.8947 68.802 35.2262C68.9415 35.5577 69.0046 35.9164 68.9867 36.2756C69.0059 36.6418 68.943 37.0076 68.8026 37.3464C68.6621 37.6851 68.4477 37.9881 68.175 38.2333C67.5849 38.725 66.8326 38.9787 66.0653 38.9447H65.1958V41.5925H63.4296ZM65.1958 37.4399H65.9497C66.2764 37.4557 66.5968 37.3471 66.8465 37.1359C66.9601 37.0253 67.0482 36.8913 67.1049 36.7433C67.1616 36.5953 67.1855 36.4367 67.1749 36.2786C67.1864 36.127 67.1652 35.9748 67.1127 35.8321C67.0603 35.6895 66.9778 35.5597 66.8709 35.4517C66.6301 35.2521 66.3227 35.1511 66.0105 35.169H65.208L65.1958 37.4399Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M73.9328 41.5933L73.5285 40.128H71.0023L70.601 41.5993H68.777L71.1847 33.668H73.4403L75.8359 41.5993L73.9328 41.5933ZM71.4035 38.608H73.1029L72.2335 35.5436L71.4035 38.608Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M79.2954 41.7423C78.6 41.7665 77.9128 41.5857 77.3194 41.2224C76.7946 40.885 76.4068 40.3722 76.225 39.7754L77.8574 39.286C77.9624 39.5641 78.1557 39.8001 78.4077 39.9578C78.6754 40.1182 78.9835 40.1984 79.2954 40.1888C79.5452 40.1977 79.7909 40.1239 79.9946 39.9791C80.0847 39.9154 80.1576 39.8305 80.207 39.7319C80.2563 39.6332 80.2804 39.5239 80.2773 39.4136C80.2769 39.2829 80.2294 39.1566 80.1435 39.058C80.0435 38.9421 79.9216 38.8471 79.7848 38.7783C79.6186 38.6913 79.447 38.6152 79.2711 38.5503L78.6631 38.3192C78.4503 38.2402 78.2374 38.152 78.0216 38.0608C77.8082 37.9665 77.6045 37.8514 77.4136 37.7173C77.2239 37.5875 77.0504 37.4355 76.8968 37.2644C76.7395 37.087 76.6186 36.8804 76.5411 36.6564C76.4486 36.397 76.4033 36.1231 76.4074 35.8477C76.396 35.3954 76.5267 34.951 76.7813 34.577C77.0269 34.2217 77.37 33.9451 77.7693 33.7805C78.2101 33.6008 78.6826 33.5119 79.1586 33.5191C79.8231 33.4884 80.4809 33.6625 81.0434 34.0176C81.5334 34.3631 81.8881 34.8682 82.0466 35.4464L80.3472 35.9268C80.2638 35.6782 80.1082 35.4602 79.9003 35.3005C79.6998 35.1498 79.455 35.0696 79.2042 35.0725C78.9693 35.0629 78.7381 35.1325 78.5475 35.2701C78.4636 35.3331 78.3962 35.4155 78.3512 35.5103C78.3062 35.6051 78.2849 35.7094 78.2891 35.8143C78.2899 35.904 78.3095 35.9926 78.3467 36.0743C78.3839 36.156 78.4378 36.229 78.505 36.2885C78.6612 36.4342 78.8425 36.5506 79.04 36.632C79.268 36.7293 79.5203 36.8266 79.8 36.936C80.0828 37.0328 80.3599 37.1454 80.6299 37.2735C80.8959 37.3969 81.1493 37.5455 81.3869 37.7173C81.6211 37.8923 81.8115 38.1191 81.9432 38.38C82.0903 38.6721 82.1644 38.9955 82.159 39.3224C82.1728 39.6589 82.1089 39.9941 81.9724 40.3019C81.8359 40.6098 81.6303 40.8821 81.3717 41.0978C80.7788 41.5537 80.0422 41.7823 79.2954 41.7423Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M85.8891 41.7423C85.1937 41.7665 84.5065 41.5857 83.9131 41.2224C83.3867 40.8861 82.9975 40.373 82.8157 39.7754L84.4512 39.2859C84.5562 39.5632 84.7482 39.7989 84.9984 39.9578C85.2671 40.1183 85.5762 40.1985 85.8891 40.1888C86.1388 40.1972 86.3844 40.1235 86.5883 39.9791C86.6776 39.9149 86.7499 39.8298 86.7986 39.7312C86.8474 39.6326 86.8712 39.5236 86.868 39.4136C86.8676 39.2828 86.8201 39.1566 86.7342 39.0579C86.6359 38.9415 86.5149 38.8463 86.3785 38.7783C86.2113 38.6913 86.0387 38.6152 85.8617 38.5503L85.2537 38.3192C85.0379 38.2402 84.8251 38.152 84.6123 38.0608C84.3986 37.967 84.1949 37.8519 84.0043 37.7173C83.8155 37.5875 83.643 37.4354 83.4906 37.2643C83.3333 37.0864 83.2115 36.88 83.1318 36.6563C83.0407 36.3966 82.9954 36.123 82.9981 35.8477C82.9866 35.3954 83.1174 34.951 83.372 34.577C83.6187 34.2216 83.9629 33.945 84.363 33.7805C84.8037 33.6005 85.2763 33.5115 85.7523 33.5191C86.4158 33.4885 87.0727 33.6625 87.6341 34.0176C88.1241 34.3631 88.4787 34.8682 88.6373 35.4464L86.944 35.9207C86.8627 35.6719 86.708 35.4535 86.5001 35.2944C86.2985 35.1437 86.0527 35.0636 85.8009 35.0664C85.5579 35.0512 85.3171 35.1211 85.12 35.264C85.037 35.3277 84.9705 35.4103 84.926 35.505C84.8816 35.5997 84.8605 35.7037 84.8646 35.8082C84.8647 35.8978 84.8836 35.9863 84.9203 36.0681C84.957 36.1498 85.0105 36.2228 85.0774 36.2824C85.2407 36.4325 85.4304 36.551 85.6368 36.632C85.8648 36.7293 86.1171 36.8266 86.3937 36.936C86.6765 37.0328 86.9536 37.1454 87.2237 37.2735C87.4896 37.3969 87.7431 37.5455 87.9806 37.7173C88.2165 37.8912 88.4081 38.1183 88.54 38.38C88.686 38.6723 88.7591 38.9957 88.7528 39.3224C88.7664 39.6586 88.7028 39.9935 88.5669 40.3012C88.4309 40.609 88.2262 40.8815 87.9685 41.0978C87.3745 41.5539 86.6369 41.7825 85.8891 41.7423Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M35.4615 54.1127V44.7799H36.3735V46.2999C36.5942 45.8146 36.938 45.3954 37.3707 45.0839C37.8572 44.7326 38.4458 44.551 39.0457 44.5671C39.6363 44.5413 40.2198 44.7042 40.7117 45.0321C41.2036 45.3601 41.5783 45.836 41.7817 46.3911C42.0238 45.8357 42.4264 45.3653 42.9377 45.0403C43.449 44.7153 44.0458 44.5505 44.6515 44.5671C45.0672 44.5632 45.4799 44.6385 45.8675 44.789C46.2433 44.9345 46.5856 45.1548 46.8737 45.4365C47.1896 45.7556 47.4269 46.1438 47.5668 46.5705C47.7415 47.0893 47.8259 47.6343 47.8161 48.1817V54.1127H46.9041V48.3063C46.9041 47.3943 46.6761 46.6738 46.2231 46.1783C46.0142 45.9399 45.7559 45.7498 45.4661 45.6212C45.1763 45.4926 44.8621 45.4285 44.5451 45.4335C44.216 45.4286 43.89 45.4967 43.5904 45.6329C43.2908 45.769 43.025 45.9698 42.8123 46.2209C42.3401 46.7437 42.105 47.4885 42.107 48.4553V54.1127H41.195V48.3367C41.195 47.4247 40.967 46.7012 40.5171 46.2087C40.3083 45.9688 40.0498 45.7773 39.7594 45.6476C39.4691 45.5179 39.1539 45.4531 38.8359 45.4578C38.5067 45.4538 38.1807 45.5225 37.8811 45.6591C37.5816 45.7958 37.3159 45.9969 37.1031 46.2482C36.635 46.7741 36.3979 47.525 36.3979 48.4978V54.1127H35.4615Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M53.3125 54.3438C52.5732 54.3761 51.8483 54.1323 51.2788 53.6598C51.0212 53.4375 50.8169 53.16 50.6811 52.8479C50.5453 52.5358 50.4815 52.1972 50.4945 51.8571C50.4685 51.4685 50.538 51.0794 50.697 50.7239C50.8559 50.3683 51.0995 50.0571 51.4065 49.8173C52.0145 49.3552 52.9011 49.1242 54.0665 49.1242H56.3586V47.6802C56.3693 47.3779 56.3176 47.0767 56.2068 46.7953C56.0959 46.5139 55.9282 46.2584 55.7141 46.0447C55.4969 45.8324 55.2389 45.6664 54.9557 45.5567C54.6725 45.4469 54.37 45.3958 54.0665 45.4063C53.542 45.3993 53.0278 45.552 52.5921 45.844C52.1704 46.1289 51.8508 46.5411 51.6801 47.0205L50.8137 46.7651C51.0345 46.1274 51.453 45.5769 52.0084 45.1935C52.6081 44.7655 53.3299 44.5427 54.0665 44.5581C54.9321 44.5186 55.7781 44.8236 56.4194 45.4063C56.7238 45.6991 56.9625 46.0532 57.1197 46.4452C57.2769 46.8372 57.3491 47.2582 57.3314 47.6802V51.6626C57.3314 52.7793 57.4591 53.597 57.7145 54.1158H56.7204C56.5119 53.657 56.408 53.1575 56.4164 52.6536C56.1146 53.1707 55.6731 53.5921 55.1426 53.8696C54.5841 54.1839 53.9534 54.3473 53.3125 54.3438ZM53.5314 53.5048C54.2559 53.5086 54.9567 53.2469 55.5013 52.7691C55.7648 52.5712 55.9798 52.3158 56.1299 52.0224C56.28 51.7291 56.3613 51.4053 56.3677 51.0758V49.8598H54.0938C52.3266 49.8598 51.4439 50.5053 51.446 51.7963C51.4403 52.0333 51.4901 52.2684 51.5914 52.4827C51.6928 52.697 51.8429 52.8846 52.0297 53.0306C52.4588 53.3606 52.9906 53.5285 53.5314 53.5048Z"
+						fill="#188803"
+					/>
+
+					<path d="M60.5781 54.1121V44.7793H61.5114V54.1121H60.5781Z" fill="#188803" />
+
+					<path d="M60.5781 44.029V42.9863H61.5114V44.029H60.5781Z" fill="#188803" />
+
+					<path
+						d="M67.3846 54.3439C66.5927 54.3707 65.8111 54.1589 65.1411 53.7359C64.5659 53.3691 64.1121 52.8402 63.8369 52.2159L64.5331 51.766C64.7842 52.3013 65.1859 52.7518 65.6892 53.0623C66.1924 53.3728 66.7753 53.5297 67.3664 53.514C67.9136 53.533 68.4506 53.3622 68.8864 53.0306C69.0776 52.8914 69.2327 52.7083 69.3385 52.4967C69.4443 52.2851 69.4978 52.0512 69.4943 51.8146C69.4999 51.5332 69.4205 51.2567 69.2663 51.0212C69.112 50.7898 68.9032 50.5998 68.6584 50.4679C68.3831 50.3188 68.1 50.1848 67.8102 50.0666C67.492 49.9364 67.1673 49.8228 66.8374 49.7262C66.5035 49.6281 66.1782 49.503 65.8646 49.3522C65.5671 49.2113 65.2832 49.0434 65.0164 48.8506C64.7579 48.6638 64.5492 48.4164 64.4084 48.1302C64.2506 47.8109 64.1714 47.4587 64.1774 47.1026C64.1656 46.7505 64.2346 46.4003 64.379 46.0789C64.5233 45.7575 64.7393 45.4733 65.0104 45.2482C65.6382 44.7576 66.4216 44.5094 67.2174 44.549C67.8982 44.534 68.5711 44.6975 69.1691 45.0233C69.6922 45.302 70.1168 45.735 70.3851 46.2636L69.6889 46.7561C69.4663 46.3272 69.1228 45.9731 68.7009 45.7377C68.2555 45.4851 67.7507 45.356 67.2387 45.3637C66.6929 45.3374 66.155 45.503 65.7187 45.8319C65.5315 45.9736 65.3806 46.1577 65.2786 46.3691C65.1766 46.5806 65.1263 46.8132 65.132 47.0479C65.1285 47.3616 65.2362 47.6663 65.436 47.9082C65.6433 48.1571 65.9027 48.3573 66.196 48.4949C66.5308 48.6526 66.875 48.7896 67.2265 48.9053C67.6035 49.03 67.9804 49.1668 68.3574 49.3127C68.7164 49.4497 69.0615 49.6207 69.3879 49.8234C69.7005 50.0175 69.9613 50.2846 70.1479 50.6017C70.3527 50.9518 70.4578 51.3513 70.4519 51.7569C70.4593 52.1128 70.3834 52.4655 70.2304 52.7869C70.0773 53.1084 69.8513 53.3896 69.5703 53.6082C68.9521 54.1049 68.1774 54.3656 67.3846 54.3439Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M78.9123 53.058C78.5465 53.4604 78.1006 53.7819 77.6033 54.0018C77.106 54.2218 76.5681 54.3354 76.0243 54.3354C75.4805 54.3354 74.9427 54.2218 74.4454 54.0018C73.948 53.7819 73.5022 53.4604 73.1363 53.058C72.4371 52.2008 72.0865 50.9939 72.0845 49.4374C72.0825 47.8809 72.4331 46.6801 73.1363 45.835C73.5037 45.4351 73.95 45.1159 74.4472 44.8975C74.9443 44.6792 75.4814 44.5664 76.0243 44.5664C76.5673 44.5664 77.1044 44.6792 77.6015 44.8975C78.0986 45.1159 78.545 45.4351 78.9123 45.835C79.6055 46.6923 79.952 47.8931 79.952 49.4374C79.952 50.9817 79.6055 52.1886 78.9123 53.058ZM76.0182 53.4867C76.4437 53.5049 76.867 53.4175 77.2505 53.2324C77.634 53.0473 77.9658 52.7702 78.2162 52.4257C78.7411 51.7184 79.0035 50.7223 79.0035 49.4374C79.0035 48.1525 78.7411 47.1625 78.2162 46.4673C77.9525 46.1367 77.6177 45.8697 77.2367 45.6861C76.8556 45.5026 76.4381 45.4073 76.0152 45.4073C75.5923 45.4073 75.1748 45.5026 74.7938 45.6861C74.4127 45.8697 74.0779 46.1367 73.8142 46.4673C73.2914 47.1696 73.0299 48.1636 73.0299 49.4404C73.0299 50.7172 73.2914 51.7204 73.8142 52.4288C74.0656 52.7735 74.3984 53.0506 74.783 53.2352C75.1677 53.4199 75.5921 53.5062 76.0182 53.4867Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M82.3657 54.1122V44.7794H83.2777V46.2994C83.5099 45.8097 83.8676 45.3901 84.3144 45.0834C84.8161 44.7327 85.4169 44.5516 86.0289 44.5666C86.4598 44.5504 86.8892 44.6261 87.2886 44.7886C87.6879 44.951 88.0482 45.1966 88.3454 45.509C88.9534 46.1352 89.2574 47.029 89.2574 48.1994V54.1122H88.3454V48.3362C88.3454 47.412 88.1103 46.7027 87.6401 46.2082C87.297 45.8518 86.854 45.6076 86.3695 45.5078C85.8849 45.4079 85.3815 45.4571 84.9254 45.6488C84.6208 45.779 84.345 45.9681 84.1137 46.2052C83.8551 46.4795 83.6581 46.806 83.5361 47.1628C83.3876 47.5918 83.3145 48.0433 83.3203 48.4973V54.1122H82.3657Z"
+						fill="#188803"
+					/>
+
+					<path
+						d="M89.3274 33.1445H90.896L90.6711 36.0569H89.5523L89.3274 33.1445Z"
+						fill="#188803"
+					/>
+				</svg>
+
+				<p class="mu-mt-050 ipn-loyalty-card__pass__main--text">
+					{{ $t('customer-space_dashboard_loyalty_house-pass--text') }}
+				</p>
+			</div>
+		</template>
+
+		<template #footer>
+			<MLink
+				class="ipn-loyalty-card__pass__link"
+				:href="downloadLoyaltyCardToPDF()"
+				@mouseup="onClick"
+			>
+				{{ $t('customer-space_dashboard_loyalty_house-pass_download--buton') }}
+				<MIcon name="ArrowArrowRight16" />
+			</MLink>
+		</template>
+	</IpnLoyaltyCard>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings.scss';
+
+	.ipn-loyalty-card__pass {
+		&__main {
+			display: flex;
+			flex-direction: column;
+			padding: $mu100;
+			svg {
+				align-self: center;
+			}
+			&--text {
+				@include set-font-scale('03', 'm');
+			}
+		}
+		&__link {
+			width: 100%;
+			color: $color-font-darkest;
+			display: flex;
+			justify-content: flex-start !important;
+			padding: $mu075 $mu100;
+			border-bottom-left-radius: get-border-radius('l');
+			border-bottom-right-radius: get-border-radius('l');
+			border: 2px solid $color-primary-01-500;
+			background-color: $color-primary-01-100;
+		}
+	}
+</style>

package/cdp-due--customer-space-module-master/src/contents/dashboard/loyalty-card/IpnLoyaltyCardPresentationShell.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="ipn-loyalty-card-no-loyalty">
+		<slot name="header" />
+
+		<slot name="content" />
+	</div>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings.scss';
+
+	.ipn-loyalty-card-no-loyalty {
+		background: $color-grey-000;
+		border: 1px solid $color-grey-300;
+		border-radius: get-border-radius('l');
+		padding: $mu100;
+		margin-bottom: $mu200;
+		&--title {
+			@include set-font-weight('semi-bold');
+			@include set-font-scale('07', 'm');
+			color: $color-primary-01-600;
+			margin-bottom: $mu100;
+			span {
+				@include set-font-scale('06', 'm');
+				color: $color-grey-999;
+			}
+		}
+		&--advantage {
+			@include set-font-scale('05', 'm');
+			display: flex;
+			align-items: center;
+			margin-bottom: $mu075;
+		}
+		&--icon {
+			min-width: px-to-rem(24);
+			margin-right: $mu075;
+			color: $color-primary-01-600;
+		}
+	}
+</style>

package/cdp-due--customer-space-module-master/src/contents/dashboard/loyalty-card/IpnLoyaltyCardPrograms.vue

@@ -0,0 +1,43 @@
+<script setup>
+	import { computed } from 'vue';
+
+	import MlFlexy from '@/components/grid/MlFlexy.vue';
+	import MlFlexyCol from '@/components/grid/MlFlexyCol.vue';
+	import ProgramCard from '@/contents/dashboard/loyalty-card/ProgramCard';
+	import { getLoyaltyPrograms } from '@/contents/loyalty/module/getters';
+
+	defineProps({
+		buttonAction: {
+			type: Function,
+			required: true,
+		},
+	});
+	const loyaltyPrograms = computed(() => getLoyaltyPrograms());
+</script>
+
+<template>
+	<MlFlexy gutter class="ipn-loyalty-card-programs mu-mt-200 mu-mb-200">
+		<MlFlexyCol
+			v-for="program in loyaltyPrograms?.programs"
+			:key="program.label"
+			class="ipn-loyalty-card-programs__program"
+		>
+			<ProgramCard :program="program" :button-action="buttonAction" />
+		</MlFlexyCol>
+	</MlFlexy>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings.scss';
+
+	.ipn-loyalty-card-programs {
+		align-items: normal !important;
+		&__program {
+			margin-bottom: $mu150;
+
+			@include set-from-screen('l') {
+				margin-bottom: $mu150;
+			}
+		}
+	}
+</style>

package/cdp-due--customer-space-module-master/src/contents/dashboard/loyalty-card/LoyaltyCard.default.vue

@@ -0,0 +1,86 @@
+<script setup>
+	import { computed } from 'vue';
+	import MLink from '@mozaic-ds/vue-3/src/components/link/MLink.vue';
+
+	import { CUSTOMER_INFO_LOADER } from '@/components/loading/loaders';
+	import LoadingContainer from '@/components/loading/LoadingContainer.vue';
+	import useCustomerLoyalty from '@/composables/useCustomerLoyalty';
+	import IpnLoyaltyCardBasic from '@/contents/dashboard/loyalty-card/IpnLoyaltyCardBasic';
+	import LoyaltyProgramsList from '@/contents/dashboard/loyalty-card/LoyaltyProgramsList';
+	import { LOYALTY_ROUTE } from '@/contents/loyalty/routes';
+	import { tc } from '@/i18n';
+
+	const { loyalty } = useCustomerLoyalty();
+
+	const hasValidLoyaltyCard = computed(() => {
+		if (loyalty?.value) {
+			const { expired, hasLoyalty, remembershipAvailable } = loyalty.value;
+			return hasLoyalty && (!expired || remembershipAvailable);
+		}
+		return false;
+	});
+
+	const loyaltyCardConfig = computed(() =>
+		hasValidLoyaltyCard.value
+			? {
+					title: tc('customer-space_dashboard_loyalty_my-loyalty--title'),
+					component: IpnLoyaltyCardBasic,
+					href: LOYALTY_ROUTE,
+			  }
+			: undefined,
+	);
+</script>
+
+<template>
+	<LoadingContainer
+		:loader="CUSTOMER_INFO_LOADER"
+		component="div"
+		class="dashboard__loyalty-card mu-mb-200"
+	>
+		<template v-if="loyaltyCardConfig">
+			<MLink
+				v-if="loyaltyCardConfig.href"
+				class="dashboard__loyalty-card__link link-underline--none"
+				:href="loyaltyCardConfig.href"
+			>
+				<component :is="loyaltyCardConfig.component"></component>
+			</MLink>
+
+			<component :is="loyaltyCardConfig.component" v-else></component>
+		</template>
+
+		<LoyaltyProgramsList v-if="loyalty" />
+	</LoadingContainer>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings';
+
+	.dashboard {
+		&__loyalty-card {
+			&__link {
+				min-width: 100%;
+			}
+
+			.link-underline--none {
+				text-decoration: none;
+			}
+
+			.ipn-loyalty-card {
+				min-width: 100%;
+			}
+		}
+
+		.customer-space {
+			&__subtitle {
+				@include set-font-scale('06', 'm');
+			}
+		}
+	}
+
+	.dashboard-page-links__title {
+		margin: $mu100 0;
+		@include set-font-scale('06', 'm');
+		@include set-font-weight('regular');
+	}
+</style>

package/cdp-due--customer-space-module-master/src/contents/dashboard/loyalty-card/LoyaltyCard.frlm.vue

@@ -0,0 +1,101 @@
+<script setup>
+	import { computed } from 'vue';
+	import MLink from '@mozaic-ds/vue-3/src/components/link/MLink.vue';
+
+	import { CUSTOMER_INFO_LOADER } from '@/components/loading/loaders';
+	import LoadingContainer from '@/components/loading/LoadingContainer.vue';
+	import useCustomerLoyalty from '@/composables/useCustomerLoyalty';
+	import IpnLoyaltyCardBasic from '@/contents/dashboard/loyalty-card/IpnLoyaltyCardBasic';
+	import IpnLoyaltyCardPassMaison from '@/contents/dashboard/loyalty-card/IpnLoyaltyCardPassMaison';
+	import LoyaltyProgramsList from '@/contents/dashboard/loyalty-card/LoyaltyProgramsList';
+	import { LOYALTY_ROUTE } from '@/contents/loyalty/routes';
+	import { tc } from '@/i18n';
+
+	const { loyalty, isPassMaison } = useCustomerLoyalty();
+
+	const isBasic = computed(() => {
+		if (loyalty?.value) {
+			const { expired, hasLoyalty, remembershipAvailable } = loyalty.value;
+			return hasLoyalty && !isPassMaison.value && (!expired || remembershipAvailable);
+		}
+		return false;
+	});
+
+	const loyaltyCardConfig = computed(() => {
+		if (isPassMaison.value) {
+			return {
+				title: tc('customer-space_dashboard_loyalty_house-pass--title'),
+				component: IpnLoyaltyCardPassMaison,
+			};
+		}
+
+		if (isBasic.value) {
+			return {
+				title: tc('customer-space_dashboard_loyalty_my-loyalty--title'),
+				component: IpnLoyaltyCardBasic,
+				href: LOYALTY_ROUTE,
+			};
+		}
+
+		return null;
+	});
+
+	const containerClass = computed(() => [
+		'dashboard__loyalty-card',
+		!loyaltyCardConfig.value ? 'dashboard__loyalty-card--empty' : '',
+	]);
+</script>
+
+<template>
+	<LoadingContainer :loader="CUSTOMER_INFO_LOADER" component="div" :class="containerClass">
+		<template v-if="loyaltyCardConfig">
+			<MLink
+				v-if="loyaltyCardConfig.href"
+				class="dashboard__loyalty-card__link link-underline--none"
+				:href="loyaltyCardConfig.href"
+			>
+				<component :is="loyaltyCardConfig.component"></component>
+			</MLink>
+
+			<component :is="loyaltyCardConfig.component" v-else></component>
+		</template>
+
+		<LoyaltyProgramsList v-if="loyalty" />
+	</LoadingContainer>
+</template>
+
+<style lang="scss">
+	@import 'settings-tools/_all-settings';
+
+	.dashboard {
+		&__loyalty-card {
+			&__link {
+				min-width: 100%;
+			}
+
+			.link-underline--none {
+				text-decoration: none;
+			}
+
+			.ipn-loyalty-card {
+				min-width: 100%;
+			}
+
+			&--empty {
+				margin-bottom: 0 !important;
+			}
+		}
+
+		.customer-space {
+			&__subtitle {
+				@include set-font-scale('06', 'm');
+			}
+		}
+
+		&__rewards {
+			.rewards-separator {
+				display: none;
+			}
+		}
+	}
+</style>