From 7047b8c3435071d130730e43680cc1f5d63f5bbd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 23 Apr 2024 15:10:46 +0530
Subject: [PATCH] fix: added whatsapp template selector modal

---
 .../Modals/WhatsappTemplateSelectorModal.vue  | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue

diff --git a/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue b/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
new file mode 100644
index 00000000..c6f3330b
--- /dev/null
+++ b/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
@@ -0,0 +1,88 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{ title: __('WhatsApp Templates'), size: '4xl' }"
+  >
+    <template #body-content>
+      <TextInput
+        ref="searchInput"
+        v-model="search"
+        type="text"
+        :placeholder="__('Welcome Message')"
+      >
+        <template #prefix>
+          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
+        </template>
+      </TextInput>
+      <div
+        v-if="filteredTemplates.length"
+        class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto"
+      >
+        <div
+          v-for="template in filteredTemplates"
+          :key="template.name"
+          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
+          @click="emit('send', template.name)"
+        >
+          <div class="border-b pb-2 text-base font-semibold">
+            {{ template.name }}
+          </div>
+          <TextEditor
+            v-if="template.template"
+            :content="template.template"
+            :editable="false"
+            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            class="flex-1 overflow-hidden"
+          />
+        </div>
+      </div>
+      <div v-else class="mt-2">
+        <div class="flex h-56 flex-col items-center justify-center">
+          <div class="text-lg text-gray-500">
+            {{ __('No templates found') }}
+          </div>
+          <Button :label="__('Create New')" class="mt-4" />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { TextEditor, createListResource } from 'frappe-ui'
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
+
+const show = defineModel()
+const searchInput = ref('')
+
+const emit = defineEmits(['send'])
+
+const search = ref('')
+
+const templates = createListResource({
+  type: 'list',
+  doctype: 'WhatsApp Templates',
+  cache: ['whatsappTemplates'],
+  fields: ['name', 'template', 'footer'],
+  filters: { status: 'APPROVED'},
+  orderBy: 'modified desc',
+  pageLength: 99999,
+  auto: true,
+})
+
+onMounted(() => {
+  if (templates.data == null) {
+    templates.fetch()
+  }
+})
+
+const filteredTemplates = computed(() => {
+  return (
+    templates.data?.filter((template) => {
+      return template.name.toLowerCase().includes(search.value.toLowerCase())
+    }) ?? []
+  )
+})
+
+watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus()))
+</script>