1import{r as s,h as u,i as y,k as w,e as v,l as k,a as T,m as C,n as z,o as P,p as S,q as I,t as A,j as e,S as L,O as E}from"./index-Csf1K8Hn.js";import{u as R}from"./useLocation-BnpXo5_e.js";import{u as N}from"./useOnboardingDetection-BidbpPrk.js";import{u as M}from"./useMigrateReminderTemplates-hij8Fi7R.js";import"./profileSegmentationsApiSlice-BUhHFaeq.js";import"./administrationsApiSlice-QOJlgS2T.js";import"./settingsApiSlice-D4mh7AjB.js";import"./paymentJourneysApiSlice-DkSjMSoS.js";const m={name:"Tutorial: how to template",hml:`<div style="width: 100%; min-height: 100vh; font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #172b4d; background-color: #f4f5f7; padding: 40px; box-sizing: border-box;"> 2 <div style="max-width: 950px; margin: 0 auto;"> 3 <div style="background: linear-gradient(135deg, #5433ff 0%, #20bdff 100%); border-radius: 12px 12px 0 0; padding: 50px 40px; color: #ffffff; text-align: center; box-shadow: 0 4px 15px rgba(84, 51, 255, 0.2);"> 4 <h1 style="margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">Mastering the Template Editor</h1> 5 <p style="margin: 15px 0 0 0; font-size: 18px; opacity: 0.95; font-weight: 500;">The comprehensive guide to building dynamic, professional templates in MaxCredible.</p> 6 </div> 7 <div style="background-color: #ffffff; padding: 0 40px 40px 40px; border-radius: 0 0 12px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #dfe1e6; border-top: none;"> 8 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #e6fcff; color: #008da6; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 1</span> 9 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">The Basics: WYSIWYG Editing</h2> 10 <p>The editor is "What You See Is What You Get." It works just like Word or Google Docs for basic tasks.</p> 11 <ul style="background: #f9f9fa; padding: 20px 20px 20px 40px; border-radius: 8px; border-left: 4px solid #5433ff; list-style-type: disc; margin-left: 1.5em;"> 12 <li style="margin-bottom: 10px;"><strong>Click and Type:</strong> Simply click anywhere in the white space to start writing text.</li> 13 <li style="margin-bottom: 10px;"><strong>Formatting:</strong> Use the toolbar icons (<strong>B</strong>, <em>I</em>, <u>U</u>) to style your text.</li> 14 <li style="margin-bottom: 10px;"><strong>Alignment:</strong> Use the alignment buttons to center text, align left, or align right.</li> 15 <li><strong>Undo/Redo:</strong> Made a mistake? Press <code>Ctrl+Z</code> (Cmd+Z) immediately to undo.</li> 16 </ul> 17 </div> 18 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #fff0b3; color: #b38600; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 2</span> 19 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">The Golden Rule of Email Design</h2> 20 <p>Building templates for emails is very different from modern web design. Email clients (like Outlook 2016, Gmail, Yahoo) are old-fashioned and do not support modern layout code.</p> 21 <div style="background-color: #fff7d6; color: #172b4d; padding: 20px; border-radius: 8px; border: 1px solid #ffe380; display: flex; align-items: flex-start;"> 22 <div style="font-size: 24px; margin-right: 15px;">â ï¸</div> 23 <div><strong style="display: block; margin-bottom: 5px; color: #b38600;">The Golden Rule: Use Tables for Layout</strong> Never use "columns", "float", or "flexbox" to position items side-by-side (like a logo on the right and address on the left). <strong>Always use an HTML Table with invisible borders.</strong></div> 24 </div> 25 </div> 26 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #e3fcef; color: #006644; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 3</span> 27 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">Working with Tables</h2> 28 <p>Tables are your grid system. You can manipulate them visually or via code.</p> 29 <h3 style="font-size: 18px; color: #5433ff;">Basic Table Editing (Visual)</h3> 30 <ol style="list-style-type: decimal; margin-left: 1.5em;"> 31 <li style="margin-bottom: 10px;"><strong>Insert Table:</strong> Click the Grid icon in the toolbar and select a 2x1 grid to place items side-by-side.</li> 32 <li style="margin-bottom: 10px;"><strong>Right-Click Menu:</strong> Right-click inside any cell to add rows, delete columns, or merge cells.</li> 33 <li style="margin-bottom: 10px;"><strong>Table Properties:</strong> Right-click and select <em>Table Properties</em>. Set <strong>Border width</strong> to <code>0</code> if you want an invisible layout table.</li> 34 </ol> 35 <h3 style="font-size: 18px; color: #5433ff; margin-top: 20px;">Advanced Table Editing (Source Code)</h3> 36 <p>For pixel-perfect control, click the <code><></code> button. A table structure looks like this:</p> 37 <div style="background-color: #282c34; color: #abb2bf; padding: 15px; border-radius: 6px; font-family: 'Consolas', monospace; font-size: 13px;"><table width="100%" border="0"> <tr> <span style="color: #7f848e;"><!-- Row --></span> <td width="50%">Left Content</td> <span style="color: #7f848e;"><!-- Cell --></span> <td width="50%">Right Content</td> </tr></table></div> 38 </div> 39 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #eae6ff; color: #403294; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 4</span> 40 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">The Magic of Hybrid Templates</h2> 41 <p>You can create ONE template that works for both Email and Print by using conditional tags. The system will automatically delete the section that isn't relevant to the current sending method.</p> 42 <div style="display: flex; gap: 20px; flex-wrap: wrap;"> 43 <div style="flex: 1; background: #f4f5f7; border: 1px solid #dfe1e6; padding: 20px; border-radius: 8px; min-width: 250px;"> 44 <h4 style="margin-top: 0; color: #0052cc;">ð§ The Email View</h4> 45 <p style="font-size: 13px;">Wrap your colorful email design, digital payment buttons, and logos in these tags:</p> 46 <code style="background: #fff; padding: 5px; border: 1px solid #ccc; display: block; margin-bottom: 5px; color: #d32f2f;">[BeginDeleteIfLetter]</code> 47 <div style="text-align: center; padding: 10px; border: 1px dashed #ccc; margin: 10px 0;">Your HTML Email Code</div> 48 <code style="background: #fff; padding: 5px; border: 1px solid #ccc; display: block; color: #d32f2f;">[EndDeleteIfLetter]</code> 49 </div> 50 <div style="flex: 1; background: #f4f5f7; border: 1px solid #dfe1e6; padding: 20px; border-radius: 8px; min-width: 250px;"> 51 <h4 style="margin-top: 0; color: #00875a;">ð The Print/Letter View</h4> 52 <p style="font-size: 13px;">Wrap your formal letter layout, window-envelope address positioning, and serif fonts in these tags:</p> 53 <code style="background: #fff; padding: 5px; border: 1px solid #ccc; display: block; margin-bottom: 5px; color: #d32f2f;">[BeginDeleteIfEmail]</code> 54 <div style="text-align: center; padding: 10px; border: 1px dashed #ccc; margin: 10px 0;">Your Print HTML Code</div> 55 <code style="background: #fff; padding: 5px; border: 1px solid #ccc; display: block; color: #d32f2f;">[EndDeleteIfEmail]</code> 56 </div> 57 </div> 58 </div> 59 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #fffae6; color: #bf8c00; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 5</span> 60 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">Building the "Friendly Reminder"</h2> 61 <p>
61The code provided in Section 8 builds a specific "Friendly Reminder" template. Here is how it is structured:</p> 62 <ol style="list-style-type: decimal; margin-left: 1.5em;"> 63 <li style="margin-bottom: 15px;"><strong>The Wrapper:</strong> It uses a <code><center></code> tag with a grey background to ensure the email looks like a distinct card in the inbox.</li> 64 <li style="margin-bottom: 15px;"><strong>The Header Table:</strong> A purple header (<code>#5433ff</code>) with rounded top corners. It uses a 2-column table to push the Logo to the far right.</li> 65 <li style="margin-bottom: 15px;"><strong>The Body:</strong> A white container with padding. This holds the greeting, the text, and the tables.</li> 66 <li style="margin-bottom: 15px;"><strong>The Invoice Table:</strong> A standard HTML table with borders, styled to look like a financial statement. This table contains the Repeater logic (see Section 6).</li> 67 </ol> 68 </div> 69 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #e6fcff; color: #008da6; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 6</span> 70 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">Variables & Placeholders</h2> 71 <p>Placeholders are dynamic fields that get replaced with real data when the email is sent.</p> 72 <p><strong>Common Examples:</strong></p> 73 <ul style="font-family: monospace; background: #282c34; color: #fff; padding: 15px; border-radius: 6px; list-style-type: disc; margin-left: 1.5em;"> 74 <li>[PackageCustomerName] - The debtor's name</li> 75 <li>[InvoiceNumber] - The specific invoice ID</li> 76 <li>[InvoiceAmount] - The amount of that invoice</li> 77 </ul> 78 <h3 style="color: #5433ff; margin-top: 20px;">The Repeater Loop</h3> 79 <p>To show <em>multiple</em> invoices in one email, you must use repeaters. The system copies everything between the <strong>Begin</strong> and <strong>End</strong> tags for every open invoice.</p> 80 <div style="background: #fff; border-left: 4px solid #ff5630; padding: 15px; margin-top: 10px;"><strong>Important:</strong> In the template code below, the repeater is placed inside the table cells. <code><th>... [BeginInvoiceRepeat]</th></code> starts the loop. <code><td>... [EndInvoiceRepeat]</td></code> ends the loop.</div> 81 </div> 82 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #e3fcef; color: #006644; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 7</span> 83 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">Pro Tips & Tricks</h2> 84 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;"> 85 <div style="background: #f9f9fa; padding: 15px; border-radius: 6px;"> 86 <h4 style="margin: 0 0 5px 0;">ð¼ï¸ Images must be Links</h4> 87 <p style="font-size: 13px; margin: 0;">You cannot copy/paste an image from your desktop. Images must be hosted online (like on your website or Google Drive) and inserted via URL.</p> 88 </div> 89 <div style="background: #f9f9fa; padding: 15px; border-radius: 6px;"> 90 <h4 style="margin: 0 0 5px 0;">ð Always Preview</h4> 91 <p style="font-size: 13px; margin: 0;">Before saving, click the <strong>Preview</strong> button and select a real debtor. This shows you exactly how the table loops will look with real data.</p> 92 </div> 93 <div style="background: #f9f9fa; padding: 15px; border-radius: 6px;"> 94 <h4 style="margin: 0 0 5px 0;">𧹠Clean Paste</h4> 95 <p style="font-size: 13px; margin: 0;">If copying text from Word, use "Paste as Text" (Ctrl+Shift+V) to avoid bringing in broken formatting code.</p> 96 </div> 97 <div style="background: #f9f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e3fcef;"> 98 <h4 style="margin: 0 0 5px 0; color: #006644;">ð² Add Currency Symbols</h4> 99 <p style="font-size: 13px; margin: 0;">Placeholders like <code>[InvoiceAmount]</code> often return just a number (e.g., 50.00). Always add the currency placeholder <code>[PackageCurrencyShort]</code> or a symbol ($/â¬) immediately before it.</p> 100 </div> 101 <div style="background: #f9f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e3fcef;"> 102 <h4 style="margin: 0 0 5px 0; color: #006644;">ð Use Snippets</h4> 103 <p style="font-size: 13px; margin: 0;">Don't rebuild the wheel. Save standard blocks (like the payment table in Section 8, buttons, or legal footers) as <strong>Snippets</strong> to reuse them instantly.</p> 104 </div> 105 <div style="background: #f9f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e3fcef;"> 106 <h4 style="margin: 0 0 5px 0; color: #006644;">ð Insert Payment Links</h4> 107 <p style="font-size: 13px; margin: 0;">Get paid faster! Always include <code>[PackagePaymentLink]</code>. You can highlight this text and use the Link tool to turn it into a clickable button.</p> 108 </div> 109 <div style="background: #fff7d6; padding: 15px; border-radius: 6px; border: 1px solid #ffeb3b; grid-column: span 2;"> 110 <h4 style="margin: 0 0 5px 0; color: #b38600;">ð¤ Use AI for Troubleshooting</h4> 111 <p style="font-size: 13px; margin: 0;">Stuck with broken HTML or a table that won't align? Copy your Source Code and paste it into ChatGPT or Gemini. Ask: <em>"Fix the HTML syntax errors in this code"</em> or <em>"Remove the extra padding from this table."</em></p> 112 </div> 113 </div> 114 </div> 115 <div style="padding: 40px 0; border-bottom: 1px solid #ebecf0;"><span style="background: #deebff; color: #0747a6; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 8</span> 116 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">Ready-to-Use Template Code</h2> 117 <p>This is the complete code for the <strong>Friendly Reminder</strong> template. It includes the purple header, the correct invoice repeater logic, bank details, and the "Powered by MaxCredible" footer.</p> 118 <p style="background: #e3f2fd; padding: 10px; border-radius: 4px; border: 1px solid #2196f3; color: #0d47a1;"><strong>ð ACTION:</strong> Copy all code inside the box below and paste it into your Source Code window (<code><></code>).</p> 119 <textarea style="width: 100%; height: 450px; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; padding: 15px; background-color: #282c34; border: none; border-radius: 8px; color: #abb2bf; resize: vertical;" readonly="readonly"><center lang="en" style="width: 100%; background-color: #f4f4f7; font-family: 'Poppins', Arial, sans-serif;" role="article" aria-roledescription="email"> <div class="webkit" style="max-width: 650px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0px 2px 10px rgba(0,0,0,0.05);"> <table style="background-color: #5433ff; border-top-left-radius: 8px; border-top-right-radius: 8px; width: 100%; border-collapse: collapse; border-spacing: 0px;" role="presentation" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="padding: 20px 30px; width: 64.8463%; text-align: left; border-style: hidden;" align="left"> </td> <td style="padding: 20px 30px; width: 35.1537%; text-align: right; border-style: hidden;" align="right"> <span style="color: #ffffff;"> <img src="https://docs.google.com/drawings/d/e/2PACX-1vTwjDMTj7FH3tmeLj6H24PRhLO_U0yBPfQtT0bW_Ku8iPo63LMD5ZeZeaWe8Kdt78d1JxkXz8T27NG5/pub?w=691&h=249" alt="Company Logo" width="175" height="63" style="display: block; border: 0;"> </span> </td> </tr> </tbody> </table> <table style="background-color: #ffffff; width: 100%; border-collapse: collapse;" role="presentation" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="padding: 30px 40px; color: #505f79; font-size: 14px; line-height: 1.6; border-style: hidden;"> <h1 style="font-size: 24px; font-weight: bold; color: #172b4d; margin-top: 0; margin-bottom: 20px;">A Friendly Reminder</h1> <p style="margin-bottom: 15px;">Hello <span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>PackageCustomerName<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span>,</p> <p style="margin-bottom: 15px;">We hope that this email finds you well. This is a friendly reminder that there are one or more outstanding invoices on your account that require your attention. Please find the details below:</p> <table class="invoice-table" style="margin-bottom: 30px; border-collapse: collapse; width: 100%; border: 1px solid #dfe1e6;" role="presentation" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: left; font-size: 14px; background-color: #f4f5f7; font-weight: bold; color: #172b4d;">Invoice</th> <th style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: left; font-size: 14px; background-color: #f4f5f7; font-weight: bold; color: #172b4d;">Due date</th> <th style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: left; font-size: 14px; background-color: #f4f5f7; font-weight: bold; color: #172b4d;">Amount <span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>BeginInvoiceRepeat<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span></th> </tr> </thead> <tbody> <tr> <td style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: left; font-size: 14px;"><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>InvoiceNumber<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span></td> <td style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: left; font-size: 14px;"><strong><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>InvoiceDueDate<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span></strong></td> <td style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: right; font-size: 14px; font-weight: bold;"><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>InvoiceCurrencySymbol<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix
119=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>InvoiceAmount<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>EndInvoiceRepeat<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span></td> </tr> <tr> <td style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: right; font-weight: bold; background-color: #f4f5f7; font-size: 14px;" colspan="2">Total Outstanding:</td> <td style="border: 1px solid #dfe1e6; padding: 12px 15px; text-align: right; font-size: 14px; font-weight: bold; background-color: #f4f5f7;"><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>InvoiceCurrencySymbol<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>PackageTotalOpenAmount<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span></td> </tr> </tbody> </table> <p style="margin-bottom: 15px;">You can easily settle these invoices by transferring the funds to the below bank details. If you've already made these payments, please disregard this email.</p> <table style="width: 75%; border-collapse: collapse; margin-bottom: 20px; border: 1px solid rgb(221, 221, 221);" border="1"> <tbody> <tr style="background-color: #f5f5f5;"> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); font-weight: bold; width: 40.0938%;">Item</td> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); font-weight: bold; width: 60.0234%;">Detail</td> </tr> <tr> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 40.0938%;">Total Amount to Transfer</td> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 60.0234%;"><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>PackageCurrencySymbol<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag" contenteditable="false" data-mce-cef-wrappable="true" data-mce-mergetag="1"><span class="mce-mergetag-affix" data-mce-mergetag-affix="">[</span></span></span></span>PackageTotalAmount<span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix=""><span class="mce-mergetag-affix" data-mce-mergetag-affix="">]</span></span></span></span></span></span></span></span></td> </tr> <tr> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 40.0938%;">Company Name</td> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 60.0234%;">[PackageClientName]</td> </tr> <tr> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 40.0938%;">Account Number / IBAN</td> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 60.0234%;">[PackageClientAccountNr]</td> </tr> <tr> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 40.0938%;">BIC / SWIFT Code</td> <td style="padding: 10px; border: 1px solid rgb(221, 221, 221); width: 60.0234%;">[PackageClientSWIFTCode]</td> </tr> </tbody> </table> <p style="margin-bottom: 15px;">
119Thank you for your prompt attention to this matter.</p> <p style="margin-bottom: 0;">Sincerely,</p> <p style="margin-bottom: 0;">The Team</p> </td> </tr> </tbody> </table> <table style="background-color: #f4f5f7; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; width: 100%; border-collapse: collapse;" role="presentation" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="padding: 30px 40px; text-align: center; font-size: 12px; color: #6b778c; border-style: hidden;"> <p style="margin: 0 0 15px 0;">[PackageClientName] | [PackageClientAddress] [PackageClientHouseNr]</p> <p style="margin: 0;"> <img src="https://docs.google.com/drawings/d/e/2PACX-1vTwjDMTj7FH3tmeLj6H24PRhLO_U0yBPfQtT0bW_Ku8iPo63LMD5ZeZeaWe8Kdt78d1JxkXz8T27NG5/pub?w=691&h=249" alt="Powered by MaxCredible" width="150" style="display: inline-block; vertical-align: middle;"> </p> <p style="margin: 15px 0 0 0;">© 2025 All rights reserved.</p> </td> </tr> </tbody> </table> </div></center> </textarea> 120 </div> 121 <div style="padding: 40px 0;"><span style="background: #eae6ff; color: #403294; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; text-transform: uppercase;">Section 9</span> 122 <h2 style="color: #172b4d; font-size: 24px; margin-top: 10px;">Documentation & Help</h2> 123 <p>Need to dive deeper? Check out these resources:</p> 124 <div style="display: flex; gap: 20px; flex-wrap: wrap;"><a style="flex: 1; text-decoration: none; color: inherit; min-width: 250px;" href="https://docs.google.com/document/d/11m3iJ1IMJ5gqhRmWSFyzjX4d42H6eij5uYtySBCaMNw/edit?tab=t.0#heading=h.184mhaj" target="_blank" rel="noopener"> 125 <div style="background: white; border: 1px solid #dfe1e6; padding: 20px; border-radius: 8px; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); height: 100%; box-sizing: border-box;"> 126 <h4 style="margin: 0; color: #5433ff;">ð MaxCredible User Guide</h4> 127 <p style="font-size: 13px; color: #5e6c84; margin: 5px 0 0 0;">Read the official documentation on variables, logic, and more.</p> 128 </div> 129 </a><a style="flex: 1; text-decoration: none; color: inherit; min-width: 250px;" href="https://www.tiny.cloud/docs/tinymce/" target="_blank" rel="noopener"> 130 <div style="background: white; border: 1px solid #dfe1e6; padding: 20px; border-radius: 8px; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); height: 100%; box-sizing: border-box;"> 131 <h4 style="margin: 0; color: #20bdff;">âï¸ TinyMCE Documentation</h4> 132 <p style="font-size: 13px; color: #5e6c84; margin: 5px 0 0 0;">Advanced technical details on the editor core functions.</p> 133 </div> 134 </a><a style="flex: 1; text-decoration: none; color: inherit; min-width: 250px;" href="https://docs.google.com/spreadsheets/d/1fDWnEMJeSq5gFaKa-FXI0IuHjSBeVd-T1ZV1H4GU6v0/edit?gid=1328078357#gid=1328078357" target="_blank" rel="noopener"> 135 <div style="background: white; border: 1px solid #dfe1e6; padding: 20px; border-radius: 8px; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); height: 100%; box-sizing: border-box;"> 136 <h4 style="margin: 0; color: #00875a;">ð Placeholders List</h4> 137 <p style="font-size: 13px; color: #5e6c84; margin: 5px 0 0 0;">Full list of all variables you can use in your templates.</p> 138 </div> 139 </a></div> 140 </div> 141 <div style="padding-top: 60px; padding-bottom: 20px; color: #6b778c; border-top: 1px solid rgb(235, 236, 240); margin-top: 40px;"> 142 <p style="margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; text-align: center;">Guide generated for MaxCredible Users</p> 143 <img style="width: 150px; opacity: 0.8; display: block; margin-left: auto; margin-right: auto;" src="https://docs.google.com/drawings/d/e/2PACX-1vTwjDMTj7FH3tmeLj6H24PRhLO_U0yBPfQtT0bW_Ku8iPo63LMD5ZeZeaWe8Kdt78d1JxkXz8T27NG5/pub?w=691&h=249" alt="Powered by MaxCredible"> 144 </div> 145 </div> 146 </div> 147</div>`},j=m.name.toLowerCase();function D(r,l){const a=s.useRef(!1),[o]=u(),[g]=y();s.useEffect(()=>{!r||!l||a.current||(a.current=!0,(async()=>{try{const t=await o({administrationId:r,count:1e3}).unwrap();if(((t==null?void 0:t.items)??[]).some(d=>{var i;return((i=d.name)==null?void 0:i.toLowerCase())===j}))return;await g({administrationId:r,name:m.name,hml:m.hml}).unwrap()}catch(t){w(t,{context:"useEnsureTutorialTemplate"})}})())},[r,l,o,g])}const Y=function(){const l=v(),a=R(),o=k(),{isLoading:g,isError:t,targetPath:p,hydrateReduxState:c}=N(),d=T(C),{isCleanupComplete:i}=M(d);D(d,i);const[n,b]=s.useState(!1);return s.useEffect(()=>{l(z("post_auth"))},[l]),s.useEffect(()=>(P(),()=>{S()}),[]),s.useEffect(()=>{if(g||n)return;c(),(a.pathname==="/setup"||a.pathname==="/setup/")&&!t&&o({to:p,replace:!0}),b(!0)},[g,n,t,p,c,a.pathname,o]),s.useEffect(()=>{if(!n)return;const f=a.pathname,x=I.find(h=>h.path===f);x&&l(A(x.id))},[a.pathname,l,n]),g||!n||!i?e.jsx("div",{className:"flex h-screen items-center justify-center",children:e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsx(L,{className:"h-8 w-8 text-primary"}),e.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Loading your progress..."})]})}):t?e.jsx("div",{className:"flex h-screen items-center justify-center",children:e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsx("p",{className:"text-sm text-red-500 dark:text-red-400",children:"Failed to load onboarding progress. Please try refreshing the page."}),e.jsx("button",{onClick:()=>window.location.reload(),className:"rounded bg-primary px-4 py-2 text-white hover:bg-primary/90",children:"Refresh"})]})}):e.jsx(E,{})};export{Y as component}; 148//# sourceMappingURL=setup-sHvZC3-O.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.