From f3ccaa00c4590387bd864f1941f367d80a04ec23 Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Mon, 28 Oct 2024 13:11:43 +0100
Subject: [PATCH] Instructions toggle

---
 domains/grid/components/AddWidgetBasic.vue | 29 ++++++++++++++++++++++
 translations/en_US.json                    |  1 +
 2 files changed, 30 insertions(+)

diff --git a/domains/grid/components/AddWidgetBasic.vue b/domains/grid/components/AddWidgetBasic.vue
index 59c15ae6..cfdc9fbb 100644
--- a/domains/grid/components/AddWidgetBasic.vue
+++ b/domains/grid/components/AddWidgetBasic.vue
@@ -21,6 +21,7 @@ const {
   handleFieldChange,
   handleFormErrors,
 } = useForm(schema, (await schema?.safeParseAsync(props.properties))?.data)
+const isInstructionsVisible = ref(false)
 
 const handleSave = async () => {
   if (!canSubmit.value) {
@@ -69,6 +70,12 @@ const handleBackToSelection = () => {
     },
   })
 }
+
+const widgetInstructions = computed(() => {
+  return formatMessage(`add_widget_${props.type.toLowerCase()}_instructions`)
+})
+
+const hasInstructions = computed(() => widgetInstructions.value !== '-')
 </script>
 
 <template>
@@ -94,6 +101,28 @@ const handleBackToSelection = () => {
           `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
         )
       }}
+
+      <!-- Instructions -->
+      <template v-if="hasInstructions">
+        <span
+          v-if="isInstructionsVisible"
+          class="cursor-pointer text-blue-60 underline hover:text-blue-50"
+          @click="isInstructionsVisible = !isInstructionsVisible"
+          >Hide instructions</span
+        >
+        <span
+          v-else
+          class="cursor-pointer text-blue-60 underline hover:text-blue-50"
+          @click="isInstructionsVisible = !isInstructionsVisible"
+          >Show instructions</span
+        >
+        <div
+          v-if="isInstructionsVisible"
+          class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
+        >
+          {{ widgetInstructions }}
+        </div>
+      </template>
     </div>
 
     <!-- Content -->
diff --git a/translations/en_US.json b/translations/en_US.json
index 95ebb15c..18292962 100644
--- a/translations/en_US.json
+++ b/translations/en_US.json
@@ -145,6 +145,7 @@
   "add_widget_instagram_description": "Allows to embed Instagram post.",
   "token_asset_type_other": "OTHER",
   "profile_tab_tokens": "Tokens",
+  "add_widget_image_instructions": "1. Visit your Spotify app/mobile\n2. Visit your Spotify app/mobile\n3. Go to a artist or playlist",
   "modal_mobile_search_placeholder": "Search by title",
   "widget_type_instagram": "Instagram",
   "add_missing_assets_page_title": "Check missing asset",