@phonghq/go-chat 1.0.41 → 1.0.43

package/dist/test/chat/App.vue.js

@@ -21,7 +21,8 @@ import IconCloseCircle from '../assets/icons/IconCloseCircle.vue';
 import Setting from '../chat/page/setting/Setting.vue';
 import SettingSuccess from '../chat/page/setting/SettingSuccess.vue';
 import { goChatError } from '../composable/useError';
-import NotTenantPhone from '@/views/NotTenantPhone.vue';
+import NotTenantPhone from '../views/NotTenantPhone.vue';
+import { phoneNumberFormat } from '../utils/string-helper';
 const routerConfig = [
     { id: PAGE.HOME, backFunc: null, backTitle: '' },
     {
@@ -54,7 +55,10 @@ const routerMobileConfig = computed(() => [
             : () => {
                 logout();
             },
-        backTitle: 'ChatBiz'
+        backTitle: 'Go Chat',
+        subTitle: dataProfile.value?.user_type == 'tenant'
+            ? phoneNumberFormat(dataProfile.value?.tenant_phone ?? '')
+            : ''
     },
     {
         id: PAGE.HOME,
@@ -87,7 +91,7 @@ const routerMobileConfig = computed(() => [
     }
 ]);
 const props = withDefaults(defineProps(), {
-    response: 'tablet'
+    response: 'tablet',
 });
 const emit = defineEmits();
 const { initPage } = useInitData();
@@ -162,10 +166,10 @@ const getResponsiveObserverDebounce = useDebounce(() => {
     getResponsiveObserver();
 }, 50);
 const handleInitPage = async () => {
-    await initPage({ props: props, response: responsiveRender.value });
+    const init_data = await initPage({ props: props, response: responsiveRender.value });
     if (!dataProfile.value?.tenant_phone && dataProfile.value?.user_type == 'tenant') {
         emit('error:noPhoneTenant');
-        routerPush(PAGE.TENANT_ERROR);
+        routerPush(PAGE.NOT_TENANT_PHONE);
         // if (dataProfile.value?.has_business_tenant_phone) {
         //   routerPush(PAGE.REGISTER_SUCCESS)
         // } else {
@@ -173,6 +177,11 @@ const handleInitPage = async () => {
         //   routerPush(PAGE.REGISTER_TENANT)
         // }
     }
+    if (init_data?.conversation_id) {
+        chatListRef.value?.initData({ conversation_id: init_data?.conversation_id, is_unknown: init_data?.is_unknown || '0' });
+    }
+    else
+        chatListRef.value?.initData();
 };
 const handleEndCall = (data, type) => {
     setTimeout(() => {
@@ -246,7 +255,7 @@ defineExpose({
 });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
 const __VLS_defaults = {
-    response: 'tablet'
+    response: 'tablet',
 };
 const __VLS_ctx = {
     ...{},
@@ -283,8 +292,12 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR) {
     [currentPage, PAGE,];
     /** @type {[typeof Error, ]} */ ;
     // @ts-ignore
-    const __VLS_4 = __VLS_asFunctionalComponent(Error, new Error({}));
-    const __VLS_5 = __VLS_4({}, ...__VLS_functionalComponentArgsRest(__VLS_4));
+    const __VLS_4 = __VLS_asFunctionalComponent(Error, new Error({
+        ...{ class: "mt-10" },
+    }));
+    const __VLS_5 = __VLS_4({
+        ...{ class: "mt-10" },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_4));
 }
 else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT) {
     // @ts-ignore
@@ -302,6 +315,39 @@ else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS) {
     const __VLS_12 = __VLS_asFunctionalComponent(SettingSuccess, new SettingSuccess({}));
     const __VLS_13 = __VLS_12({}, ...__VLS_functionalComponentArgsRest(__VLS_12));
 }
+else if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE) {
+    // @ts-ignore
+    [currentPage, PAGE,];
+    /** @type {[typeof NotTenantPhone, ]} */ ;
+    // @ts-ignore
+    const __VLS_16 = __VLS_asFunctionalComponent(NotTenantPhone, new NotTenantPhone({
+        ...{ 'onTryAgain': {} },
+        isLib: (props.isLib),
+    }));
+    const __VLS_17 = __VLS_16({
+        ...{ 'onTryAgain': {} },
+        isLib: (props.isLib),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_16));
+    let __VLS_19;
+    let __VLS_20;
+    const __VLS_21 = ({ tryAgain: {} },
+        { onTryAgain: (...[$event]) => {
+                if (!!(!__VLS_ctx.isRouterReady))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_TENANT))
+                    return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
+                    return;
+                if (!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                    return;
+                __VLS_ctx.handleInitPage();
+                // @ts-ignore
+                [handleInitPage,];
+            } });
+    var __VLS_18;
+}
 else {
     __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
         ...{ class: "w-full h-full flex flex-col overflow-hidden relative" },
@@ -342,6 +388,8 @@ else {
                             return;
                         if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                             return;
+                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                            return;
                         if (!(__VLS_ctx.goChatError))
                             return;
                         if (!!(__VLS_ctx.mediaPermissionState == 'prompt'))
@@ -358,23 +406,23 @@ else {
     }
     /** @type {[typeof Calling, ]} */ ;
     // @ts-ignore
-    const __VLS_16 = __VLS_asFunctionalComponent(Calling, new Calling({
+    const __VLS_23 = __VLS_asFunctionalComponent(Calling, new Calling({
         ...{ 'onUserCalling': {} },
         ...{ 'onEndCall': {} },
         ...{ 'onError:mediaPermissionFail': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
     }));
-    const __VLS_17 = __VLS_16({
+    const __VLS_24 = __VLS_23({
         ...{ 'onUserCalling': {} },
         ...{ 'onEndCall': {} },
         ...{ 'onError:mediaPermissionFail': {} },
         ref: "callingRef",
         responsive: (__VLS_ctx.responsiveRender),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_16));
-    let __VLS_19;
-    let __VLS_20;
-    const __VLS_21 = ({ userCalling: {} },
+    }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+    let __VLS_26;
+    let __VLS_27;
+    const __VLS_28 = ({ userCalling: {} },
         { onUserCalling: (...[$event]) => {
                 if (!!(!__VLS_ctx.isRouterReady))
                     return;
@@ -384,19 +432,21 @@ else {
                     return;
                 if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                     return;
+                if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                    return;
                 __VLS_ctx.emit('userCalling', $event);
                 // @ts-ignore
                 [responsiveRender, emit,];
             } });
-    const __VLS_22 = ({ endCall: {} },
+    const __VLS_29 = ({ endCall: {} },
         { onEndCall: (__VLS_ctx.handleEndCall) });
-    const __VLS_23 = ({ 'error:mediaPermissionFail': {} },
+    const __VLS_30 = ({ 'error:mediaPermissionFail': {} },
         { 'onError:mediaPermissionFail': (__VLS_ctx.handleMedialPermissionError) });
     /** @type {typeof __VLS_ctx.callingRef} */ ;
-    var __VLS_24 = {};
+    var __VLS_31 = {};
     // @ts-ignore
     [handleEndCall, handleMedialPermissionError, callingRef,];
-    var __VLS_18;
+    var __VLS_25;
     if (__VLS_ctx.responsiveRender == 'mobile') {
         // @ts-ignore
         [responsiveRender,];
@@ -422,6 +472,8 @@ else {
                             return;
                         if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                             return;
+                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                            return;
                         if (!(__VLS_ctx.responsiveRender == 'mobile'))
                             return;
                         if (!(__VLS_ctx.currentPageConfig?.backFunc && !__VLS_ctx.currentPageConfig?.isHidden))
@@ -434,14 +486,39 @@ else {
             });
             /** @type {[typeof IconArrowLeft, ]} */ ;
             // @ts-ignore
-            const __VLS_27 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-            const __VLS_28 = __VLS_27({}, ...__VLS_functionalComponentArgsRest(__VLS_27));
-            __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
-                ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
+            const __VLS_34 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+            const __VLS_35 = __VLS_34({}, ...__VLS_functionalComponentArgsRest(__VLS_34));
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "ml-3" },
+            });
+            __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+                ...{ class: "text-xl font-semibold text-left text-chat-haze-900" },
             });
             (__VLS_ctx.currentPageConfig.backTitle ?? '');
             // @ts-ignore
             [currentPageConfig,];
+            __VLS_asFunctionalElement(__VLS_elements.p, __VLS_elements.p)({
+                ...{ class: "text-sm font-medium text-chat-haze-900" },
+            });
+            (__VLS_ctx.currentPageConfig.subTitle ?? '');
+            // @ts-ignore
+            [currentPageConfig,];
+        }
+        else if (__VLS_ctx.dataProfile?.user_type == 'tenant' || true) {
+            // @ts-ignore
+            [dataProfile,];
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "flex gap-2" },
+            });
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "text-chat-haze-700" },
+            });
+            __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
+                ...{ class: "font-medium text-gray-700" },
+            });
+            (__VLS_ctx.phoneNumberFormat(__VLS_ctx.dataProfile?.tenant_phone ?? '') ?? '');
+            // @ts-ignore
+            [dataProfile, phoneNumberFormat,];
         }
         else {
             __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({});
@@ -457,6 +534,8 @@ else {
                             return;
                         if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                             return;
+                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                            return;
                         if (!(__VLS_ctx.responsiveRender == 'mobile'))
                             return;
                         if (!(props.isLib))
@@ -469,49 +548,41 @@ else {
             });
             /** @type {[typeof IconCloseCircle, ]} */ ;
             // @ts-ignore
-            const __VLS_31 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
-            const __VLS_32 = __VLS_31({}, ...__VLS_functionalComponentArgsRest(__VLS_31));
+            const __VLS_38 = __VLS_asFunctionalComponent(IconCloseCircle, new IconCloseCircle({}));
+            const __VLS_39 = __VLS_38({}, ...__VLS_functionalComponentArgsRest(__VLS_38));
         }
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
             ...{ class: "grow overflow-hidden" },
         });
