From f7dad9faa83072c4bee200f20b1a9f7b89121348 Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Fri, 8 Nov 2024 08:52:09 +0100
Subject: [PATCH] feat: Elfsight improvements (#535)

---
 domains/grid/components/AddWidget.vue         |   2 +-
 domains/grid/components/AddWidgetElfsight.vue | 172 ++++++++++++++++++
 .../grid/components/AddWidgetSelection.vue    |  11 +-
 .../grid/components/GridWidgetElfsight.vue    |  35 +++-
 domains/grid/components/GridWidgetIframe.vue  |   7 +
 domains/grid/schema/elfsightWidgetSchema.ts   |   6 +-
 public/images/elfsight.png                    | Bin 9916 -> 0 bytes
 translations/en_US.json                       |   6 +
 8 files changed, 221 insertions(+), 18 deletions(-)
 create mode 100644 domains/grid/components/AddWidgetElfsight.vue
 delete mode 100644 public/images/elfsight.png

diff --git a/domains/grid/components/AddWidget.vue b/domains/grid/components/AddWidget.vue
index b3bed1b4..b02b4264 100644
--- a/domains/grid/components/AddWidget.vue
+++ b/domains/grid/components/AddWidget.vue
@@ -20,7 +20,7 @@ const WIDGET_COMPONENTS: Record<string, string> = {
   [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: 'Basic',
   [GRID_WIDGET_TYPE.enum.WARPCAST]: 'Basic',
   [GRID_WIDGET_TYPE.enum.YOUTUBE]: 'Basic',
-  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: 'Elfsight',
 }
 
 const loadComponent = (type?: string): Component | undefined => {
diff --git a/domains/grid/components/AddWidgetElfsight.vue b/domains/grid/components/AddWidgetElfsight.vue
new file mode 100644
index 00000000..71f1a0c6
--- /dev/null
+++ b/domains/grid/components/AddWidgetElfsight.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+type Props = {
+  type: GridWidgetType
+  id?: string
+  properties?: ElfsightWidgetProperties
+  width?: number
+  height?: number
+}
+
+const props = defineProps<Props>()
+const { formatMessage } = useIntl()
+const { closeModal, showModal } = useModal()
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const isEdit = computed(() => !!props.id)
+const widgetType = computed(() => props.type)
+
+const schemaMap = WIDGET_SCHEMA_MAP[widgetType.value]
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleFieldChange,
+  handleFormErrors,
+} = useForm(schemaMap?.input, {
+  input: props.properties?.id,
+})
+const isInstructionsVisible = ref(false)
+
+const handleSave = async () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  try {
+    const inputParse = await schemaMap?.input?.safeParseAsync(inputValues.value)
+    const properties = await schemaMap?.output?.parseAsync(inputParse?.data)
+
+    if (isEdit.value) {
+      updateGridWidget(props.id, {
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+    } else {
+      const newWidget: GridWidgetWithoutCords = createWidgetObject({
+        type: inputParse?.data?.widgetType, // widget type is not based on selection but on the parsing result
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+
+      addGridWidget(
+        newWidget,
+        getGridById(tempGrid.value, selectedGridId.value)
+      )
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
+  }
+}
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleBackToSelection = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    forceOpen: true,
+  })
+}
+
+const widgetInstructions = computed(() => {
+  return formatMessage(
+    `add_widget_${widgetType.value.toLowerCase()}_instructions`
+  )
+})
+
+const hasInstructions = computed(() => widgetInstructions.value !== '-')
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="flex items-center gap-3 pb-4">
+      <lukso-icon
+        v-if="!isEdit"
+        name="arrow-left-sm"
+        class="relative z-[1] cursor-pointer rounded-full bg-neutral-100 shadow-neutral-above-shadow transition hover:scale-105 hover:shadow-neutral-above-shadow-1xl active:scale-100 active:shadow-neutral-above-shadow"
+        @click="handleBackToSelection"
+      ></lukso-icon>
+      <div class="heading-inter-21-semi-bold">
+        {{
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_title`
+          )
+        }}
+      </div>
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{
+        formatMessage(
+          `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
+        )
+      }}
+
+      <!-- Instructions -->
+      <div v-if="hasInstructions" class="mt-2">
+        <div class="flex items-center">
+          <span
+            v-if="isInstructionsVisible"
+            class="cursor-pointer text-purple-51 underline hover:text-purple-41"
+            @click="isInstructionsVisible = !isInstructionsVisible"
+            >Hide instructions</span
+          >
+          <span
+            v-else
+            class="cursor-pointer text-purple-51 underline hover:text-purple-41"
+            @click="isInstructionsVisible = !isInstructionsVisible"
+            >Show instructions</span
+          >
+          <lukso-icon
+            name="arrow-down-sm"
+            color="purple-51"
+            :class="{
+              'rotate-180 transition': isInstructionsVisible,
+            }"
+          ></lukso-icon>
+        </div>
+        <div
+          v-if="isInstructionsVisible"
+          class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
+        >
+          {{ widgetInstructions }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <lukso-textarea
+      is-full-width
+      autofocus
+      :placeholder="
+        formatMessage(
+          `add_widget_${widgetType.toLowerCase()}_input_placeholder`
+        )
+      "
+      :value="inputValues.input"
+      :error="getFieldErrorMessage('input')"
+      @on-input="
+        (customEvent: CustomEvent) => handleFieldChange(customEvent, 'input')
+      "
+    ></lukso-textarea>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/domains/grid/components/AddWidgetSelection.vue b/domains/grid/components/AddWidgetSelection.vue
index d1e2af34..da08f342 100644
--- a/domains/grid/components/AddWidgetSelection.vue
+++ b/domains/grid/components/AddWidgetSelection.vue
@@ -119,14 +119,13 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           variant="light"
           :show-delay="SHOW_TOOLTIP_DELAY"
           :text="formatMessage('widget_type_elfsight')"
-          class="hidden"
         >
-          <img
-            src="/images/elfsight.png"
-            :alt="formatMessage('widget_type_elfsight')"
-            class="size-10 cursor-pointer transition hover:scale-105"
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('ELFSIGHT')"
-          />
+          >
+            <lukso-icon name="logo-elfsight-mono" size="large"></lukso-icon>
+          </div>
         </lukso-tooltip>
       </div>
     </section>
diff --git a/domains/grid/components/GridWidgetElfsight.vue b/domains/grid/components/GridWidgetElfsight.vue
index 9c0aec77..ffee1522 100644
--- a/domains/grid/components/GridWidgetElfsight.vue
+++ b/domains/grid/components/GridWidgetElfsight.vue
@@ -1,19 +1,36 @@
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
-
 type Props = {
   id: string
 }
 
-defineProps<Props>()
-useScriptTag('https://static.elfsight.com/platform/platform.js', () => {}, {
-  async: true,
-  defer: true,
-})
+const props = defineProps<Props>()
+const embedId = ref('')
+
+watch(
+  () => props.id,
+  async () => {
+    embedId.value = ''
+    await nextTick()
+    const script = document.createElement('script')
+    script.src = 'https://static.elfsight.com/platform/platform.js'
+    script.async = true
+    script.defer = true
+
+    const existingScript = document.querySelector(`script[src="${script.src}"]`)
+
+    if (existingScript) {
+      existingScript.remove()
+    }
+
+    embedId.value = props.id
+    document.body.appendChild(script)
+  },
+  { immediate: true, deep: true }
+)
 </script>
 
 <template>
-  <div class="relative m-3 overflow-auto">
-    <div :class="`elfsight-app-${id}`" data-elfsight-app-lazy></div>
+  <div v-if="embedId" class="relative m-3 overflow-auto">
+    <div :class="`elfsight-app-${embedId}`" data-elfsight-app-lazy></div>
   </div>
 </template>
diff --git a/domains/grid/components/GridWidgetIframe.vue b/domains/grid/components/GridWidgetIframe.vue
index fecbead9..27d1efe6 100644
--- a/domains/grid/components/GridWidgetIframe.vue
+++ b/domains/grid/components/GridWidgetIframe.vue
@@ -26,6 +26,13 @@ const reloadIframe = () => {
   onResize()
 }
 
+watch(
+  () => props.src,
+  () => {
+    reloadIframe()
+  }
+)
+
 useResizeObserver(iframeRef, useDebounceFn(reloadIframe, 100))
 </script>
 
diff --git a/domains/grid/schema/elfsightWidgetSchema.ts b/domains/grid/schema/elfsightWidgetSchema.ts
index 788521d3..fa34c6ba 100644
--- a/domains/grid/schema/elfsightWidgetSchema.ts
+++ b/domains/grid/schema/elfsightWidgetSchema.ts
@@ -1,6 +1,8 @@
 import { z } from 'zod'
 
-export const elfsightWidgetSchema = iframeWidgetSchema.extend({})
+export const elfsightWidgetSchema = z.object({
+  id: z.string(),
+})
 
 export const elfsightWidgetInputSchema = iframeWidgetSchema
   .partial()
@@ -11,4 +13,4 @@ export const elfsightWidgetInputSchema = iframeWidgetSchema
     platformParseTransform(values.input, ctx, GRID_WIDGET_TYPE.enum.ELFSIGHT)
   )
 
-export type ElfSightWidgetProperties = z.input<typeof elfsightWidgetSchema>
+export type ElfsightWidgetProperties = z.input<typeof elfsightWidgetSchema>
diff --git a/public/images/elfsight.png b/public/images/elfsight.png
deleted file mode 100644
index 320757a64ffffd8476a761032ae7f6f2d35a549a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9916
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
MeNdOH1%3(nA3Y%3VgLXD

diff --git a/translations/en_US.json b/translations/en_US.json
index 777fe658..43efa90a 100644
--- a/translations/en_US.json
+++ b/translations/en_US.json
@@ -99,6 +99,7 @@
   "no_asset_balance": "You don't own this asset.",
   "grid_widget_menu_edit": "Edit",
   "asset_all_creators_partial": "Not all creators are verified",
+  "edit_widget_elfsight_title": "Edit Elfsight widget",
   "add_widget_confirm": "Save",
   "header_install_extension": "Install Extension",
   "own_connected_profile_following_empty": "You follow no one",
@@ -153,6 +154,7 @@
   "edit_widget_x_description": "Edit this widget to display any X timeline or post.",
   "collection_not_avail_link": "in the settings",
   "add_widget_instagram_description": "Allows to embed Instagram post.",
+  "add_widget_elfsight_input_placeholder": "Add any Elfsight embed code",
   "token_asset_type_other": "OTHER",
   "profile_tab_tokens": "Tokens",
   "modal_mobile_search_placeholder": "Search by title",
@@ -178,6 +180,7 @@
   "shuffle_title": "Profiles",
   "token_asset_type_video": "VIDEO",
   "beta_warning": "You are on <strong>LUKSO Testnet</strong>. Do not send real LYX to any profiles made on this network!<br /><strong>If you are looking for LUKSO Mainnet, please use the switch in the footer.</strong>",
+  "edit_widget_elfsight_description": "Use this widget to display Elfsight on your grid.",
   "add_widget_iframe_input_placeholder": "URL of the webpage",
   "add_widget_text_link_placeholder": "Link URL",
   "profile_card_follow_button": "Follow",
@@ -273,6 +276,7 @@
   "token_collection_of": "Owns {count}",
   "add_widget_images_description": "Use this widget to display images from the web directly on your grid for visitors to view. Please note that uploading an image from your device is not available.",
   "grid_mobile_limitations_message": "some editing features are not available on mobile right now",
+  "add_widget_elfsight_instructions": "-",
   "add_widget_text_title_placeholder": "Please add a title",
   "data_provider_rpc_description": "Loads data directly from the blockchain using an RPC provider. If a custom RPC provider (This feature will be added later) is used the read data can not be manipulated by us. \n\nWill result in slower loading times during the loading of assets and some app features might be limited.",
   "move_widget_description": "Please select to which Grid you want to move this widget.",
@@ -292,6 +296,7 @@
   "token_details_buy_lyx": "Buy LYX",
   "footer_terms_text": "Terms & Conditions",
   "followed_by_text": "Followed by {names} {othersCount, plural,\n      =0 {you follow}\n      =1 {and 1 other you follow}\n      other {and # others you follow}\n    }",
+  "add_widget_elfsight_description": "Use this widget to display Elfsight on your grid.",
   "assets_empty_state_description": "To find out how to create your own assets such as Tokens and NFT’s on <strong>LUKSO</strong> head over to our <a href=\"https://docs.lukso.tech/guides/digital-assets/create-lsp7-digital-asset/\" target=\"_blank\" class=\"text-purple-51 hover:text-purple-41 underline\"><strong>documentation</strong></a>. ",
   "connect_or_install_button_coming_soon": "Coming soon...",
   "modal_delete_widget_confirm": "Delete",
@@ -323,6 +328,7 @@
   "missing_asset_label_missing": "Missing",
   "add_widget_images_placeholder": "URL of the image",
   "buy_lyx_card_buy_button": "Buy LYX",
+  "add_widget_elfsight_title": "Add Elfsight widget",
   "edit_widget_text_description": "Edit this widget to display and customize any text on your grid.",
   "error_unknown_standard": "Couldn't detect standard for this asset.",
   "settings_data_provider_title": "Data loading mode",