mail template

mail template

IMPORTANT:

We will have to maintain, backward compatability 
knowing that we may need to ammend
old ones , or re create them

Expected From editor:
That it shall, have like these operation here
https://html-online.com/editor/
if our emc editor dose not have all of them , we may change
after re evaluate.

We need new stylish , editor we dont want to re invent wheel
we need prototype fast, keep in mind we mainly will only 
change static content mainly.


General analysis: Mind Map 

First:

Static text template without any variable / free markers.

Second:

Dynamic Two Layouts in general 
ticket template , confirmation template 

ticket emails:
by event , owner , product , and general one.

confirmation emails :

A.payment_confirmation_v2
B.email_confirmation_payment_v28
C.email_cod_confirmation_v2
D.email_bank_transfer_confirmation_v2
E.email_complete_payment_confirmation_v2
F.email_pad_confirmation_v2
G.email_pay_at_door_confirmation_v2
H.email_unsuccessful_v2
J.email_request_payment_v2
K.email_pending_v2
L.email_publish_event_v2
M.activation_email_v2
N.email_unsuccessful_v2
O.email_passowrd_reset_v2


Dynamic Variables:

A.Dates formatting, custom and predefined

B.Image url like this one
<img src="${realContextName}/theme/css/ui_images_sajilni/images_new/logo.png" alt="Sajilni.com" style="cursor: pointer; vertical-align: middle;">

C. Assigns like (P.S to minimize errors we shall do same as ticket builder add has content to check nullity for evenry thing)

<#assign buyer=buyer>  filled from backend htmltemplate.add("buyer", buyer)
<#assign currentDate = .now> date for local use in template
<#assign x=0> Fixed for local use in template

This dose not make much since , but its in every template , i mean
why assign is insid a loop! i will check if these assignment is used , we SHALL remove un used thing to make it simpler
to build and maintain and parse, develop, but it may cause bugs as well.!

${buyer.name}  remember has content and nullity check we talked about
${currentDate?string.yyyy} same as note above
${buyer.email} same as note above

D. number formatting. for example order id to look like 123456 not  like 123,456

E.In static and none static emplate we shall make sure of arabic english alignment 
problem , it works perfectly




E. list dynamic example

Payment Date: ${payment.getPaidOn()?string("EEEE dd MMMM, yyyy hh:mm a")}
${event.name}
${eventDate}
${event.venue.country.name}
<#if event.venue.name?has_content> ,&nbsp;${event.venue.name}</#if>, &nbsp;
<#if event.venue.cityName?has_content>${event.venue.cityName}</#if>

<#list order.getCompletedOrderItemsGroupsByCategory(1)?sort_by( "productId") as orderItemGroup>
	<#assign owner=orderItemGroup.event.owner>
	<#assign event=orderItemGroup.event>
    <#assign product=orderItemGroup.product>
	<#assign size=orderItemGroup.orderItems?size>
	<#assign eventDate=orderItemGroup.eventDate.getStartDateTz()?string('EEEE dd MMMM, yyyy hh:mm a')>
</#list>



if with html content we may have to define some custom parser to check if we added if we shal put end 
( mean it should be even # of if and closes , like compiler check)


dropp down ( add special instructions)

then in editor it will add

<#if specialInstructions?has_content> 
	<div style="padding-left: 30px; padding-right: 30px; background-color: #fff;">
			<div style="background-color: #eeeef2; padding-top: 1px; padding-left: 30px; padding-right: 30px; margin: 0px 0;">
				<h4 style="color: #2c606e !important; font-family: Verdana; font-weight: 500; text-transform: uppercase; padding-bottom: 15px; line-height: 1.1; font-size: 18px;"> Special Instructions</h4>
			</div>
		</div>
		<div style="padding-left: 30px; padding-right: 30px; padding-bottom: 10px; background-color: #fff;">
			<div style="padding-left: 30px; padding-right: 30px; background-color: #fff;">
			<#list specialInstructions as instruction>
				<p style="color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; line-height: 2; padding-bottom: 10px; margin: 0 0 10px;"> 
				${instruction.text} </p>
			</#list>
		</div>
	</div>
</#	if>



other big example we should treat as one block

<#list order.getCompletedOrderItemsGroupsByCategory(1)?sort_by( "productId") as orderItemGroup>
                        <table width="100%">
                            <tr>
                                <td width="40%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">Ticket Type</p>
                                    </div>
                                </td>
                                <#if seat?has_content>
                                <td width="20%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">Qty</p>
                                    </div>
                                </td>
                                <#else>
                                <td width="40%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">Qty</p>
                                    </div>
                                </td>
                                </#if>
                                <td width="30%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">Price</p>
                                    </div>
                                </td>
                                <#if seat?has_content>
                                <td>
                                    <div>
                                        <p style="word-wrap:break-word;width:100px;color:#3c4045!important;font-family:Verdana;font-weight:400;font-size:16px;padding-top:20px;margin:0">Seat</p>
                                    </div>
                                </td>
                                </#if>
                            </tr>
                            <#list order.getCompletedOrderItemsGroupsByCategory(1)?sort_by( "productId") as orderItemGroup>
                            <tr>
                                <td width="40%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;"> ${orderItemGroup.product.name} </span>
                                        </p>
                                    </div>
                                </td>
                                <td width="20%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">${orderItemGroup.orderItems?size}</p>
                                    </div>
                                </td>
                                <td width="30%">
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">${orderItemGroup.subTotal} ${currency}</p>
                                    </div>
                                </td>
                                <#if seat?has_content>
                                <td>
                                    <div>
                                        <p style="word-wrap: break-word; width: 100px;color: #3c4045 !important; font-family: Verdana; font-weight: 400; font-size: 16px; padding-top: 20px; margin: 0;">${seat[x]}</p>
                                    </div>
                                </td>
                                <#assign x=x+1>
                                </#if>
                            </tr>
                            </#list>
                        </table>
                        </#list>


                        ${size}

                        <#if (discount> 0)>
                            <p style="font-family: Verdana; font-weight: 400; font-size: 16px; color: #fff; 			margin: 20px 0 10px;">Discount:</p>
                        </#if>

                        <#assign size=orderItemGroup.orderItems?size>
						${paymentType}

						

user shall not see free marker
user shall be abe to do geenral preview (type 1)

user shall be able to do specific scenarioo preview for example for some product or on event, owner level
to see actual html template will look like for some order, or event etc..

user shall be able to edit html via wysiwyg not the html it self , he shoud not care about only 
for very advanced editing behavior.



4) 
Keep in mind that migration dose not work properly when you have html to be updated
because of \n \r is not resolved , so i recommend to make separat sql_patch folder for this sensitive task.

href with vars

<a href="${realContextName}/info/sell-with-us.html" style="font-size: 16px; text-decoration: none; color: #5f5f5f; border-right-color: #5f5f5f; border-right-width: 1px; border-right-style: solid; padding-right: 10px; padding-left: 10px;">Sell with us</a>


(we will need shareef/alex database changes + back end resolver and some simple compiler as well may be scheme).



3) We will have to map variables and unify them in all template above , so it would be like replacer 
from backend to front and vice versa. 

challenges in mapping ( 
First the below is from ticket_template_v2 which is the email you get your ticket
attached in

it is customizable on event level and on ticket level as well , and owner.
we normally copy from ticket_template_v2 with owner =0 ,
 and them make changes manuall to it as we want for specific product,event owner , as design and requirement etc..

)