@lysaab/lysa-pep 1.0.0 → 1.0.2-0

package/src/pages/StatusPage/StatusPage.tsx

@@ -0,0 +1,207 @@
+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,
+    },
+  ];
+}

package/src/utils/Possession.ts

@@ -0,0 +1,21 @@
+export function formatPossessive(text: string | undefined, locale: string) {
+  if (!text) {
+    return;
+  }
+  const language = locale.substr(0, 2);
+  if (language === "sv") {
+    return formatSwedish(text);
+  }
+  return text;
+}
+
+function formatSwedish(text: string) {
+  if (
+    text[text.length - 1] !== "s" &&
+    text[text.length - 1] !== "z" &&
+    text[text.length - 1] !== "x"
+  ) {
+    text += "s";
+  }
+  return text;
+}