@lysaab/lysa-pep 1.0.3-0 → 1.0.4-0

package/src/pages/StatusPage/StatusPage.tsx

@@ -1,207 +1,213 @@
-import React, {
-  FunctionComponent,
-  useRef,
-  useCallback,
-  useContext,
-} from "react";
-import {
-  Form,
-  RadioGroup,
-  RequiredValidator,
-  PrimaryButton,
-  LysaFormRef,
-  Datepicker,
-} from "@lysaab/ui-2";
-import { Alternative } from "@lysaab/ui-2/components/input/InputAPI";
-import { PepContext, PepStatus, EntityType, PepType } from "../PepContext";
-import { CountrySelect } from "../../components/CountrySelect";
-import { useIntl, FormattedMessage, IntlShape } from "react-intl";
-import {
-  isOngoingMessages,
-  endedMessages,
-  isLocalCountryMessages,
-  countrySelectionMessages,
-  localCountryAltMessages,
-  stateAltMessages,
-} from "./StatusMessages";
-import { formatPossessive } from "../../utils/Possession";
-
-interface Props {
-  next: () => void;
-}
-
-export const StatusPage: FunctionComponent<Props> = ({ next }) => {
-  const pepContext = useContext(PepContext);
-  const formRef = useRef<LysaFormRef>();
-  const intl = useIntl();
-  const stateAlternatives = getStateAlternatives(intl);
-  const isSwedenAlternatives = getIsLocalCountryAlternatives(intl);
-  const entityType = pepContext.state.legalEntityType || EntityType.PERSON;
-
-  const nextPage = useCallback(() => {
-    if (formRef.current && formRef.current.isValid) {
-      next();
-    }
-  }, [formRef, next]);
-
-  const updateIsSweden = useCallback(
-    (alternative: Alternative<string>) => {
-      pepContext.setState({ isSweden: alternative.value });
-
-      if (alternative.value === "other") {
-        pepContext.setState({ country: undefined });
-      }
-    },
-    [pepContext]
-  );
-
-  const updateIsOngoing = useCallback(
-    (alternative: Alternative<PepStatus>) => {
-      pepContext.setState({ isOngoing: alternative.value });
-
-      if (alternative.value === PepStatus.ONGOING) {
-        pepContext.setState({ ended: undefined });
-      }
-    },
-    [pepContext]
-  );
-
-  return (
-    <div>
-      <Form
-        lysaFormRef={formRef}
-        onSubmit={() => {
-          nextPage();
-        }}
-      >
-        <RadioGroup
-          alternatives={stateAlternatives}
-          header={intl.formatMessage(isOngoingMessages.header, {
-            entityType,
-            name: pepContext.state.ownerName,
-            possessiveName: formatPossessive(
-              pepContext.state.ownerName,
-              intl.locale
-            ),
-            relation:
-              pepContext.state.type === PepType.COLLEAGUE
-                ? pepContext.state.businessRelation
-                : pepContext.state.relationToPEP,
-            pepType: pepContext.state.type,
-          })}
-          onChange={updateIsOngoing}
-          value={stateAlternatives.find(
-            (alt) => alt.value === pepContext.state.isOngoing
-          )}
-          validators={[
-            new RequiredValidator(
-              intl.formatMessage(isOngoingMessages.required)
-            ),
-          ]}
-        />
-
-        {pepContext.state.isOngoing &&
-        pepContext.state.isOngoing === PepStatus.ENDED ? (
-          <Datepicker
-            label={intl.formatMessage(endedMessages.header)}
-            selected={pepContext.state.ended}
-            onChange={(event) =>
-              pepContext.setState({ ended: event || undefined })
-            }
-            validators={[
-              new RequiredValidator(
-                intl.formatMessage(isOngoingMessages.required)
-              ),
-            ]}
-            showMonthYearPicker
-            dateFormat="yyyy-MM"
-            maxDate={new Date()}
-          />
-        ) : null}
-
-        <RadioGroup
-          alternatives={isSwedenAlternatives}
-          header={intl.formatMessage(isLocalCountryMessages.header, {
-            possessiveName: formatPossessive(
-              pepContext.state.ownerName,
-              intl.locale
-            ),
-          })}
-          onChange={updateIsSweden}
-          value={isSwedenAlternatives.find(
-            (alt) => alt.value === pepContext.state.isSweden
-          )}
-          validators={[
-            new RequiredValidator(
-              intl.formatMessage(isLocalCountryMessages.required)
-            ),
-          ]}
-        />
-
-        {pepContext.state.isSweden && pepContext.state.isSweden === "other" ? (
-          <CountrySelect
-            label={intl.formatMessage(countrySelectionMessages.header, {
-              entityType,
-              name: pepContext.state.ownerName,
-              possessiveName: formatPossessive(
-                pepContext.state.ownerName,
-                intl.locale
-              ),
-              relation:
-                pepContext.state.type === PepType.COLLEAGUE
-                  ? pepContext.state.businessRelation
-                  : pepContext.state.relationToPEP,
-              pepType: pepContext.state.type,
-            })}
-            onChange={(event) =>
-              pepContext.setState({
-                country: event.value ? event.value.toString() : undefined,
-              })
-            }
-            validators={[
-              new RequiredValidator(
-                intl.formatMessage(countrySelectionMessages.required)
-              ),
-            ]}
-            value={pepContext.state.country}
-            omitCountries={["SE"]}
-          />
-        ) : null}
-
-        <PrimaryButton type="submit">
-          <FormattedMessage
-            id="pep.status.next"
-            description="Next button"
-            defaultMessage="Gå vidare"
-          />
-        </PrimaryButton>
-      </Form>
-    </div>
-  );
-};
-
-function getIsLocalCountryAlternatives(intl: IntlShape): Alternative<string>[] {
-  return [
-    {
-      text: intl.formatMessage(localCountryAltMessages.localCountry),
-      value: "sweden",
-    },
-    {
-      text: intl.formatMessage(localCountryAltMessages.otherCountry),
-      value: "other",
-    },
-  ];
-}
-
-function getStateAlternatives(intl: IntlShape): Alternative<PepStatus>[] {
-  return [
-    {
-      text: intl.formatMessage(stateAltMessages[PepStatus.ONGOING]),
-      value: PepStatus.ONGOING,
-    },
-    {
-      text: intl.formatMessage(stateAltMessages[PepStatus.ENDED]),
-      value: PepStatus.ENDED,
-    },
-  ];
-}
+import React, {
+  FunctionComponent,
+  useRef,
+  useCallback,
+  useContext,
+} from "react";
+import {
+  Form,
+  RadioGroup,
+  RequiredValidator,
+  PrimaryButton,
+  LysaFormRef,
+  Datepicker,
+  Card,
+} from "@lysaab/ui-2";
+import { Alternative } from "@lysaab/ui-2/components/input/InputAPI";
+import { PepContext, PepStatus, EntityType, PepType } from "../PepContext";
+import { CountrySelect } from "../../components/CountrySelect";
+import { useIntl, FormattedMessage, IntlShape } from "react-intl";
+import {
+  isOngoingMessages,
+  endedMessages,
+  isLocalCountryMessages,
+  countrySelectionMessages,
+  localCountryAltMessages,
+  stateAltMessages,
+} from "./StatusMessages";
+import { formatPossessive } from "../../utils/Possession";
+
+interface Props {
+  next: () => void;
+}
+
+export const StatusPage: FunctionComponent<Props> = ({ next }) => {
+  const pepContext = useContext(PepContext);
+  const formRef = useRef<LysaFormRef>();
+  const intl = useIntl();
+  const stateAlternatives = getStateAlternatives(intl);
+  const isSwedenAlternatives = getIsLocalCountryAlternatives(intl);
+  const entityType = pepContext.state.legalEntityType || EntityType.PERSON;
+
+  const nextPage = useCallback(() => {
+    if (formRef.current && formRef.current.isValid) {
+      next();
+    }
+  }, [formRef, next]);
+
+  const updateIsSweden = useCallback(
+    (alternative: Alternative<string>) => {
+      pepContext.setState({ isSweden: alternative.value });
+
+      if (alternative.value === "other") {
+        pepContext.setState({ country: undefined });
+      }
+    },
+    [pepContext]
+  );
+
+  const updateIsOngoing = useCallback(
+    (alternative: Alternative<PepStatus>) => {
+      pepContext.setState({ isOngoing: alternative.value });
+
+      if (alternative.value === PepStatus.ONGOING) {
+        pepContext.setState({ ended: undefined });
+      }
+    },
+    [pepContext]
+  );
+
+  return (
+    <div>
+      <Form
+        lysaFormRef={formRef}
+        onSubmit={() => {
+          nextPage();
+        }}
+      >
+        <Card>
+          <RadioGroup
+            alternatives={stateAlternatives}
+            header={intl.formatMessage(isOngoingMessages.header, {
+              entityType,
+              name: pepContext.state.ownerName,
+              possessiveName: formatPossessive(
+                pepContext.state.ownerName,
+                intl.locale
+              ),
+              relation:
+                pepContext.state.type === PepType.COLLEAGUE
+                  ? pepContext.state.businessRelation
+                  : pepContext.state.relationToPEP,
+              pepType: pepContext.state.type,
+            })}
+            onChange={updateIsOngoing}
+            value={stateAlternatives.find(
+              (alt) => alt.value === pepContext.state.isOngoing
+            )}
+            validators={[
+              new RequiredValidator(
+                intl.formatMessage(isOngoingMessages.required)
+              ),
+            ]}
+          />
+
+          {pepContext.state.isOngoing &&
+          pepContext.state.isOngoing === PepStatus.ENDED ? (
+            <Datepicker
+              label={intl.formatMessage(endedMessages.header)}
+              selected={pepContext.state.ended}
+              onChange={(event) =>
+                pepContext.setState({ ended: event || undefined })
+              }
+              validators={[
+                new RequiredValidator(
+                  intl.formatMessage(isOngoingMessages.required)
+                ),
+              ]}
+              showMonthYearPicker
+              dateFormat="yyyy-MM"
+              maxDate={new Date()}
+            />
+          ) : null}
+        </Card>
+
+        <Card>
+          <RadioGroup
+            alternatives={isSwedenAlternatives}
+            header={intl.formatMessage(isLocalCountryMessages.header, {
+              possessiveName: formatPossessive(
+                pepContext.state.ownerName,
+                intl.locale
+              ),
+            })}
+            onChange={updateIsSweden}
+            value={isSwedenAlternatives.find(
+              (alt) => alt.value === pepContext.state.isSweden
+            )}
+            validators={[
+              new RequiredValidator(
+                intl.formatMessage(isLocalCountryMessages.required)
+              ),
+            ]}
+          />
+
+          {pepContext.state.isSweden &&
+          pepContext.state.isSweden === "other" ? (
+            <CountrySelect
+              label={intl.formatMessage(countrySelectionMessages.header, {
+                entityType,
+                name: pepContext.state.ownerName,
+                possessiveName: formatPossessive(
+                  pepContext.state.ownerName,
+                  intl.locale
+                ),
+                relation:
+                  pepContext.state.type === PepType.COLLEAGUE
+                    ? pepContext.state.businessRelation
+                    : pepContext.state.relationToPEP,
+                pepType: pepContext.state.type,
+              })}
+              onChange={(event) =>
+                pepContext.setState({
+                  country: event.value ? event.value.toString() : undefined,
+                })
+              }
+              validators={[
+                new RequiredValidator(
+                  intl.formatMessage(countrySelectionMessages.required)
+                ),
+              ]}
+              value={pepContext.state.country}
+              omitCountries={["SE"]}
+            />
+          ) : null}
+        </Card>
+
+        <PrimaryButton block type="submit">
+          <FormattedMessage
+            id="pep.status.next"
+            description="Next button"
+            defaultMessage="Gå vidare"
+          />
+        </PrimaryButton>
+      </Form>
+    </div>
+  );
+};
+
+function getIsLocalCountryAlternatives(intl: IntlShape): Alternative<string>[] {
+  return [
+    {
+      text: intl.formatMessage(localCountryAltMessages.localCountry),
+      value: "sweden",
+    },
+    {
+      text: intl.formatMessage(localCountryAltMessages.otherCountry),
+      value: "other",
+    },
+  ];
+}
+
+function getStateAlternatives(intl: IntlShape): Alternative<PepStatus>[] {
+  return [
+    {
+      text: intl.formatMessage(stateAltMessages[PepStatus.ONGOING]),
+      value: PepStatus.ONGOING,
+    },
+    {
+      text: intl.formatMessage(stateAltMessages[PepStatus.ENDED]),
+      value: PepStatus.ENDED,
+    },
+  ];
+}