-        if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.TENANT_ERROR) {
-            // @ts-ignore
-            [currentPage, PAGE,];
-            /** @type {[typeof NotTenantPhone, ]} */ ;
-            // @ts-ignore
-            const __VLS_35 = __VLS_asFunctionalComponent(NotTenantPhone, new NotTenantPhone({}));
-            const __VLS_36 = __VLS_35({}, ...__VLS_functionalComponentArgsRest(__VLS_35));
-        }
         /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        const __VLS_39 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+        const __VLS_42 = __VLS_asFunctionalComponent(ChatList, new ChatList({
             ...{ 'onSelectReceiver': {} },
             ref: "chatListRef",
             ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
             responsive: (__VLS_ctx.responsiveRender),
             receiverId: (__VLS_ctx.receiverId),
         }));
-        const __VLS_40 = __VLS_39({
+        const __VLS_43 = __VLS_42({
             ...{ 'onSelectReceiver': {} },
             ref: "chatListRef",
             ...{ class: "w-full max-w-[500px] !bg-[#F9FAFC]" },
             responsive: (__VLS_ctx.responsiveRender),
             receiverId: (__VLS_ctx.receiverId),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_39));
-        let __VLS_42;
-        let __VLS_43;
-        const __VLS_44 = ({ selectReceiver: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_42));
+        let __VLS_45;
+        let __VLS_46;
+        const __VLS_47 = ({ selectReceiver: {} },
             { onSelectReceiver: (__VLS_ctx.selectReceiver) });
         __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CHAT_LIST) }, null, null);
         /** @type {typeof __VLS_ctx.chatListRef} */ ;
