add template from merchant backoffice

1 files changed, 55 insertions, 0 deletions

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>
+  );
+}