feat(UI): add 'Made in KSA certified' badge to the footer (#242)

* feat(UI): add 'Made in KSA certified' badge to the footer * enhance: made in KSA badge in footer * Update payment-methods.twig --------- Co-authored-by: SallaDev <[email protected]>
SallaApp · Sep 4, 2023 · fa10dbc · fa10dbc
1 parent b6b9089
commit fa10dbc
Showing 1 changed file with 30 additions and 22 deletions.
diff --git a/src/views/components/footer/payment-methods.twig b/src/views/components/footer/payment-methods.twig
@@ -3,28 +3,36 @@
 |-----------------|-------|-----------------------------------------------------------------|
 | payment_methods | array | List of active payments ex: [mada, credit_card, bank (Bank transfer (Transfer receipt)), cod (Cash On Delivery), ...] |
 #}
-<ul class="flex justify-center items-stretch rtl:space-x-reverse space-x-2">
-  {% for method in payment_methods %}
-    <li class="w-12 h-8 bg-white rounded flex items-center p-1">
-      <img class="lazy object-contain max-h-full" width="100%" height="100%" src="{{ 'images/s-empty.png' | asset }}" data-src="{{ ('images/payment/'~ method ~'_mini.png') | cdn }}" alt="{{ method }}">
-    </li>
-  {% endfor %}
+<ul class="flex justify-center items-stretch flex-wrap rtl:space-x-reverse gap-2">
 
-  {# Business certificate - SBC #}
-  {% if store.settings.certificate %}
-    <li class="w-12 bg-white rounded p-1 flex-center">
-        <a class="load-img-onclick" data-modal-id="modal-certificate" href="#/" alt="{{ store.settings.certificate.id }}">
-          <img width="100%" height="100%" src="{{ 'images/s-empty.png' | asset }}" data-src="{{ 'images/sbc.png' | cdn }}" class="lazy rounded-sm hover:opacity-80 transition-opacity h-6" alt="value added tax">
-        </a>
-    </li>
+    {#    Made in KSA certificate#}
+    {% if store.settings.made_in_ksa %}
+        <li class="w-12 h-8 bg-white rounded flex items-center p-1">
+            <img class="lazy object-contain max-h-full"  width="100%" height="100%" decoding="async" loading="lazy" src="{{ 'images/made-in-ksa.svg' | cdn }}" alt="made in KSA certified">
+        </li>
+    {% endif %}
 
-    <salla-modal sub-title-first sub-title="{{ store.settings.certificate.id }}" modal-title="{{ store.settings.certificate.id }}" id="modal-certificate">
-      <div class="flex justify-center max-w-full">
-        <img class="w-full" loading="lazy" 
-              src="{{ 'images/s-empty.png' | asset }}" 
-              data-src="{{ store.settings.certificate.image }}"
-              alt="{{ store.settings.certificate.id }}"/>
-      </div>
-    </salla-modal>
-  {% endif %}
+    {% for method in payment_methods %}
+        <li class="w-12 h-8 bg-white rounded flex items-center p-1">
+            <img class="lazy object-contain max-h-full" width="100%" height="100%" src="{{ 'images/s-empty.png' | asset }}" data-src="{{ ('images/payment/'~ method ~'_mini.png') | cdn }}" alt="{{ method }}">
+        </li>
+    {% endfor %}
+
+    {# Business certificate - SBC #}
+    {% if store.settings.certificate %}
+        <li class="w-12 bg-white rounded p-1 flex-center">
+            <a class="load-img-onclick" data-modal-id="modal-certificate" href="#/" alt="{{ store.settings.certificate.id }}">
+                <img width="100%" height="100%" src="{{ 'images/s-empty.png' | asset }}" data-src="{{ 'images/sbc.png' | cdn }}" class="lazy rounded-sm hover:opacity-80 transition-opacity h-6" alt="value added tax">
+            </a>
+        </li>
+
+        <salla-modal sub-title-first sub-title="{{ store.settings.certificate.id }}" modal-title="{{ store.settings.certificate.id }}" id="modal-certificate">
+            <div class="flex justify-center max-w-full">
+                <img class="w-full" loading="lazy"
+                     src="{{ 'images/s-empty.png' | asset }}"
+                     data-src="{{ store.settings.certificate.image }}"
+                     alt="{{ store.settings.certificate.id }}"/>
+            </div>
+        </salla-modal>
+    {% endif %}
 </ul>