-        var __VLS_45 = {};
+        var __VLS_48 = {};
         // @ts-ignore
         [currentPage, PAGE, responsiveRender, receiverId, selectReceiver, chatListRef,];
-        var __VLS_41;
+        var __VLS_44;
         /** @type {[typeof HomeComponent, ]} */ ;
         // @ts-ignore
-        const __VLS_48 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+        const __VLS_51 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
             ...{ 'onCall': {} },
             ...{ 'onBack': {} },
             ...{ 'onInputFocus': {} },
@@ -520,7 +591,7 @@ else {
             ...{ class: "h-full pt-4" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_49 = __VLS_48({
+        const __VLS_52 = __VLS_51({
             ...{ 'onCall': {} },
             ...{ 'onBack': {} },
             ...{ 'onInputFocus': {} },
@@ -528,12 +599,12 @@ else {
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full pt-4" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_48));
-        let __VLS_51;
-        let __VLS_52;
-        const __VLS_53 = ({ call: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_51));
+        let __VLS_54;
+        let __VLS_55;
+        const __VLS_56 = ({ call: {} },
             { onCall: (__VLS_ctx.handleCall) });
-        const __VLS_54 = ({ back: {} },
+        const __VLS_57 = ({ back: {} },
             { onBack: (...[$event]) => {
                     if (!!(!__VLS_ctx.isRouterReady))
                         return;
@@ -543,78 +614,80 @@ else {
                         return;
                     if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                         return;
+                    if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                        return;
                     if (!(__VLS_ctx.responsiveRender == 'mobile'))
                         return;
                     __VLS_ctx.currentPageConfig.backFunc?.();
                     // @ts-ignore
                     [responsiveRender, currentPageConfig, receiverId, handleCall,];
                 } });
-        const __VLS_55 = ({ inputFocus: {} },
+        const __VLS_58 = ({ inputFocus: {} },
             { onInputFocus: (__VLS_ctx.handleReadMessage) });
         __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME) }, null, null);
         /** @type {typeof __VLS_ctx.homeComponentRef} */ ;
-        var __VLS_56 = {};
+        var __VLS_59 = {};
         // @ts-ignore
         [currentPage, PAGE, handleReadMessage, homeComponentRef,];
-        var __VLS_50;
+        var __VLS_53;
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerDetail, ]} */ ;
             // @ts-ignore
-            const __VLS_59 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+            const __VLS_62 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "w-full h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
             }));
-            const __VLS_60 = __VLS_59({
+            const __VLS_63 = __VLS_62({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "w-full h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_59));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_62));
             /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-            var __VLS_62 = {};
+            var __VLS_65 = {};
             // @ts-ignore
             [responsiveRender, receiverId, customerDetailRef,];
-            var __VLS_61;
+            var __VLS_64;
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerCheckIn, ]} */ ;
             // @ts-ignore
-            const __VLS_65 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            const __VLS_68 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
                 ...{ class: "w-full h-full" },
             }));
-            const __VLS_66 = __VLS_65({
+            const __VLS_69 = __VLS_68({
                 ...{ class: "w-full h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_65));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_68));
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerAppointment, ]} */ ;
             // @ts-ignore
-            const __VLS_69 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            const __VLS_72 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
                 ...{ class: "w-full h-full" },
             }));
-            const __VLS_70 = __VLS_69({
+            const __VLS_73 = __VLS_72({
                 ...{ class: "w-full h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_69));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_72));
         }
         if (__VLS_ctx.currentPage != __VLS_ctx.PAGE.HOME) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof MobileFooter, ]} */ ;
             // @ts-ignore
-            const __VLS_73 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
+            const __VLS_76 = __VLS_asFunctionalComponent(MobileFooter, new MobileFooter({
                 ...{ class: "shrink-0" },
             }));
-            const __VLS_74 = __VLS_73({
+            const __VLS_77 = __VLS_76({
                 ...{ class: "shrink-0" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_73));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_76));
         }
     }
     else {
@@ -623,29 +696,29 @@ else {
         });
         /** @type {[typeof ChatList, ]} */ ;
         // @ts-ignore
-        const __VLS_77 = __VLS_asFunctionalComponent(ChatList, new ChatList({
+        const __VLS_80 = __VLS_asFunctionalComponent(ChatList, new ChatList({
             ...{ 'onSelectReceiver': {} },
             ref: "chatListRef",
             ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
             responsive: (__VLS_ctx.responsiveRender),
             receiverId: (__VLS_ctx.receiverId),
         }));
-        const __VLS_78 = __VLS_77({
+        const __VLS_81 = __VLS_80({
             ...{ 'onSelectReceiver': {} },
             ref: "chatListRef",
             ...{ class: "w-[38%] max-w-[500px] min-w-[450px]" },
             responsive: (__VLS_ctx.responsiveRender),
             receiverId: (__VLS_ctx.receiverId),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_77));
-        let __VLS_80;
-        let __VLS_81;
-        const __VLS_82 = ({ selectReceiver: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_80));
+        let __VLS_83;
+        let __VLS_84;
+        const __VLS_85 = ({ selectReceiver: {} },
             { onSelectReceiver: (__VLS_ctx.selectReceiver) });
         /** @type {typeof __VLS_ctx.chatListRef} */ ;
-        var __VLS_83 = {};
+        var __VLS_86 = {};
         // @ts-ignore
         [responsiveRender, receiverId, selectReceiver, chatListRef,];
-        var __VLS_79;
+        var __VLS_82;
         __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
             ...{ class: "chat-box-white grow flex flex-col h-full pt-6 overflow-hidden" },
         });
@@ -665,6 +738,8 @@ else {
                             return;
                         if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.REGISTER_SUCCESS))
                             return;
+                        if (!!(__VLS_ctx.currentPage == __VLS_ctx.PAGE.NOT_TENANT_PHONE))
+                            return;
                         if (!!(__VLS_ctx.responsiveRender == 'mobile'))
                             return;
                         if (!(__VLS_ctx.currentPageConfig?.backFunc))
@@ -677,8 +752,8 @@ else {
             });
             /** @type {[typeof IconArrowLeft, ]} */ ;
             // @ts-ignore
-            const __VLS_86 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
-            const __VLS_87 = __VLS_86({}, ...__VLS_functionalComponentArgsRest(__VLS_86));
+            const __VLS_89 = __VLS_asFunctionalComponent(IconArrowLeft, new IconArrowLeft({}));
+            const __VLS_90 = __VLS_89({}, ...__VLS_functionalComponentArgsRest(__VLS_89));
             __VLS_asFunctionalElement(__VLS_elements.span, __VLS_elements.span)({
                 ...{ class: "text-xl font-semibold text-chat-haze-900 ml-3" },
             });
@@ -691,7 +766,7 @@ else {
         });
         /** @type {[typeof HomeComponent, ]} */ ;
         // @ts-ignore
-        const __VLS_90 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
+        const __VLS_93 = __VLS_asFunctionalComponent(HomeComponent, new HomeComponent({
             ...{ 'onCall': {} },
             ...{ 'onInputFocus': {} },
             ref: "homeComponentRef",
@@ -699,72 +774,72 @@ else {
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
         }));
-        const __VLS_91 = __VLS_90({
+        const __VLS_94 = __VLS_93({
             ...{ 'onCall': {} },
             ...{ 'onInputFocus': {} },
             ref: "homeComponentRef",
             receiverId: (__VLS_ctx.receiverId),
             ...{ class: "h-full" },
             responsive: (__VLS_ctx.responsiveRender),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_90));
-        let __VLS_93;
-        let __VLS_94;
-        const __VLS_95 = ({ call: {} },
+        }, ...__VLS_functionalComponentArgsRest(__VLS_93));
+        let __VLS_96;
+        let __VLS_97;
+        const __VLS_98 = ({ call: {} },
             { onCall: (__VLS_ctx.handleCall) });
-        const __VLS_96 = ({ inputFocus: {} },
+        const __VLS_99 = ({ inputFocus: {} },
             { onInputFocus: (__VLS_ctx.handleReadMessage) });
         __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.currentPage == __VLS_ctx.PAGE.HOME && __VLS_ctx.receiverId) }, null, null);
         /** @type {typeof __VLS_ctx.homeComponentRef} */ ;
-        var __VLS_97 = {};
+        var __VLS_100 = {};
         // @ts-ignore
         [currentPage, PAGE, responsiveRender, receiverId, receiverId, handleCall, handleReadMessage, homeComponentRef,];
-        var __VLS_92;
+        var __VLS_95;
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_DETAIL) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerDetail, ]} */ ;
             // @ts-ignore
