templates/email/send_payment_notification.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns:v="urn:schemas-microsoft-com:vml">
  5. <head>
  6.     <!-- Google tag (gtag.js) -->
  7.     <script async src="https://www.googletagmanager.com/gtag/js?id=G-1C8Z7G6L48"></script>
  8.     <script>
  9.         window.dataLayer = window.dataLayer || [];
  10.         function gtag(){dataLayer.push(arguments);}
  11.         gtag('js', new Date());
  13.         gtag('config', 'G-1C8Z7G6L48');
  14.     </script>
  15.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  16.     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
  17.     <!--[if !mso]--><!-- -->
  18.     <link href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700' rel="stylesheet">
  19.     <link href='https://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel="stylesheet">
  20.     <!-- <![endif]-->
  22.     <title>Material Design for Bootstrap</title>
  24.     <style type="text/css">
  25.         body {
  26.             width: 100%;
  27.             background-color: #ffffff;
  28.             margin: 0;
  29.             padding: 0;
  30.             -webkit-font-smoothing: antialiased;
  31.             mso-margin-top-alt: 0px;
  32.             mso-margin-bottom-alt: 0px;
  33.             mso-padding-alt: 0px 0px 0px 0px;
  34.         }
  36.         p,
  37.         h1,
  38.         h2,
  39.         h3,
  40.         h4 {
  41.             margin-top: 0;
  42.             margin-bottom: 0;
  43.             padding-top: 0;
  44.             padding-bottom: 0;
  45.         }
  47.         span.preheader {
  48.             display: none;
  49.             font-size: 1px;
  50.         }
  52.         html {
  53.             width: 100%;
  54.         }
  56.         table {
  57.             font-size: 14px;
  58.             border: 0;
  59.         }
  61.         /* ----------- responsivity ----------- */
  63.         @media only screen and (max-width: 640px) {
  64.             /*------ top header ------ */
  65.             .main-header {
  66.                 font-size: 20px !important;
  67.             }
  69.             .main-section-header {
  70.                 font-size: 28px !important;
  71.             }
  73.             .show {
  74.                 display: block !important;
  75.             }
  77.             .hide {
  78.                 display: none !important;
  79.             }
  81.             .align-center {
  82.                 text-align: center !important;
  83.             }
  85.             .no-bg {
  86.                 background: none !important;
  87.             }
  89.             /*----- main image -------*/
  90.             .main-image img {
  91.                 width: 440px !important;
  92.                 height: auto !important;
  93.             }
  95.             /* ====== divider ====== */
  96.             .divider img {
  97.                 width: 440px !important;
  98.             }
  100.             /*-------- container --------*/
  101.             .container590 {
  102.                 width: 440px !important;
  103.             }
  105.             .container580 {
  106.                 width: 400px !important;
  107.             }
  109.             .main-button {
  110.                 width: 220px !important;
  111.             }
  113.             /*-------- secions ----------*/
  114.             .section-img img {
  115.                 width: 320px !important;
  116.                 height: auto !important;
  117.             }
  119.             .team-img img {
  120.                 width: 100% !important;
  121.                 height: auto !important;
  122.             }
  123.         }
  125.         @media only screen and (max-width: 479px) {
  126.             /*------ top header ------ */
  127.             .main-header {
  128.                 font-size: 18px !important;
  129.             }
  131.             .main-section-header {
  132.                 font-size: 26px !important;
  133.             }
  135.             /* ====== divider ====== */
  136.             .divider img {
  137.                 width: 280px !important;
  138.             }
  140.             /*-------- container --------*/
  141.             .container590 {
  142.                 width: 280px !important;
  143.             }
  145.             .container590 {
  146.                 width: 280px !important;
  147.             }
  149.             .container580 {
  150.                 width: 260px !important;
  151.             }
  153.             /*-------- secions ----------*/
  154.             .section-img img {
  155.                 width: 280px !important;
  156.                 height: auto !important;
  157.             }
  158.         }
  159.     </style>
  160.     <!-- [if gte mso 9]>
  161.     <style type=”text/css”>
  162.         body {
  163.             font-family: arial, sans-serif !important;
  164.         }
  165.     </style>
  166.     <![endif]-->
  167. </head>
  170. <body class="respond" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  171. <!-- pre-header -->
  172. <table style="display:none!important;">
  173.     <tr>
  174.         <td>
  175.             <div style="overflow:hidden;display:none;font-size:1px;color:#ffffff;line-height:1px;font-family:Arial;maxheight:0px;max-width:0px;opacity:0;">
  176.                 {{ email.getSubject() }}
  177.             </div>
  178.         </td>
  179.     </tr>
  180. </table>
  181. <!-- pre-header end -->
  182. <!-- header -->
  183. <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff">
  185.     <tr>
  186.         <td align="center">
  187.             <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
  189.                 <tr>
  190.                     <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  191.                 </tr>
  192.                 <tr>
  193.                     <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  194.                 </tr>
  196.             </table>
  197.         </td>
  198.     </tr>
  199. </table>
  200. <!-- end header -->
  202. <!-- big image section -->
  203. <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="bg_color">
  205.     <tr>
  206.         <td align="center">
  207.             <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
  208.                 <tr>
  210.                     <td align="center" class="section-img">
  211.                         <a href="" style=" border-style: none !important; display: block; border: 0 !important;"><img
  212.                                     src="{{ email.image('@images/transaction-blue.jpg') }}"
  213.                                     style="display: block; width: 590px;" width="590" border="0" alt=""/></a>
  216.                     </td>
  217.                 </tr>
  218.                 <tr>
  219.                     <td height="20" style="font-size: 20px; line-height: 20px;">&nbsp;</td>
  220.                 </tr>
  221.                 <tr>
  222.                     <td align="center"
  223.                         style="color: #343434; font-size: 24px; font-family: Quicksand, Calibri, sans-serif; font-weight:700;letter-spacing: 3px; line-height: 35px;"
  224.                         class="main-header">
  227.                         <div style="line-height: 35px">
  230.                            <span style="color:#2e75ac ;">TRANSACTION  {{ transaction.status }}</span>
  233.                         </div>
  234.                     </td>
  235.                 </tr>
  237.                 <tr>
  238.                     <td height="10" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
  239.                 </tr>
  241.                 <tr>
  242.                     <td align="center">
  243.                         <table border="0" width="40" align="center" cellpadding="0" cellspacing="0" bgcolor="eeeeee">
  244.                             <tr>
  245.                                 <td height="2" style="font-size: 2px; line-height: 2px;">&nbsp;</td>
  246.                             </tr>
  247.                         </table>
  248.                     </td>
  249.                 </tr>
  251.                 <tr>
  252.                     <td height="20" style="font-size: 20px; line-height: 20px;">&nbsp;</td>
  253.                 </tr>
  255.                 <tr>
  256.                     <td align="center">
  257.                         <table border="0" width="400" align="center" cellpadding="0" cellspacing="0"
  258.                                class="container590">
  259.                             <tr>
  260.                                 <td align="center"
  261.                                     style="color: #888888; font-size: 16px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;">
  264.                                     <div style="line-height: 24px">
  265. {#                                        vôtre demande <b>{{ folder.number }}</b> est en cours de validation.#}
  266.                                        N° de la demande: <b>{{ folder.number }}</b> <br/>
  267.                                         Nom du dossier: <b>{{ folder.documentCategory.label }}</b> <br/>
  268.                                         Commune: <b>{{ folder.site.label }}</b> <br/>
  269.                                         montant: <b>{{ transaction.amount }}{{ transaction.currency }}</b> <br />
  270.                                         Methode de paiement: <b>{{ transaction.clientOperator }}</b> <br/>
  271.                                         Auteur: <b>{{ folder.userCreate.username}}</b> <br/>
  272.                                     </div>
  273.                                 </td>
  274.                             </tr>
  275.                         </table>
  276.                     </td>
  277.                 </tr>
  279.                 <tr>
  280.                     <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  281.                 </tr>
  282.                 {% if transaction.status is same as "SUCCESS" %}
  283.                 <tr>
  284.                     <td align="center">
  285.                         <table border="0" align="center" width="160" cellpadding="0" cellspacing="0" bgcolor="5caad2"
  286.                                style="">
  288.                             <tr>
  289.                                 <td height="10" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
  290.                             </tr>
  292.                             <tr>
  293.                                 <td align="center"
  294.                                     style="color: #ffffff; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 26px;">
  297.                                     {# on ne peut voir la demande que si le statut de la transaction est success#}
  299.                                     <div style="line-height: 26px;">
  300.                                         <a href="{{ url('app_folder_view',{folder_id: folder.id}) }}" style="color: #ffffff; text-decoration: none;">VOIR DEMANDE</a>
  301.                                     </div>
  303.                                 </td>
  304.                             </tr>
  306.                             <tr>
  307.                                 <td height="10" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
  308.                             </tr>
  310.                         </table>
  311.                     </td>
  312.                 </tr>
  313.                 {% endif %}
  315.             </table>
  317.         </td>
  318.     </tr>
  320. </table>
  321. <!-- end section -->
  323. <!-- contact section -->
  324. <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="bg_color">
  326.     <tr class="hide">
  327.         <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  328.     </tr>
  329.     <tr>
  330.         <td height="40" style="font-size: 40px; line-height: 40px;">&nbsp;</td>
  331.     </tr>
  333.     <tr>
  334.         <td height="60" style="border-top: 1px solid #e0e0e0;font-size: 60px; line-height: 60px;">&nbsp;</td>
  335.     </tr>
  337.     <tr>
  338.         <td align="center">
  339.             <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bg_color">
  341.                 <tr>
  342.                     <td>
  343.                         <table border="0" width="300" align="left" cellpadding="0" cellspacing="0"
  344.                                style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
  345.                                class="container590">
  347.                             <tr>
  348.                                 <!-- logo -->
  349.                                 <td align="left">
  350.                                     <a href=""
  351.                                        style="display: block; border-style: none !important; border: 0 !important;"><img
  352.                                                 width="80" border="0" style="display: block; width: 80px;"
  353.                                                 src="{{ email.image('@images/logoHVK.png') }}" alt=""/></a>
  354.                                 </td>
  355.                             </tr>
  357.                             <tr>
  358.                                 <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  359.                             </tr>
  361.                             <tr>
  362.                                 <td align="left"
  363.                                     style="color: #888888; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 23px;"
  364.                                     class="text_color">
  365.                                     <div style="color: #333333; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; font-weight: 600; mso-line-height-rule: exactly; line-height: 23px;">
  367.                                         écrivez nous: <br/> <a href="mailto:"
  368.                                                            style="color: #888888; font-size: 14px; font-family: 'Hind Siliguri', Calibri, Sans-serif; font-weight: 400;">[email protected]</a>
  370.                                     </div>
  371.                                 </td>
  372.                             </tr>
  374.                         </table>
  376.                         <table border="0" width="2" align="left" cellpadding="0" cellspacing="0"
  377.                                style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
  378.                                class="container590">
  379.                             <tr>
  380.                                 <td width="2" height="10" style="font-size: 10px; line-height: 10px;"></td>
  381.                             </tr>
  382.                         </table>
  384.                         <table border="0" width="200" align="right" cellpadding="0" cellspacing="0"
  385.                                style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
  386.                                class="container590">
  388.                             <tr>
  389.                                 <td class="hide" height="45" style="font-size: 45px; line-height: 45px;">&nbsp;</td>
  390.                             </tr>
  393.                             <tr>
  394.                                 <td height="15" style="font-size: 15px; line-height: 15px;">&nbsp;</td>
  395.                             </tr>
  397.                             <tr>
  398.                                 <td>
  399.                                     <table border="0" align="right" cellpadding="0" cellspacing="0">
  400.                                         <tr>
  401.                                             <td>
  402.                                                 <a href="#"
  403.                                                    style="display: block; border-style: none !important; border: 0 !important;"><img
  404.                                                             width="24" border="0" style="display: block;"
  405.                                                             src="http://i.imgur.com/Qc3zTxn.png" alt=""></a>
  406.                                             </td>
  407.                                             <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
  408.                                             <td>
  409.                                                 <a href="#"
  410.                                                    style="display: block; border-style: none !important; border: 0 !important;"><img
  411.                                                             width="24" border="0" style="display: block;"
  412.                                                             src="http://i.imgur.com/RBRORq1.png" alt=""></a>
  413.                                             </td>
  414.                                             <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
  415.                                             <td>
  416.                                                 <a href="#"
  417.                                                    style="display: block; border-style: none !important; border: 0 !important;"><img
  418.                                                             width="24" border="0" style="display: block;"
  419.                                                             src="http://i.imgur.com/Wji3af6.png" alt=""></a>
  420.                                             </td>
  421.                                         </tr>
  422.                                     </table>
  423.                                 </td>
  424.                             </tr>
  426.                         </table>
  427.                     </td>
  428.                 </tr>
  429.             </table>
  430.         </td>
  431.     </tr>
  433.     <tr>
  434.         <td height="60" style="font-size: 60px; line-height: 60px;">&nbsp;</td>
  435.     </tr>
  437. </table>
  438. <!-- end section -->
  440. <!-- footer ====== -->
  441. <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="f4f4f4">
  443.     <tr>
  444.         <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  445.     </tr>
  447.     <tr>
  448.         <td align="center">
  450. {#            <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">#}
  452. {#                <tr>#}
  453. {#                    <td>#}
  454. {#                        <table border="0" align="left" cellpadding="0" cellspacing="0"#}
  455. {#                               style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"#}
  456. {#                               class="container590">#}
  457. {#                            <tr>#}
  458. {#                                <td align="left"#}
  459. {#                                    style="color: #aaaaaa; font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;">#}
  460. {#                                    <div style="line-height: 24px;">#}
  462. {#                                        <span style="color: #333333;">Material Design for Bootstrap</span>#}
  464. {#                                    </div>#}
  465. {#                                </td>#}
  466. {#                            </tr>#}
  467. {#                        </table>#}
  469. {#                        <table border="0" align="left" width="5" cellpadding="0" cellspacing="0"#}
  470. {#                               style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"#}
  471. {#                               class="container590">#}
  472. {#                            <tr>#}
  473. {#                                <td height="20" width="5" style="font-size: 20px; line-height: 20px;">&nbsp;</td>#}
  474. {#                            </tr>#}
  475. {#                        </table>#}
  477. {#                        <table border="0" align="right" cellpadding="0" cellspacing="0"#}
  478. {#                               style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"#}
  479. {#                               class="container590">#}
  481. {#                            <tr>#}
  482. {#                                <td align="center">#}
  483. {#                                    <table align="center" border="0" cellpadding="0" cellspacing="0">#}
  484. {#                                        <tr>#}
  485. {#                                            <td align="center">#}
  486. {#                                                <a style="font-size: 14px; font-family: 'Work Sans', Calibri, sans-serif; line-height: 24px;color: #5caad2; text-decoration: none;font-weight:bold;"#}
  487. {#                                                   >UNSUBSCRIBE</a>#}
  488. {#                                            </td>#}
  489. {#                                        </tr>#}
  490. {#                                    </table>#}
  491. {#                                </td>#}
  492. {#                            </tr>#}
  494. {#                        </table>#}
  495. {#                    </td>#}
  496. {#                </tr>#}
  498. {#            </table>#}
  499.         </td>
  500.     </tr>
  502.     <tr>
  503.         <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
  504.     </tr>
  506. </table>
  507. <!-- end footer ====== -->
  509. </body>
  511. </html>