chore: add custom name option

2025-08-23 00:54:15 +05:30
parent 5ecf39a3a7
commit f94f436d0b
6 changed files with 56 additions and 6 deletions
@@ -117,6 +117,11 @@ const updateMediaUrl = value => {
  processedParams.value.header.media_url = value;
 };

+const updateMediaName = value => {
+  processedParams.value.header ??= {};
+  processedParams.value.header.media_name = value;
+};
+
 const sendMessage = () => {
  v$.value.$touch();
  if (v$.value.$invalid) return;
@@ -163,6 +168,7 @@ defineExpose({
  renderedTemplate,
  v$,
  updateMediaUrl,
+  updateMediaName,
  sendMessage,
  resetTemplate,
  goBack,
@@ -216,6 +222,21 @@ defineExpose({
            @update:model-value="updateMediaUrl"
          />
        </div>
+        <div
+          v-if="headerComponent?.format === 'DOCUMENT'"
+          class="flex items-center mb-2.5"
+        >
+          <Input
+            :model-value="processedParams.header?.media_name || ''"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('WHATSAPP_TEMPLATES.PARSER.MEDIA_NAME_PLACEHOLDER') ||
+              'Enter custom filename (optional)'
+            "
+            @update:model-value="updateMediaName"
+          />
+        </div>
      </div>

      <!-- Body Variables Section -->
@@ -51,6 +51,9 @@ export const buildTemplateParameters = (template, hasMediaHeaderValue) => {
    if (!allVariables.header) allVariables.header = {};
    allVariables.header.media_url = '';
    allVariables.header.media_type = headerComponent.format.toLowerCase();
+    if (headerComponent.format === 'DOCUMENT') {
+      allVariables.header.media_name = '';
+    }
  }

  // Process button variables
@@ -40,6 +40,7 @@
      "BUTTON_LABEL": "Button {index}",
      "COUPON_CODE": "Enter coupon code (max 15 chars)",
      "MEDIA_URL_LABEL": "Enter {type} URL",
+      "MEDIA_NAME_PLACEHOLDER": "Enter custom filename (optional)",
      "BUTTON_PARAMETER": "Enter button parameter"
    }
  }