-            const __VLS_100 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
+            const __VLS_103 = __VLS_asFunctionalComponent(CustomerDetail, new CustomerDetail({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
             }));
-            const __VLS_101 = __VLS_100({
+            const __VLS_104 = __VLS_103({
                 ref: "customerDetailRef",
                 receiverId: (__VLS_ctx.receiverId),
                 ...{ class: "h-full" },
                 responsive: (__VLS_ctx.responsiveRender),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_100));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_103));
             /** @type {typeof __VLS_ctx.customerDetailRef} */ ;
-            var __VLS_103 = {};
+            var __VLS_106 = {};
             // @ts-ignore
             [responsiveRender, receiverId, customerDetailRef,];
-            var __VLS_102;
+            var __VLS_105;
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_CHECK_IN) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerCheckIn, ]} */ ;
             // @ts-ignore
-            const __VLS_106 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
+            const __VLS_109 = __VLS_asFunctionalComponent(CustomerCheckIn, new CustomerCheckIn({
                 ...{ class: "h-full" },
             }));
-            const __VLS_107 = __VLS_106({
+            const __VLS_110 = __VLS_109({
                 ...{ class: "h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_106));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_109));
         }
         if (__VLS_ctx.currentPage == __VLS_ctx.PAGE.CUSTOMER_APPOINTMENT) {
             // @ts-ignore
             [currentPage, PAGE,];
             /** @type {[typeof CustomerAppointment, ]} */ ;
             // @ts-ignore
-            const __VLS_110 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
+            const __VLS_113 = __VLS_asFunctionalComponent(CustomerAppointment, new CustomerAppointment({
                 ...{ class: "h-full" },
             }));
-            const __VLS_111 = __VLS_110({
+            const __VLS_114 = __VLS_113({
                 ...{ class: "h-full" },
-            }, ...__VLS_functionalComponentArgsRest(__VLS_110));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_113));
         }
     }
 }
@@ -776,6 +851,7 @@ else {
 /** @type {__VLS_StyleScopedClasses['m-auto']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex-center']} */ ;
 /** @type {__VLS_StyleScopedClasses['sc-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['mt-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
@@ -825,10 +901,19 @@ else {
 /** @type {__VLS_StyleScopedClasses['justify-between']} */ ;
 /** @type {__VLS_StyleScopedClasses['flex']} */ ;
 /** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
 /** @type {__VLS_StyleScopedClasses['font-semibold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-left']} */ ;
 /** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
-/** @type {__VLS_StyleScopedClasses['ml-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-900']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-chat-haze-700']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-medium']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-gray-700']} */ ;
 /** @type {__VLS_StyleScopedClasses['w-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-10']} */ ;
 /** @type {__VLS_StyleScopedClasses['grow']} */ ;
@@ -874,7 +959,7 @@ else {
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 /** @type {__VLS_StyleScopedClasses['h-full']} */ ;
 // @ts-ignore
-var __VLS_25 = __VLS_24, __VLS_46 = __VLS_45, __VLS_57 = __VLS_56, __VLS_63 = __VLS_62, __VLS_84 = __VLS_83, __VLS_98 = __VLS_97, __VLS_104 = __VLS_103;
+var __VLS_32 = __VLS_31, __VLS_49 = __VLS_48, __VLS_60 = __VLS_59, __VLS_66 = __VLS_65, __VLS_87 = __VLS_86, __VLS_101 = __VLS_100, __VLS_107 = __VLS_106;
 const __VLS_export = (await import('vue')).defineComponent({
     setup: () => (__VLS_exposed),
     __typeEmits: {},

package/dist/test/chat/page/customer-detail/CustomerDetail.vue.js

@@ -104,9 +104,9 @@ __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
 __VLS_asFunctionalElement(__VLS_elements.h2, __VLS_elements.h2)({
     ...{ class: "text-lg font-semibold text-gray-800" },
 });
-(__VLS_ctx.user?.username ?? 'n/a');
+(__VLS_ctx.user?.username ?? __VLS_ctx.phoneNumberFormat(__VLS_ctx.user?.phone ?? ''));
 // @ts-ignore
-[user,];
+[user, user, phoneNumberFormat,];
 __VLS_asFunctionalElement(__VLS_elements.div, __VLS_elements.div)({
     ...{ class: " mt-5 text-center mx-auto" },
     ...{ class: ({ 'flex justify-between w-max': __VLS_ctx.responsive == 'tablet', 'grid grid-cols-3 w-full': __VLS_ctx.responsive == 'mobile' }) },