added some logging messages

1 files changed, 91 insertions, 7 deletions

diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
index ad529a4a7..0e43f982d 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
@@ -1,20 +1,104 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame, withProcessLabel } from "./index";
 
 export function ContinentSelectionScreen(): VNode {
   const reducer = useAnastasisContext()
+
+  //FIXME: remove this when #7056 is fixed
+  const countryFromReducer = (reducer?.currentReducerState as any).selected_country || "" 
+  const [countryCode, setCountryCode] = useState( countryFromReducer )
+
   if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
     return <div />
   }
-  const sel = (x: string): void => reducer.transition("select_continent", { continent: x });
+  const selectContinent = (continent: string): void => {
+    reducer.transition("select_continent", { continent })
+  };
+  const selectCountry = (country: string): void => {
+    setCountryCode(country)
+  };
+  
+  
+  const continentList = reducer.currentReducerState.continents || [];
+  const countryList = reducer.currentReducerState.countries || [];
+  const theContinent = reducer.currentReducerState.selected_continent || ""
+  // const cc = reducer.currentReducerState.selected_country || "";
+  const theCountry = countryList.find(c => c.code === countryCode)
+  const selectCountryAction = () => {
+    //selection should be when the select box changes it value
+    if (!theCountry) return;
+    reducer.transition("select_country", {
+      country_code: countryCode,
+      currencies: [theCountry.currency],
+    })
+  }
+
+  // const step1 = reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
+  //   reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting;
+
+  const errors = !theCountry ? "Select a country" : undefined 
+
   return (
-    <AnastasisClientFrame hideNext title={withProcessLabel(reducer, "Select Continent")}>
-      {reducer.currentReducerState.continents.map((x: any) => (
-        <button onClick={() => sel(x.name)} key={x.name}>
-          {x.name}
-        </button>
-      ))}
+    <AnastasisClientFrame hideNext={errors} title={withProcessLabel(reducer, "Where do you live?")} onNext={selectCountryAction}>
+
+      <div class="columns" >
+        <div class="column is-one-third">
+          <div class="field">
+            <label class="label">Continent</label>
+            <div class="control is-expanded has-icons-left">
+              <div class="select is-fullwidth" >
+                <select onChange={(e) => selectContinent(e.currentTarget.value)} value={theContinent} >
+                  <option key="none" disabled selected value=""> Choose a continent </option>
+                  {continentList.map(prov => (
+                    <option key={prov.name} value={prov.name}>
+                      {prov.name}
+                    </option>
+                  ))}
+                </select>
+                <div class="icon is-small is-left">
+                  <i class="mdi mdi-earth" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="field">
+            <label class="label">Country</label>
+            <div class="control is-expanded has-icons-left">
+              <div class="select is-fullwidth" >
+                <select onChange={(e) => selectCountry((e.target as any).value)} disabled={!theContinent} value={theCountry?.code || ""}>
+                  <option key="none" disabled selected value=""> Choose a country </option>
+                  {countryList.map(prov => (
+                    <option key={prov.name} value={prov.code}>
+                      {prov.name}
+                    </option>
+                  ))}
+                </select>
+                <div class="icon is-small is-left">
+                  <i class="mdi mdi-earth" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* {theCountry && <div class="field">
+            <label class="label">Available currencies:</label>
+            <div class="control">
+              <input class="input is-small" type="text" readonly value={theCountry.currency} />
+            </div>
+          </div>} */}
+        </div>
+        <div class="column is-two-third">
+          <p>
+            Your location will help us to determine which personal information 
+            ask you for the next step.
+          </p>
+        </div>
+      </div>
+
     </AnastasisClientFrame>
   );
 }