feat: update action-1 message and its styles

eduNEXT · Sep 5, 2023 · 25daa40 · 25daa40
1 parent 8d27c1f
commit 25daa40
Showing 1 changed file with 64 additions and 10 deletions.
diff --git a/eox_nelp/payment_notifications/templates/payment_notifications.html b/eox_nelp/payment_notifications/templates/payment_notifications.html
@@ -1,6 +1,7 @@
 <%namespace name='static' file='/static_content.html'/>
 <%!
 from django.conf import settings
+from django.urls import reverse
 from django.utils.translation import ugettext as _
 from django.contrib.auth import get_user_model
 from lms.djangoapps.grades.api import CourseGradeFactory
@@ -23,6 +24,7 @@
     }
 
     .paynotifications {
+        font-family: 'DIN Next LT Arabic' !important;
     }
     .paynotifications p {
         margin-bottom: 20px;
@@ -33,14 +35,50 @@
     }
 
     .payment-message {
-        margin-bottom: 20px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: top;
+      line-height: 2em;
     }
     .payment-transaction-info {
         margin-bottom: 20px;
     }
     .payment-transaction-info li {
         margin: 10px;
     }
+
+    .payment-notification {
+      padding: 30px;
+      color: #1c355e;
+      border: 1px solid #d4d4d4;
+    }
+
+    .payment-notification-icon {
+      flex-shrink: 0;
+      margin-top: 4px;
+      width: 1.4em;
+      height: 1.4em;
+      margin-left: 7px;
+    }
+
+    .course-about-link {
+      color: #529dc2 !important;
+      font-weight: bold;
+    }
+
+    .payment-action {
+      border: 1px solid #529dc2 !important;
+      color: #529dc2 !important;
+      text-decoration: none;
+      border-radius: 4px;
+      padding: 0px 8px 4px 8px;
+      font-size: 0.95em;
+      margin-right: 5px;
+      background-color: #529dc229;
+      display: inline-block;
+    }
+
+
 </style>
 
 
@@ -67,6 +105,7 @@
                             course_overview = CourseOverview.objects.get(id=course_key)
                             course_name = course_overview.display_name
                             passed = grade and grade.passed
+                            course_about_link = reverse('about_course', args=[payment_notification.cdtrans_course_id])
                         except:
                             pass
                     %>
@@ -83,19 +122,34 @@
 
                     % if payment_notification.show_msg_case1 and payment_notification.internal_status == "case_1":
                         <div class="payment-message lang-ar">
-                            <b>مهم:</b> حصلت مشكلة في عملية الدفع للدورة <b>${course_name}</b> ولذلك تم إيقاف تسجيلك في فيها. يرجى الدفع الآن <a href=${payment_link}>هنا</a> للتسجيل مرة أخرى فيها.
-                            بعد ذلك، يمكنك المتابعة في الدورة وتقديم الإختبارات للحصول على شهادتك. للأستفسارات يرجى مراسلة الدعم الفني.
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="payment-notification-icon">
+                                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                            </svg>
+                            <div>
+                            يؤسفنا إبلاغك بأن عملية الدفع لم تتم ولم يتم خصم رسوم دورة <b><a href=${course_about_link} class="course-about-link">${course_name}</a></b>، للإستمرار في الدورة والحصول على الشهادة يمكنك إكمال عملية الدفع من خلال الرابط التالي
+
+                            %if payment_notification.call_to_action_1_url:
+                                <a href=${payment_notification.call_to_action_1_url} class="payment-action">${ payment_notification.call_to_action_1_msg }</a>
+                            %endif
+                            </div>
+
+
                         </div>
+
                         <div class="payment-message lang-en">
-                            <b>Attention:</b> There has been a problem with your payment process for <b>${course_name}</b>. Therefore, your enrollment has been paused in the course.
-                            Please try to pay again <a href=${payment_link}>here</a> to re-enroll in the course.
-                            After the payment is completed, you can continue your learning progress, submit exams and earn your certificate. If you have a question, please contact our support.
-                        </div>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="payment-notification-icon">
+                                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                            </svg>
+                            <div>
+                            We regret to inform you that the payment process was not completed and the <b><a href=${course_about_link} class="course-about-link">${course_name}</a></b> course fees were not deducted. On the certificate you can complete the payment process through the following link.
 
-                        %if payment_notification.call_to_action_1_url:
-                            <a href=${payment_notification.call_to_action_1_url}><button>${ payment_notification.call_to_action_1_msg }</button></a>
-                        %endif
+                            %if payment_notification.call_to_action_1_url:
+                                <a href=${payment_notification.call_to_action_1_url} class="payment-action">${ payment_notification.call_to_action_1_msg }</a>
+                            %endif
+                            </div>
 
+
+                        </div>
                     % endif