From 2a039c7e706f37eda01a7906f2767b6255b556d4 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Thu, 7 Aug 2025 09:23:51 +0330
Subject: [PATCH] export html

---
 .../setting/personality/utils/ExportHTML.ts   | 136 +++++++++++++++---
 1 file changed, 113 insertions(+), 23 deletions(-)

diff --git a/src/pages/setting/personality/utils/ExportHTML.ts b/src/pages/setting/personality/utils/ExportHTML.ts
index d4a8b73..7a72f8b 100644
--- a/src/pages/setting/personality/utils/ExportHTML.ts
+++ b/src/pages/setting/personality/utils/ExportHTML.ts
@@ -53,6 +53,19 @@ export const exportPersonalityToHTML = async (
     }
   };
 
+  // Helper function to get text alignment for email
+  const getTextAlignment = (alignment?: HorizontalAlignment) => {
+    switch (alignment) {
+      case HorizontalAlignment.LEFT:
+        return "left";
+      case HorizontalAlignment.RIGHT:
+        return "right";
+      case HorizontalAlignment.CENTER:
+      default:
+        return "center";
+    }
+  };
+
   // Render TextRenderer equivalent
   const renderTexts = (texts: TextType[]) => {
     console.log("🔥 [ExportHTML] renderTexts called with:", texts);
@@ -67,9 +80,13 @@ export const exportPersonalityToHTML = async (
           `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
         <tbody>
           <tr>
-            <td align="${textItem.alignment || "right"}" style="color: ${
-            textItem.color || "#000000"
-          }; font-size: ${textItem.fontSize || 14}px; font-weight: ${
+            <td align="${getTextAlignment(
+              textItem.alignment
+            )}" style="text-align: ${getTextAlignment(
+            textItem.alignment
+          )}; color: ${textItem.color || "#000000"}; font-size: ${
+            textItem.fontSize || 14
+          }px; font-weight: ${
             textItem.fontWeight || 400
           }; line-height: 1.4; padding-bottom: ${
             textIndex < (texts?.length || 0) - 1 ? "4px" : "0"
@@ -367,11 +384,46 @@ export const exportPersonalityToHTML = async (
     }
   };
 
+  // Helper function to generate border style for sections
+  const generateBorderStyle = (border?: {
+    width?: string;
+    color?: string;
+    style?: string;
+    sides?: string[];
+  }) => {
+    if (!border || border.style === "none") {
+      return "";
+    }
+
+    const {
+      width = "0px",
+      color = "#E5E7EB",
+      style = "solid",
+      sides = [],
+    } = border;
+
+    // اگر width صفر باشد یا تعریف نشده باشد، border نمایش نده
+    if (!width || width === "0px") {
+      return "";
+    }
+
+    if (sides.length === 0 || sides.length === 4) {
+      return `border: ${width} ${style} ${color};`;
+    }
+
+    // Generate individual border sides
+    const borderStyles: string[] = [];
+    sides.forEach((side) => {
+      borderStyles.push(`border-${side}: ${width} ${style} ${color}`);
+    });
+
+    return borderStyles.join("; ") + ";";
+  };
+
   // Render section equivalent (HeaderSection, ContentSection, FooterSection)
   const renderSection = (
     section: SectionType & { name?: string; isContent?: boolean },
-    sectionHeight: string,
-    paddingTop = ""
+    sectionHeight: string
   ) => {
     console.log(`🔥 [ExportHTML] Rendering section:`, {
       columnsCount: section.columnsCount,
@@ -381,13 +433,21 @@ export const exportPersonalityToHTML = async (
     });
 
     if (section.columnsCount > 0) {
-      return `<tr>
-        ${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
-          <table width="100%" cellpadding="0" cellspacing="0" border="0">
+      return `<tr style="margin: 0; padding: 0;">
+        <td style="margin: 0; padding: 0; vertical-align: top; border-spacing: 0;">
+          <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; ${generateBorderStyle(
+            section.border
+          )}">
             <tbody>
               <tr>
-                <td style="padding: 0px; border-radius: 24px;">
-                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
+                <td style="padding: ${
+                  section.padding || "0px"
+                }; margin: 0; border-radius: 24px; vertical-align: top; ${generateBorderStyle(
+        section.border
+      )}">
+                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; ${generateBorderStyle(
+                    section.border
+                  )}">
                     <tbody>
                       <tr>
                         ${Array.from(
@@ -432,7 +492,9 @@ export const exportPersonalityToHTML = async (
                                   };`
                                 : ""
                             } padding: 0; vertical-align: top; border-radius: 8px; position: relative;">
-                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; height: ${sectionHeight};">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; height: ${sectionHeight}; ${generateBorderStyle(
+                              section.border
+                            )}">
                               <tbody>`;
 
                             // اگر محتوایی وجود دارد (متن، دکمه، تصویر، یا شبکه اجتماعی)
@@ -449,7 +511,11 @@ export const exportPersonalityToHTML = async (
                                   item.buttons[0]
                                 )}" valign="${getButtonVerticalAlign(
                                   item.buttons[0]
-                                )}" style="padding: 8px;">
+                                )}" style="padding: 8px; text-align: ${getButtonHorizontalAlign(
+                                  item.buttons[0]
+                                )}; vertical-align: ${getButtonVerticalAlign(
+                                  item.buttons[0]
+                                )}; ${generateBorderStyle(section.border)}">
                                   ${renderImages(item?.images || [])}
                                   ${renderSocials(item?.socials || [])}
                                   ${
@@ -475,8 +541,22 @@ export const exportPersonalityToHTML = async (
                                       30
                                     ).toString();
 
+                                const textAlignment = hasTexts
+                                  ? getTextAlignment(item.texts[0]?.alignment)
+                                  : "center";
+                                const textVerticalAlignment =
+                                  hasTexts && item.texts[0]?.verticalAlignment
+                                    ? item.texts[0].verticalAlignment === "top"
+                                      ? "top"
+                                      : item.texts[0].verticalAlignment ===
+                                        "bottom"
+                                      ? "bottom"
+                                      : "middle"
+                                    : "middle";
                                 result += `<tr>
