@lysaab/lysa-pep 1.0.0-0 → 1.0.0

package/src/demo/Pep.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useContext, useEffect, useRef } from "react";
 import { Story } from "@lysaab/ui-2";
-import { IntlProvider } from "react-intl";
-import { IsPepPage } from "../pages/IsPep/IsPepPage";
-import { StatusPage } from "../pages/StatusPage/StatusPage";
-import { RolePage } from "../pages/RolePage/RolePage";
+import { PepIsPepPage } from "../pages/PepIsPepPage";
+import { PepStatusPage } from "../pages/PepStatusPage";
+import { PepRolePage } from "../pages/PepRolePage";
 import { PepContext, PepType, EntityType } from "../pages/PepContext";
 import { Done } from "./Done";
-import { RelationPage } from "../pages/RelationPage/RelationPage";
+import { PepRelationPage } from "../pages/PepRelationPage";
 
 export function Pep() {
   const [page, setPage] = useState(0);
@@ -15,98 +14,93 @@ export function Pep() {
   const loaded = useRef(false);
 
   useEffect(() => {
-    if (!loaded.current) {
-      pepContext.setState({
-        ownerName: "Sean Banan",
-        tin: "191212121212",
-        legalEntityType: EntityType.PERSON
-      });
+    if(!loaded.current) {
+      pepContext.setState({ ownerName: "Sean Banan", tin: '191212121212', legalEntityType: EntityType.PERSON });
       loaded.current = true;
     }
   }, [loaded, pepContext]);
 
   return (
     <div style={{ maxWidth: "1000px", margin: "0 auto" }}>
-      <IntlProvider locale="sv">
-        <Story
-          header="PEP Lib"
-          showBack={page > 0}
-          showClose={false}
-          onBack={() => {
-            if (page === 4 && type === PepType.NOT_PEP) {
-              setPage(0);
-            } else if (page === 3 && type === PepType.ME) {
-              setPage(1);
-            } else {
-              setPage(page - 1);
-            }
-          }}
-          transitionKey={page.toString()}
-          onExit={() => { }}
-        >
-          {page === 0 ? (
-            <IsPepPage
-              next={() =>
-                type !== PepType.NOT_PEP ? setPage(page + 1) : setPage(4)
+      <Story
+        header="PEP Lib"
+        showBack={page > 0}
+        showClose={false}
+        onBack={() => {
+          if (page === 4 && type === PepType.NOT_PEP) {
+            setPage(0);
+          } else if (page === 2 && type === PepType.ME) {
+            setPage(0);
+          } else {
+            setPage(page - 1);
+          }
+        }}
+        transitionKey={page.toString()}
+        onExit={() => {}}
+      >
+        {page === 0 && (
+          <PepIsPepPage
+            next={() => {
+              if (type === PepType.ME) {
+                setPage(2);
+              } else if (type === PepType.NOT_PEP) {
+                setPage(4);
+              } else {
+                setPage(1);
               }
-            />
-          ) : null}
-          {page === 1 ? (
-            <StatusPage
-              next={() =>
-                type === PepType.ME ? setPage(page + 2) : setPage(page + 1)
+            }}
+          />
+        )}
+        {page === 1 && <PepRelationPage next={() => setPage(2)} />}
+        {page === 2 && <PepStatusPage next={() => setPage(3)} />}
+        {page === 3 && <PepRolePage next={() => setPage(4)} />}
+        {page === 4 && <Done />}
+      </Story>
+      <hr />
+      <fieldset>
+        <legend>Konfig</legend>
+        <div>
+          <label>
+            Entitet
+
+            <select
+              value={pepContext.state.legalEntityType || EntityType.PERSON}
+              onChange={event => {
+                pepContext.setState({
+                  legalEntityType: event.currentTarget.value as EntityType,
+                });
+              }}
+            >
+              <option value={EntityType.PERSON}>Person</option>
+              <option value={EntityType.CORPORATION}>Företag</option>
+            </select>
+          </label>
+        </div>
+        <div>
+          <label>
+            Namnet på den verkliga huvudmannen
+            <input
+              type="text"
+              value={pepContext.state.ownerName || ''}
+              onChange={event =>
+                pepContext.setState({ ownerName: event.currentTarget.value })
               }
             />
-          ) : null}
-          {page === 2 ? <RelationPage next={() => setPage(page + 1)} /> : null}
-          {page === 3 ? <RolePage next={() => setPage(page + 1)} /> : null}
-          {page === 4 ? <Done /> : null}
-        </Story>
-        <hr />
-        <fieldset>
-          <legend>Konfig</legend>
-          <div>
-            <label>
-              Verkligen huvudman
-            <input
-                type="checkbox"
-                value={"true"}
-                onChange={event =>
-                  pepContext.setState({
-                    legalEntityType: event.currentTarget.checked
-                      ? EntityType.CORPORATION
-                      : EntityType.PERSON
-                  })
-                }
-              />
-            </label>
-          </div>
-          <div>
-            <label>
-              Namnet på den verkliga huvudmannen
+          </label>
+        </div>
+        <div>
+          <label>
+            Personnummer på huvudmannen
             <input
-                type="text"
-                value={pepContext.state.ownerName || ""}
-                onChange={event =>
-                  pepContext.setState({ ownerName: event.currentTarget.value })
-                }
-              />
-            </label>
-          </div>
-          <div>
-            <label>
-              Personnummer på huvudmannen
-            <input
-                type="text"
-                value={pepContext.state.tin || ""}
-                onChange={event =>
-                  pepContext.setState({ tin: event.currentTarget.value })
-                }
-              />
-            </label>
-          </div>
-        </fieldset>
-      </IntlProvider>
+              type="text"
+              value={pepContext.state.tin || ''}
+              onChange={event =>
+                pepContext.setState({ tin: event.currentTarget.value })
+              }
+            />
+          </label>
+        </div>
+      </fieldset>
     </div>
   );
 }