[ACCOUNt2826] feat: implement contact identification

src/components/PsAccounts.vue

@@ -56,6 +56,8 @@
           data-testid="invitatiion-banner"
         />
         <AccountPanel
+          :identify-url="context.identifyUrl"
+          :contact-email="context.contactEmail"
           :accounts-ui-url="context.accountsUiUrl"
           :app="context.psxName"
           :is-super-admin="context.backendUser.isSuperAdmin"

src/components/panel/AccountPanel.vue

@@ -16,9 +16,18 @@
     <div class="acc-gap-4 acc-flex acc-flex-wrap md:acc-justify-normal acc-justify-center md:acc-flex-row acc-flex-col">
       <AccountShopLinkMessage
         class="acc-flex-1 acc-min-w-[247px]"
+        :contact-email="contactEmail"
         :shops-in-context="shopsInContext"
         :shop-context="shopContext"
       />
+      <AccountSetPointOfContact
+        :identify-url="identifyUrl"
+        :app="app"
+        :is-super-admin="isSuperAdmin"
+        :shops="shops"
+        :has-shops-linked="hasShopsLinked"
+        data-testid="account-link-buttons"
+      />
       <AccountLinkToUi
         v-if="!shopsWithoutUrl.length"
         :accounts-ui-url="accountsUiUrl"
@@ -57,6 +66,8 @@ import { useLocale } from '@/composables/useLocale';
     * should be https://accounts.distribution.prestashop.net/en
     */
     accountsUiUrl: string;
+    identifyUrl: string;
+    contactEmail: string;
     /**
     * Name of the module
     */

src/components/panel/accountSubComponents/AccountSetPointOfContact.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="acc-gap-8 md:acc-gap-2 acc-items-center acc-flex"
+  >
+    <puik-button
+      id="associate-shop-button"
+      class="acc-w-1/2 md:acc-w-auto"
+      data-testid="account-link-to-ui-link-shop-button"
+      @click="openLinkShopModal()"
+    >
+      Connect to your account
+    </puik-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface AccountSetPointOfContactProps {
+  identifyUrl: string;
+}
+
+const props = withDefaults(defineProps<AccountSetPointOfContactProps>(), {
+});
+
+function openLinkShopModal (path: string = '') {
+  window.open(props.identifyUrl, 'identifyPopup', 'popup=true,width=650,height=700,left=150,top=100');
+}
+</script>

src/components/panel/accountSubComponents/AccountShopLinkMessage.vue

@@ -37,7 +37,8 @@
             class="acc-m-0 acc-text-font-500 acc-break-words"
             data-testid="account-shop-link-message-linked-email"
           >
-            {{ linkedUserEmail }}
+<!--            {{ linkedUserEmail }}-->
+            {{ contactEmail}}
           </p>
         </div>
       </template>
@@ -60,6 +61,7 @@ import { useLocale } from '@/composables/useLocale';
 interface AccountShopLinkMessageProps {
   shopsInContext?: Shop[];
   shopContext: number;
+  contactEmail: string;
 }
 
 const props = withDefaults(defineProps<AccountShopLinkMessageProps>(), {

src/types/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AccountLinkToUi: typeof import('./../components/panel/accountSubComponents/AccountLinkToUi.vue')['default']
     AccountPanel: typeof import('./../components/panel/AccountPanel.vue')['default']
+    AccountSetPointOfContact: typeof import('./../components/panel/accountSubComponents/AccountSetPointOfContact.vue')['default']
     AccountShopLinkMessage: typeof import('./../components/panel/accountSubComponents/AccountShopLinkMessage.vue')['default']
     AlertContextValidator: typeof import('./../components/alert/AlertContextValidator.vue')['default']
     AlertModuleDependencies: typeof import('./../components/alert/AlertModuleDependencies.vue')['default']

src/types/context.ts

@@ -12,6 +12,8 @@ export interface BackendUser {
 
 export interface Context {
   adminAjaxLink: string
+  identifyUrl: string
+  contactEmail: string
   accountsUiUrl: string
   backendUser: BackendUser
   currentContext: CurrentContext