fix: add device based change in email template for issuance and verif…

…ication (#770) Signed-off-by: Krishna Waske <krishna.waske@ayanworks.com> Signed-off-by: KulkarniShashank <shashank.kulkarni@ayanworks.com>
credebl · Sep 12, 2024 · 1325b39 · 1325b39
1 parent a4f5fc3
commit 1325b39
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/apps/issuance/templates/out-of-band-issuance.template.ts b/apps/issuance/templates/out-of-band-issuance.template.ts
@@ -8,6 +8,21 @@ export class OutOfBandIssuance {
           <title></title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
+          <style type="text/css">
+            /* Mobile Styles */
+            @media only screen and (max-width: 600px) {
+                .desktop-button {
+                    display: none !important;
+                }
+            }
+    
+            /* Desktop Styles */
+            @media only screen and (min-width: 601px) {
+                .mobile-button {
+                    display: none !important;
+                }
+            }
+        </style>
       </head>
       
       <body style="margin: 0px; padding:0px; background-color:#F9F9F9;">
@@ -36,9 +51,15 @@ export class OutOfBandIssuance {
                       </ul>
                       <div style="text-align: center; padding-bottom: 20px;">
                       <a clicktracking=off href="${deepLinkURL}"
+                          class="mobile-button"
                           style="padding: 10px 20px 10px 20px;color: #fff;background: #1F4EAD;border-radius: 5px;text-decoration: none;">
                           Accept Credential
                       </a>
+                      <a clicktracking=off href="${process.env.MOBILE_APP_DOWNLOAD_URL}"
+                          class="desktop-button"
+                          style="padding: 10px 20px 10px 20px;color: #fff;background: #1F4EAD;border-radius: 5px;text-decoration: none;">
+                          Download App
+                      </a>
                   </div>
                   
                    </p>

diff --git a/apps/verification/templates/out-of-band-verification.template.ts b/apps/verification/templates/out-of-band-verification.template.ts
@@ -9,6 +9,21 @@ export class OutOfBandVerification {
           <title></title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
+          <style type="text/css">
+            /* Mobile Styles */
+            @media only screen and (max-width: 600px) {
+                .desktop-button {
+                    display: none !important;
+                }
+            }
+    
+            /* Desktop Styles */
+            @media only screen and (min-width: 601px) {
+                .mobile-button {
+                    display: none !important;
+                }
+            }
+        </style>
       </head>
       
       <body style="margin: 0px; padding:0px; background-color:#F9F9F9;">
@@ -34,9 +49,15 @@ export class OutOfBandVerification {
                       </ul>
                       <div style="text-align: center; padding-bottom: 20px;">
                       <a clicktracking=off href="${deeplLinkURL}"
+                          class="mobile-button"
                           style="padding: 10px 20px 10px 20px;color: #fff;background: #1F4EAD;border-radius: 5px;text-decoration: none;">
                           Share Credential
                       </a>
+                      <a clicktracking=off href="${process.env.MOBILE_APP_DOWNLOAD_URL}"
+                          class="desktop-button"
+                          style="padding: 10px 20px 10px 20px;color: #fff;background: #1F4EAD;border-radius: 5px;text-decoration: none;">
+                          Download App
+                      </a>
                   </div>
                   
                    </p>