From 9837c2ce63279280b3023fad928dff26c92489ae Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 24 Dec 2024 12:20:59 +0800
Subject: [PATCH] used InfoBlock component in verify modals, added XOF and UGx
 currencies

---
 addon/components/modals/verify-by-sms.hbs | 24 ++++-------------------
 addon/components/modals/verify-email.hbs  | 23 ++++------------------
 addon/utils/get-currency.js               | 24 +++++++++++++++++++++++
 3 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/addon/components/modals/verify-by-sms.hbs b/addon/components/modals/verify-by-sms.hbs
index ddf653a..28dfb9a 100644
--- a/addon/components/modals/verify-by-sms.hbs
+++ b/addon/components/modals/verify-by-sms.hbs
@@ -1,25 +1,9 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <div class="bg-yellow-50 rounded shadow-sm border-l-4 border-yellow-400 p-4 mb-5">
-            <div class="flex">
-                <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path
-                            fill-rule="evenodd"
-                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clip-rule="evenodd"
-                        ></path>
-                    </svg>
-                </div>
-                <div class="ml-3 flex items-center">
-                    <span class="font-extrabold text-yellow-800">Let's verify your phone number instead.</span>
-                </div>
-            </div>
-            <div class="py-3">
-                <p class="text-yellow-700">Confirm your phone number below and click send to receive a verification code by SMS.</p>
-            </div>
-        </div>
-
+         <InfoBlock @type="info" @icon="lightbulb" @iconSize="lg" class="mb-5">
+            <div class="font-extrabold">Let's verify your phone number instead.</div>
+            <div>Confirm your phone number below and click send to receive a verification code by SMS.</div>
+        </InfoBlock>
         <InputGroup @name="Verify your phone number" @helpText="Have a second look and confirm your phone number is correct.">
             <PhoneInput @value={{@options.phone}} @onInput={{fn (mut @options.phone)}} class="form-input input-lg w-full" />
         </InputGroup>
diff --git a/addon/components/modals/verify-email.hbs b/addon/components/modals/verify-email.hbs
index eb32229..660a4b6 100644
--- a/addon/components/modals/verify-email.hbs
+++ b/addon/components/modals/verify-email.hbs
@@ -1,24 +1,9 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <div class="bg-blue-50 rounded shadow-sm border-l-4 border-blue-400 p-4 mb-5">
-            <div class="flex">
-                <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path
-                            fill-rule="evenodd"
-                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clip-rule="evenodd"
-                        ></path>
-                    </svg>
-                </div>
-                <div class="ml-3 flex items-center">
-                    <span class="font-extrabold text-blue-800">Verify your email address</span>
-                </div>
-            </div>
-            <div class="py-3">
-                <p class="text-blue-700">Re-verify your email address and click Send to continue.</p>
-            </div>
-        </div>
+        <InfoBlock @type="info" @icon="lightbulb" @iconSize="lg" class="mb-5">
+            <div class="font-extrabold">Verify your email address.</div>
+            <div>Re-verify your email address and click Send to continue.</div>
+        </InfoBlock>
         {{#if @options.sent}}
             <InputGroup
                 @type="tel"
diff --git a/addon/utils/get-currency.js b/addon/utils/get-currency.js
index 0317c3c..810156f 100644
--- a/addon/utils/get-currency.js
+++ b/addon/utils/get-currency.js
@@ -23,6 +23,18 @@ const currencies = [
         decimalSeparator: '.',
         symbolPlacement: 'before',
     },
+    {
+        iso2: 'SN',
+        name: 'West African Economic and Monetary Union',
+        emoji: '🇸🇳', 
+        code: 'XOF',
+        title: 'West African CFA Franc',
+        symbol: 'Fr',
+        precision: 0, 
+        thousandSeparator: ',', 
+        decimalSeparator: '.', 
+        symbolPlacement: 'before', 
+    },
     {
         code: 'EUR',
         title: 'Euro',
@@ -946,6 +958,18 @@ const currencies = [
         decimalSeparator: '.',
         symbolPlacement: 'before',
     },
+    {
+        iso2: 'UG',
+        name: 'Uganda',
+        emoji: '🇺🇬',
+        code: 'UGX',
+        title: 'Ugandan Shilling',
+        symbol: 'USh',
+        precision: 0,
+        thousandSeparator: ',',
+        decimalSeparator: '/',
+        symbolPlacement: 'before',
+    },
     {
         iso2: 'VN',
         name: 'Vietnam',