chore: add more templates

2025-07-21 21:25:44 +04:00
parent 44d29fa708
commit 4610cff67e
5 changed files with 994 additions and 109 deletions
@@ -53,6 +53,21 @@ const buttonComponents = computed(() => {
  );
 });

+const interactiveComponents = computed(() => {
+  return templateComponents.value.filter(
+    component => ['LIST', 'PRODUCT', 'CATALOG'].includes(component.type)
+  );
+});
+
+const isInteractiveTemplate = computed(() => {
+  const hasInteractiveButtons = buttonComponents.value.some(component =>
+    component.buttons?.some(button =>
+      ['quick_reply', 'url', 'phone_number', 'catalog_browse'].includes(button.type)
+    )
+  );
+  return hasInteractiveButtons || interactiveComponents.value.length > 0;
+});
+
 const legacyParams = computed(() => {
  const params = {};
  Object.keys(processedParams.value).forEach(key => {
@@ -90,7 +105,17 @@ const processedStringWithVariableHighlight = computed(() => {
 const rules = computed(() => {
  const paramRules = {};
  Object.keys(processedParams.value).forEach(key => {
-    paramRules[key] = { required: requiredIf(true) };
+    if (key === 'header' && processedParams.value.header.location_type === 'location') {
+      // Add specific validation for location parameters
+      paramRules[key] = {
+        location: {
+          latitude: { required: requiredIf(true) },
+          longitude: { required: requiredIf(true) }
+        }
+      };
+    } else {
+      paramRules[key] = { required: requiredIf(true) };
+    }
  });
  return {
    processedParams: paramRules,
@@ -106,45 +131,89 @@ const getFieldErrorType = key => {

 const generateVariables = () => {
  const allVariables = {};
+  
+  // Debug: Log template structure
+  console.log('Template components:', templateComponents.value);
+  console.log('Header component:', headerComponent.value);

  // Process body variables
  const bodyVars = templateString.value.match(/{{([^}]+)}}/g) || [];
-  bodyVars.forEach(variable => {
-    const key = processVariable(variable);
-    if (!allVariables.body) allVariables.body = {};
-    allVariables.body[key] = '';
-  });
+  if (bodyVars.length > 0) {
+    allVariables.body = {};
+    bodyVars.forEach(variable => {
+      const key = processVariable(variable);
+      // Special handling for authentication templates
+      if (props.template?.category === 'AUTHENTICATION') {
+        if (
+          key === '1' ||
+          key.toLowerCase().includes('otp') ||
+          key.toLowerCase().includes('code')
+        ) {
+          allVariables.body.otp_code = '';
+        } else if (
+          key === '2' ||
+          key.toLowerCase().includes('expiry') ||
+          key.toLowerCase().includes('minute')
+        ) {
+          allVariables.body.expiry_minutes = '';
+        } else {
+          allVariables.body[key] = '';
+        }
+      } else {
+        allVariables.body[key] = '';
+      }
+    });
+  }

  // Process header variables
  if (headerComponent.value) {
    if (headerComponent.value.text) {
      // Text headers with variables
      const headerVars = headerComponent.value.text.match(/{{([^}]+)}}/g) || [];
-      headerVars.forEach(variable => {
-        const key = processVariable(variable);
-        if (!allVariables.header) allVariables.header = {};
-        allVariables.header[key] = '';
-      });
+      if (headerVars.length > 0) {
+        allVariables.header = {};
+        headerVars.forEach(variable => {
+          const key = processVariable(variable);
+          allVariables.header[key] = '';
+        });
+      }
    } else if (
      headerComponent.value.format &&
      ['IMAGE', 'VIDEO', 'DOCUMENT'].includes(headerComponent.value.format)
    ) {
      // Media headers need URL input
-      if (!allVariables.header) allVariables.header = {};
-      allVariables.header.media_url = '';
-      allVariables.header.media_type =
-        headerComponent.value.format.toLowerCase();
+      allVariables.header = {
+        media_url: '',
+        media_type: headerComponent.value.format.toLowerCase(),
+      };
+    } else if (
+      headerComponent.value.format &&
+      headerComponent.value.format === 'LOCATION'
+    ) {
+      // Location headers need location data
+      console.log('Detected LOCATION header template:', headerComponent.value);
+      allVariables.header = {
+        location: {
+          latitude: '',
+          longitude: '',
+          name: '',
+          address: '',
+        },
+        location_type: 'location',
+      };
    }
  }

  // Process footer variables
  if (footerComponent.value?.text) {
    const footerVars = footerComponent.value.text.match(/{{([^}]+)}}/g) || [];
-    footerVars.forEach(variable => {
-      const key = processVariable(variable);
-      if (!allVariables.footer) allVariables.footer = {};
-      allVariables.footer[key] = '';
-    });
+    if (footerVars.length > 0) {
+      allVariables.footer = {};
+      footerVars.forEach(variable => {
+        const key = processVariable(variable);
+        allVariables.footer[key] = '';
+      });
+    }
  }

  // Process button variables
@@ -154,25 +223,62 @@ const generateVariables = () => {
        // Handle URL buttons with variables
        if (button.url && button.url.includes('{{')) {
          const buttonVars = button.url.match(/{{([^}]+)}}/g) || [];
-          buttonVars.forEach(() => {
+          if (buttonVars.length > 0) {
            if (!allVariables.buttons) allVariables.buttons = [];
-            if (!allVariables.buttons[index]) allVariables.buttons[index] = {};
-            allVariables.buttons[index].type = 'url';
-            allVariables.buttons[index].parameter = '';
-          });
+            allVariables.buttons[index] = {
+              type: 'url',
+              parameter: '',
+            };
+          }
        }

        // Handle copy code buttons
        if (button.type === 'COPY_CODE') {
          if (!allVariables.buttons) allVariables.buttons = [];
-          if (!allVariables.buttons[index]) allVariables.buttons[index] = {};
-          allVariables.buttons[index].type = 'copy_code';
-          allVariables.buttons[index].parameter = '';
+          allVariables.buttons[index] = {
+            type: 'copy_code',
+            parameter: '',
+          };
+        }
+
+        // Handle interactive buttons with dynamic text
+        if (['quick_reply', 'url', 'phone_number'].includes(button.type)) {
+          if (button.text && button.text.includes('{{')) {
+            if (!allVariables.buttons) allVariables.buttons = [];
+            allVariables.buttons[index] = {
+              type: button.type,
+              parameter: '',
+              text: button.text,
+            };
+          }
        }
      });
    }
  });

+  // Process interactive components (LIST, PRODUCT, CATALOG)
+  interactiveComponents.value.forEach(component => {
+    if (component.type === 'LIST') {
+      allVariables.interactive = {
+        type: 'list',
+        button_text: 'Select Option',
+        sections: component.sections || []
+      };
+    } else if (component.type === 'PRODUCT') {
+      allVariables.interactive = {
+        type: 'product',
+        catalog_id: component.catalog_id || '',
+        product_id: component.product_id || ''
+      };
+    } else if (component.type === 'CATALOG') {
+      allVariables.interactive = {
+        type: 'catalog',
+        catalog_id: component.catalog_id || '',
+        title: component.title || 'Browse Products'
+      };
+    }
+  });
+
  processedParams.value = allVariables;
 };

@@ -227,6 +333,70 @@ const getHeaderFieldPlaceholder = key => {
  return `Enter ${key} value`;
 };

+const getBodyParameterLabel = key => {
+  if (props.template?.category === 'AUTHENTICATION') {
+    switch (key) {
+      case 'otp_code':
+        return t('WHATSAPP_TEMPLATES.PARSER.OTP_CODE') || 'OTP Code';
+      case 'expiry_minutes':
+        return (
+          t('WHATSAPP_TEMPLATES.PARSER.EXPIRY_MINUTES') || 'Expiry (minutes)'
+        );
+      default:
+        return key;
+    }
+  }
+  return key;
+};
+
+const getBodyParameterPlaceholder = key => {
+  if (props.template?.category === 'AUTHENTICATION') {
+    switch (key) {
+      case 'otp_code':
+        return (
+          t('WHATSAPP_TEMPLATES.PARSER.OTP_CODE_PLACEHOLDER') ||
+          'Enter 4-8 digit OTP code'
+        );
+      case 'expiry_minutes':
+        return (
+          t('WHATSAPP_TEMPLATES.PARSER.EXPIRY_MINUTES_PLACEHOLDER') ||
+          'Enter expiry time in minutes'
+        );
+      default:
+        return `Enter ${key} value`;
+    }
+  }
+  return `Enter ${key} value`;
+};
+
+const getBodyParameterType = key => {
+  if (props.template?.category === 'AUTHENTICATION') {
+    switch (key) {
+      case 'otp_code':
+        return 'tel';
+      case 'expiry_minutes':
+        return 'number';
+      default:
+        return 'text';
+    }
+  }
+  return 'text';
+};
+
+const getBodyParameterMaxLength = key => {
+  if (props.template?.category === 'AUTHENTICATION') {
+    switch (key) {
+      case 'otp_code':
+        return 8;
+      case 'expiry_minutes':
+        return 3;
+      default:
+        return null;
+    }
+  }
+  return null;
+};
+
 const sendMessage = async () => {
  const isValid = await v$.value.$validate();
  if (!isValid) return;
@@ -261,6 +431,7 @@ onMounted(() => {
        )
      }}
    </span>
+
    <p
      v-dompurify-html="processedStringWithVariableHighlight"
      class="mb-0 text-sm text-n-slate-11"
@@ -285,11 +456,93 @@ onMounted(() => {
          'Header Parameters'
        }}
      </h4>
+      <!-- Location Parameters -->
      <div
-        v-for="(variable, key) in processedParams.header"
-        :key="`header-${key}`"
-        class="flex items-center w-full gap-2 mb-2"
+        v-if="processedParams.header.location_type === 'location'"
+        class="w-full space-y-3 mb-4 p-3 bg-n-solid-1 rounded-lg border border-n-weak"
      >
+        <div class="flex items-center gap-2 mb-2">
+          <div class="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+            <div class="w-2 h-2 bg-white rounded-full"></div>
+          </div>
+          <span class="text-sm font-medium text-n-slate-12">Location Details</span>
+        </div>
+        
+        <div class="grid grid-cols-2 gap-2">
+          <div>
+            <label class="text-xs font-medium text-n-slate-10 mb-1 block">
+              📍 Latitude <span class="text-red-500">*</span>
+            </label>
+            <Input
+              v-model="processedParams.header.location.latitude"
+              custom-input-class="!h-8 w-full !bg-transparent"
+              class="w-full"
+              type="number"
+              step="any"
+              placeholder="37.7749 (San Francisco)"
+              :message-type="getFieldErrorType('header.location.latitude')"
+            />
+            <span class="text-xs text-n-slate-9">Range: -90.0 to 90.0</span>
+          </div>
+          <div>
+            <label class="text-xs font-medium text-n-slate-10 mb-1 block">
+              📍 Longitude <span class="text-red-500">*</span>
+            </label>
+            <Input
+              v-model="processedParams.header.location.longitude"
+              custom-input-class="!h-8 w-full !bg-transparent"
+              class="w-full"
+              type="number"
+              step="any"
+              placeholder="-122.4194 (San Francisco)"
+              :message-type="getFieldErrorType('header.location.longitude')"
+            />
+            <span class="text-xs text-n-slate-9">Range: -180.0 to 180.0</span>
+          </div>
+        </div>
+        
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">
+            🏢 Location Name
+          </label>
+          <Input
+            v-model="processedParams.header.location.name"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="Your Business Name"
+            :message-type="getFieldErrorType('header.location.name')"
+          />
+        </div>
+        
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">
+            📮 Full Address
+          </label>
+          <Input
+            v-model="processedParams.header.location.address"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="123 Main Street, City, State 12345"
+            :message-type="getFieldErrorType('header.location.address')"
+          />
+        </div>
+        
+        <div class="text-xs text-n-slate-9 bg-blue-50 p-2 rounded border-l-4 border-blue-400">
+          💡 <strong>Tip:</strong> You can get coordinates by searching your location on Google Maps, 
+          right-clicking the pin, and copying the latitude/longitude values.
+        </div>
+      </div>
+
+      <!-- Regular Header Parameters -->
+      <div
+        v-if="processedParams.header.location_type !== 'location'"
+      >
+        <div
+          v-for="(variable, key) in processedParams.header"
+          v-if="!['location', 'location_type'].includes(key)"
+          :key="`header-${key}`"
+          class="flex items-center w-full gap-2 mb-2"
+        >
        <span
          class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
        >
@@ -303,6 +556,7 @@ onMounted(() => {
          :placeholder="getHeaderFieldPlaceholder(key)"
          :type="key === 'media_url' ? 'url' : 'text'"
        />
+        </div>
      </div>
    </div>

@@ -321,13 +575,16 @@ onMounted(() => {
        <span
          class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
        >
-          {{ key }}
+          {{ getBodyParameterLabel(key) }}
        </span>
        <Input
          v-model="processedParams.body[key]"
          custom-input-class="!h-8 w-full !bg-transparent"
          class="w-full"
          :message-type="getFieldErrorType(`body.${key}`)"
+          :placeholder="getBodyParameterPlaceholder(key)"
+          :type="getBodyParameterType(key)"
+          :maxlength="getBodyParameterMaxLength(key)"
        />
      </div>
    </div>
@@ -359,6 +616,81 @@ onMounted(() => {
      </div>
    </div>

+    <!-- Interactive Components -->
+    <div v-if="processedParams.interactive" class="w-full">
+      <h4 class="text-sm font-medium text-n-slate-12 mb-2">
+        {{
+          t('WHATSAPP_TEMPLATES.PARSER.INTERACTIVE_PARAMETERS') ||
+          'Interactive Parameters'
+        }}
+      </h4>
+      
+      <!-- Product Template -->
+      <div v-if="processedParams.interactive.type === 'product'" class="space-y-2 mb-4">
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">Catalog ID</label>
+          <Input
+            v-model="processedParams.interactive.catalog_id"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="Enter catalog ID"
+            :message-type="getFieldErrorType('interactive.catalog_id')"
+          />
+        </div>
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">Product ID</label>
+          <Input
+            v-model="processedParams.interactive.product_id"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="Enter product retailer ID"
+            :message-type="getFieldErrorType('interactive.product_id')"
+          />
+        </div>
+      </div>
+
+      <!-- Catalog Template -->
+      <div v-else-if="processedParams.interactive.type === 'catalog'" class="space-y-2 mb-4">
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">Catalog ID</label>
+          <Input
+            v-model="processedParams.interactive.catalog_id"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="Enter catalog ID"
+            :message-type="getFieldErrorType('interactive.catalog_id')"
+          />
+        </div>
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">Browse Title</label>
+          <Input
+            v-model="processedParams.interactive.title"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="Browse Products"
+            :message-type="getFieldErrorType('interactive.title')"
+          />
+        </div>
+      </div>
+
+      <!-- List Template -->
+      <div v-else-if="processedParams.interactive.type === 'list'" class="space-y-2 mb-4">
+        <div>
+          <label class="text-xs font-medium text-n-slate-10 mb-1 block">Button Text</label>
+          <Input
+            v-model="processedParams.interactive.button_text"
+            custom-input-class="!h-8 w-full !bg-transparent"
+            class="w-full"
+            placeholder="Select an Option"
+            :message-type="getFieldErrorType('interactive.button_text')"
+          />
+        </div>
+        <div class="text-xs text-n-slate-10">
+          List sections are configured in the template and cannot be modified here.
+        </div>
+      </div>
+    </div>
+
    <!-- Button Variables -->
    <div v-if="processedParams.buttons" class="w-full">
      <h4 class="text-sm font-medium text-n-slate-12 mb-2">
@@ -43,6 +43,20 @@ export default {
      ).text;
    });

+    const headerComponent = computed(() => {
+      return props.template.components.find(
+        component => component.type === 'HEADER'
+      );
+    });
+
+    const hasMediaHeader = computed(() => {
+      return (
+        headerComponent.value &&
+        headerComponent.value.format &&
+        ['IMAGE', 'VIDEO', 'DOCUMENT'].includes(headerComponent.value.format)
+      );
+    });
+
    const variables = computed(() => {
      return templateString.value.match(/{{([^}]+)}}/g);
    });
@@ -65,14 +79,23 @@ export default {
    );

    const generateVariables = () => {
-      const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
-      if (!matchedVariables) return;
+      const params = {};

-      const finalVars = matchedVariables.map(i => processVariable(i));
-      processedParams.value = finalVars.reduce((acc, variable) => {
-        acc[variable] = '';
-        return acc;
-      }, {});
+      // Add media URL field if template has media header
+      if (hasMediaHeader.value) {
+        params.media_url = '';
+      }
+
+      // Add body variables
+      const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+      if (matchedVariables) {
+        const finalVars = matchedVariables.map(i => processVariable(i));
+        finalVars.forEach(variable => {
+          params[variable] = '';
+        });
+      }
+
+      processedParams.value = params;
    };

    const resetTemplate = () => {
@@ -83,6 +106,29 @@ export default {
      v$.value.$touch();
      if (v$.value.$invalid) return;

+      // Prepare enhanced template parameters for media support
+      const enhancedParams = {};
+
+      // Handle media header
+      if (hasMediaHeader.value && processedParams.value.media_url) {
+        enhancedParams.header = {
+          media_url: processedParams.value.media_url,
+          media_type: headerComponent.value.format.toLowerCase(),
+        };
+      }
+
+      // Handle body variables
+      const bodyParams = {};
+      Object.keys(processedParams.value).forEach(key => {
+        if (key !== 'media_url') {
+          bodyParams[key] = processedParams.value[key];
+        }
+      });
+
+      if (Object.keys(bodyParams).length > 0) {
+        enhancedParams.body = bodyParams;
+      }
+
      const payload = {
        message: processedString.value,
        templateParams: {
@@ -90,7 +136,7 @@ export default {
          category: props.template.category,
          language: props.template.language,
          namespace: props.template.namespace,
-          processed_params: processedParams.value,
+          processed_params: enhancedParams,
        },
      };
      emit('sendMessage', payload);
@@ -103,6 +149,8 @@ export default {
      variables,
      templateString,
      processedString,
+      headerComponent,
+      hasMediaHeader,
      v$,
      resetTemplate,
      sendMessage,
@@ -119,26 +167,57 @@ export default {
      readonly
      class="template-input"
    />
-    <div v-if="variables" class="p-2.5">
-      <p class="text-sm font-semibold mb-2.5">
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-      </p>
-      <div
-        v-for="(variable, key) in processedParams"
-        :key="key"
-        class="items-center flex mb-2.5"
-      >
-        <span
-          class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+    <div v-if="variables || hasMediaHeader" class="p-2.5">
+      <!-- Media Header Section -->
+      <div v-if="hasMediaHeader" class="mb-4">
+        <p class="text-sm font-semibold mb-2.5">
+          {{
+            headerComponent.format.charAt(0) +
+            headerComponent.format.slice(1).toLowerCase()
+          }}
+          Header
+        </p>
+        <div class="items-center flex mb-2.5">
+          <span
+            class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+          >
+            {{ headerComponent.format.toLowerCase() }} URL
+          </span>
+          <woot-input
+            v-model="processedParams.media_url"
+            type="url"
+            class="flex-1 text-sm ml-2.5"
+            :placeholder="`Enter ${headerComponent.format.toLowerCase()} URL`"
+            :styles="{ marginBottom: 0 }"
+          />
+        </div>
+      </div>
+
+      <!-- Variables Section -->
+      <div v-if="variables">
+        <p class="text-sm font-semibold mb-2.5">
+          {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+        </p>
+        <div
+          v-for="(variable, key) in processedParams"
+          :key="key"
+          class="items-center flex mb-2.5"
        >
-          {{ key }}
-        </span>
-        <woot-input
-          v-model="processedParams[key]"
-          type="text"
-          class="flex-1 text-sm ml-2.5"
-          :styles="{ marginBottom: 0 }"
-        />
+          <!-- Skip media_url as it's handled above -->
+          <template v-if="key !== 'media_url'">
+            <span
+              class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+            >
+              {{ key }}
+            </span>
+            <woot-input
+              v-model="processedParams[key]"
+              type="text"
+              class="flex-1 text-sm ml-2.5"
+              :styles="{ marginBottom: 0 }"
+            />
+          </template>
+        </div>
      </div>
      <p
        v-if="v$.$dirty && v$.$invalid"
@@ -260,4 +260,25 @@ export const templates = [
    ],
    rejected_reason: 'NONE',
  },
+  {
+    name: 'order_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://example.com/shoes.jpg'],
+        },
+      },
+      {
+        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
 ];