refactor: sidebar banner ui corrections (#9181)

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/dashboard/Sidebar.vue

@@ -56,8 +56,9 @@ onUnmounted(() => {
     >
       <DashboardTreeView v-if="!isWorkspaceLoading" />
     </div>
-    <GeneralGift />
-    <div v-if="!isSharedBase" class="border-t-1">
+    <div v-if="!isSharedBase" class="overflow-auto">
+      <GeneralGift v-if="!isEeUI"/>
+      <div class="border-t-1 w-full"></div>
       <DashboardSidebarBeforeUserInfo />
       <DashboardSidebarUserInfo />
     </div>

packages/nc-gui/components/general/Gift.vue

@@ -4,15 +4,15 @@ import { OrgUserRoles, extractRolesObj } from 'nocodb-sdk'
 const { appInfo, giftBannerDismissedCount, user } = useGlobal()
 
 const isBannerClosed = ref(true)
-const isModalOpen = ref(false)
 const confirmDialog = ref(false)
+const hideImage = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) < 780
 
 const isAvailable = computed(() => {
   return (
     !isEeUI &&
     user.value?.email &&
     [OrgUserRoles.CREATOR, OrgUserRoles.SUPER_ADMIN].some((r) => extractRolesObj(user.value?.roles)?.[r]) &&
-    !/^[a-zA-Z0-9._%+-]+@(gmail|yahoo|hotmail|outlook|aol|icloud|qq|163|126|sina)(\.com)?$/i.test(user.value?.email) &&
+    !/^[a-zA-Z0-9._%+-]+@(gmail|yahoo|hotmail|outlook|aol|icloud|qq|163|126|sina|nocodb)(\.com)?$/i.test(user.value?.email) &&
     (!giftBannerDismissedCount.value || giftBannerDismissedCount.value < 5)
   )
 })
@@ -26,7 +26,8 @@ if (giftBannerDismissedCount.value) {
 }
 
 const open = () => {
-  isModalOpen.value = true
+  giftBannerDismissedCount.value++
+  window.open(appInfo.value?.giftUrl, '_blank', 'noopener,noreferrer')
 }
 
 const closeBanner = () => {
@@ -49,18 +50,6 @@ const closeAndShowAgain = () => {
   giftBannerDismissedCount.value++
   confirmDialog.value = false
 }
-
-const closeModal = () => {
-  isModalOpen.value = false
-  giftBannerDismissedCount.value++
-  isBannerClosed.value = true
-}
-
-const onVisibleChange = (visible: boolean) => {
-  if (!visible) {
-    closeModal()
-  }
-}
 </script>
 
 <template>
@@ -72,30 +61,13 @@ const onVisibleChange = (visible: boolean) => {
       </div>
       <div class="body">We are giving away $100 worth of amazon coupons to our pro open source users!</div>
     </div>
-    <div class="img-wrapper">
+    <div class="img-wrapper" v-if="!hideImage && !giftBannerDismissedCount">
       <img src="~assets/img/giftCard.svg" />
     </div>
 
     <NcButton type="text" size="small" class="close-icon" @click.stop="closeBanner">
       <GeneralIcon icon="close" size="xlarge" />
     </NcButton>
-
-    <NcModal v-model:visible="isModalOpen" size="large" @update:visible="onVisibleChange">
-      <div class="absolute top-4 right-4 cursor-pointer">
-        <NcButton type="text" class="absolute top-3 right-3 cursor-pointer" @click="closeModal">
-          <GeneralIcon icon="close" size="small" />
-        </NcButton>
-      </div>
-      <div class="overflow-auto">
-        <iframe
-          width="100%"
-          style="height: max(800px, 90vh)"
-          :src="appInfo.giftUrl"
-          title="Gifts Unlocked!"
-          frameborder="0"
-        ></iframe>
-      </div>
-    </NcModal>
     <NcModal v-model:visible="confirmDialog" size="small">
       <div>
         <div class="mt-1 text-sm">Do you want to remind later on your next visit?</div>