From 5883d42d800c7b444c59d626bcaa5abca7dc83d0 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 19 Oct 2021 10:56:52 -0300
Subject: add template from merchant backoffice

---
 .../src/pages/home/AttributeEntryScreen.tsx        | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx

(limited to 'packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx')

diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
new file mode 100644
index 000000000..4df99db9a
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { AnastasisReducerApi, ReducerStateRecovery, ReducerStateBackup } from "../../hooks/use-anastasis-reducer";
+import { AnastasisClientFrame, withProcessLabel, LabeledInput } from "./index";
+
+export function AttributeEntryScreen(props: AttributeEntryProps): VNode {
+  const { reducer, reducerState: backupState } = props;
+  const [attrs, setAttrs] = useState<Record<string, string>>(
+    props.reducerState.identity_attributes ?? {}
+  );
+  return (
+    <AnastasisClientFrame
+      title={withProcessLabel(reducer, "Select Country")}
+      onNext={() => reducer.transition("enter_user_attributes", {
+        identity_attributes: attrs,
+      })}
+    >
+      {backupState.required_attributes.map((x: any, i: number) => {
+        return (
+          <AttributeEntryField
+            key={i}
+            isFirst={i == 0}
+            setValue={(v: string) => setAttrs({ ...attrs, [x.name]: v })}
+            spec={x}
+            value={attrs[x.name]} />
+        );
+      })}
+    </AnastasisClientFrame>
+  );
+}
+
+interface AttributeEntryProps {
+  reducer: AnastasisReducerApi;
+  reducerState: ReducerStateRecovery | ReducerStateBackup;
+}
+
+export interface AttributeEntryFieldProps {
+  isFirst: boolean;
+  value: string;
+  setValue: (newValue: string) => void;
+  spec: any;
+}
+
+export function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
+  return (
+    <div>
+      <LabeledInput
+        grabFocus={props.isFirst}
+        label={props.spec.label}
+        bind={[props.value, props.setValue]}
+      />
+    </div>
+  );
+}
-- 
cgit v1.2.3