clear selection of currency in cashout

1 files changed, 81 insertions, 7 deletions

diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
index 80cb64c4c..1a5fad1b1 100644
--- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx
+++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
@@ -463,6 +463,82 @@ export function CreateCashout({
                 </div>
               </div>
 
+              <div class="sm:col-span-5">
+                <label
+                  class="block text-sm font-medium leading-6 text-gray-900"
+                  for="subject"
+                >
+                  {i18n.str`Currency`}
+                </label>
+
+                <div class="mt-2">
+                  <button
+                    type="button"
+                    name="set 50"
+                    class="               inline-flex p-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      form.isDebit = true;
+                      updateForm(structuredClone(form));
+                    }}
+                  >
+                    {form.isDebit ?
+                      <svg
+                        class="self-center flex-none h-5 w-5 text-indigo-600"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+
+                      :
+                      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                        <path d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                      </svg>
+                    }
+
+                    <i18n.Translate>Send {regional_currency}</i18n.Translate>
+                  </button>
+                  <button
+                    type="button"
+                    name="set 25"
+                    class=" -ml-px -mr-px inline-flex p-4 text-sm items-center rounded-r-md              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      form.isDebit = false;
+                      updateForm(structuredClone(form));
+                    }}
+                  >
+                    {!form.isDebit ?
+                      <svg
+                        class="self-center flex-none h-5 w-5 text-indigo-600"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+
+                      :
+                      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                        <path d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                      </svg>
+                    }
+
+                    <i18n.Translate>Receive {fiat_currency}</i18n.Translate>
+                  </button>
+                </div>
+              </div>
+
               {/* amount */}
               <div class="sm:col-span-5">
                 <div class="flex justify-between">
@@ -470,12 +546,10 @@ export function CreateCashout({
                     class="block text-sm font-medium leading-6 text-gray-900"
                     for="amount"
                   >
-                    {form.isDebit
-                      ? i18n.str`Amount to send`
-                      : i18n.str`Amount to receive`}
+                    {i18n.str`Amount`}
                     <b style={{ color: "red" }}> *</b>
                   </label>
-                  <button
+                  {/* <button
                     type="button"
                     data-enabled={form.isDebit}
                     class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
@@ -493,7 +567,7 @@ export function CreateCashout({
                       data-enabled={form.isDebit}
                       class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                     ></span>
-                  </button>
+                  </button> */}
                 </div>
                 <div class="mt-2">
                   <InputAmount
@@ -729,7 +803,7 @@ export function CreateCashout({
             </button>
           </div>
         </form>
-      </div>
-    </div>
+      </div >
+    </div >
   );
 }