From 42e7e5d87cfb8a0e901cb8338b06c1e86e33f88d Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Thu, 7 Nov 2024 01:57:54 +0100
Subject: [PATCH] feat: grid mobile warning  (#533)

---
 components/ModalTemplateDefault.vue  |  2 +-
 domains/grid/components/GridView.vue | 16 ++++++++++++++++
 public/images/grid.svg               |  6 ++++++
 stores/grid.ts                       |  3 +++
 types/modal.ts                       |  7 +++++++
 5 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 public/images/grid.svg

diff --git a/components/ModalTemplateDefault.vue b/components/ModalTemplateDefault.vue
index 4bbd301f..cec99da9 100644
--- a/components/ModalTemplateDefault.vue
+++ b/components/ModalTemplateDefault.vue
@@ -7,7 +7,7 @@ const { modal, closeModal } = useModal()
   <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
     <img
       :src="modal?.data?.icon || '/images/up-error.png'"
-      class="mx-auto mb-6 max-w-[150px]"
+      class="mx-auto mb-6 mt-4 max-w-[150px]"
       alt=""
     />
     <div class="heading-inter-21-semi-bold pb-4">
diff --git a/domains/grid/components/GridView.vue b/domains/grid/components/GridView.vue
index a599b6fa..fe4c20f8 100644
--- a/domains/grid/components/GridView.vue
+++ b/domains/grid/components/GridView.vue
@@ -11,6 +11,7 @@ const {
   gridRowHeightRatio,
   selectedGridId,
   isSavingGrid,
+  mobileLimitationsDisplayed,
 } = storeToRefs(useGridStore())
 const {
   saveGrid,
@@ -21,6 +22,8 @@ const {
   getGridById,
   gridsForTabs,
 } = useGrid()
+const { showModal } = useModal()
+const { formatMessage } = useIntl()
 const gridContainer = ref<HTMLElement | null>(null)
 const { width } = useElementSize(gridContainer)
 const gridWidgets = ref<GridWidget[]>([])
@@ -161,6 +164,19 @@ watch(
       } else {
         hasUnsavedGrid.value = false
       }
+
+      // show mobile limitations modal (only once)
+      if (isMobile.value && !mobileLimitationsDisplayed.value) {
+        showModal<DefaultModalData>({
+          data: {
+            icon: '/images/grid.svg',
+            title: formatMessage('grid_mobile_limitations_title'),
+            message: formatMessage('grid_mobile_limitations_message'),
+            confirmButtonText: formatMessage('grid_mobile_limitations_confirm'),
+          },
+        })
+        mobileLimitationsDisplayed.value = true
+      }
     } else {
       gridWidgets.value = getSelectedGridWidgets(updatedViewedGrid)
     }
diff --git a/public/images/grid.svg b/public/images/grid.svg
new file mode 100644
index 00000000..98c84b4f
--- /dev/null
+++ b/public/images/grid.svg
@@ -0,0 +1,6 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 44H30.5C40.5 44 44.5 40 44.5 30V18C44.5 8 40.5 4 30.5 4H18.5C8.5 4 4.5 8 4.5 18V30C4.5 40 8.5 44 18.5 44Z" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5 4V44" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 19H24.5" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5 29H44.5" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/stores/grid.ts b/stores/grid.ts
index 08bf90b5..41278373 100644
--- a/stores/grid.ts
+++ b/stores/grid.ts
@@ -11,6 +11,7 @@ export const useGridStore = defineStore(
     const gridRowHeightRatio = ref(DEFAULT_GRID_ROW_HEIGHT_RATIO)
     const gridChainId = ref<string>(DEFAULT_NETWORK_CHAIN_ID)
     const tempGrids = ref<Record<string, Grid[]>>({})
+    const mobileLimitationsDisplayed = ref(false)
 
     // We use tempGrid as a proxy to the actual grid data stored in tempGrids
     const tempGrid = computed<Grid[]>({
@@ -45,6 +46,7 @@ export const useGridStore = defineStore(
       selectedGridId,
       gridRowHeightRatio,
       gridChainId,
+      mobileLimitationsDisplayed,
     }
   },
   {
@@ -55,6 +57,7 @@ export const useGridStore = defineStore(
         'selectedGridId',
         'gridRowHeightRatio',
         'gridChainId',
+        'mobileLimitationsDisplayed',
         'tempGrids',
       ],
       key: STORAGE_KEY.GRID_STORE,
diff --git a/types/modal.ts b/types/modal.ts
index 550b11f2..b7896abb 100644
--- a/types/modal.ts
+++ b/types/modal.ts
@@ -16,3 +16,10 @@ export type ModalQueryParams = {
 export type ModalData = {
   [key: string]: any
 }
+
+export type DefaultModalData = {
+  message: string
+  title?: string
+  confirmButtonText?: string
+  icon?: string
+}