-                              <td width="100%" height="${mainHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
+                              <td width="100%" height="${mainHeight}" align="${textAlignment}" valign="${textVerticalAlignment}" style="padding: 20px; text-align: ${textAlignment}; vertical-align: ${textVerticalAlignment}; font-size: 15px; line-height: 1.8; ${generateBorderStyle(
+                                  section.border
+                                )}">
                                 ${renderTexts(item?.texts || [])}
                                 ${renderImages(item?.images || [])}
                                 ${renderSocials(item?.socials || [])}
@@ -498,7 +578,11 @@ export const exportPersonalityToHTML = async (
                                   item.buttons[0]
                                 )}" valign="${getButtonVerticalAlign(
                                     item.buttons[0]
-                                  )}" style="padding: 0 8px 8px 8px;">
+                                  )}" style="padding: 0 8px 8px 8px; text-align: ${getButtonHorizontalAlign(
+                                    item.buttons[0]
+                                  )}; vertical-align: ${getButtonVerticalAlign(
+                                    item.buttons[0]
+                                  )}; ${generateBorderStyle(section.border)}">
                                   ${renderButtons(item.buttons)}
                                 </td>
                               </tr>`;
@@ -522,7 +606,9 @@ export const exportPersonalityToHTML = async (
                                   30
                                 );
                                 result += `<tr>
-                              <td width="100%" height="${emptyHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
+                              <td width="100%" height="${emptyHeight}" style="padding: 20px; text-align: right; vertical-align: top; font-size: 15px; line-height: 1.8; ${generateBorderStyle(
+                                  section.border
+                                )}">
                                 <div style="margin: 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>
                               </td>
                             </tr>`;
@@ -570,13 +656,17 @@ export const exportPersonalityToHTML = async (
         ? Math.max(sectionHeightNumber + 40, 286)
         : sectionHeight;
 
-      return `<tr>
-        ${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
-          <table width="100%" cellpadding="0" cellspacing="0" border="0">
+      return `<tr style="margin: 0; padding: 0;">
+        <td style="margin: 0; padding: 0; vertical-align: top; border-spacing: 0;">
+          <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; ${generateBorderStyle(
+            section.border
+          )}">
             <tbody>
               <tr>
-                <td style="height: ${displayHeight}; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
-                  <div style="color: #888; font-size: 14px; margin-bottom: 8px;">
+                <td style="height: ${displayHeight}; margin: 0; border-radius: 24px; text-align: right; vertical-align: middle; padding: ${
+        section.padding || "0px"
+      }; ${generateBorderStyle(section.border)}">
+                  <div style="color: #888; font-size: 14px; margin: 0; padding: 0;">
                     ${emptyMessage}
                   </div>
                 </td>
@@ -639,8 +729,8 @@ export const exportPersonalityToHTML = async (
         isContent: sectionData.isContent,
       });
 
-      // Pass the complete section data for rendering
-      const renderedSection = renderSection(sectionData, height, "");
+      // Pass the complete section data for rendering with no spacing
+      const renderedSection = renderSection(sectionData, height);
       console.log(
         `🔥 [ExportHTML] Section ${sectionKey} rendered, HTML length:`,
         renderedSection.length
@@ -660,7 +750,7 @@ export const exportPersonalityToHTML = async (
   );
 
   const html = `<div style="max-width: 600px; margin: 0 auto; direction: rtl;">
-    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
+    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">
       <tbody>
         ${sectionsHtml}
       </tbody>