DEICH-5925: deichman.no: finalized child patron form and flow

deichman.no/components/NewPatronFormAdmin/ChildPatronAdminSearch.js

-import { Block, Button, Input, Table } from "@digibib/deichman-ui";
+import { Block, Button, Icon, Input, Table } from "@digibib/deichman-ui";
 import { useFormik } from "formik";
 import { useRouter } from "next/router";
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchChildPatrons } from "../../store/adminSearch";
+import {
+  completeChildPatronRegistration,
+  fetchChildPatrons
+} from "../../store/adminSearch";
 import { formatDateFromISOString } from "../../utilities/datetime";
-
 import "./styles.css";
 
 const initialValues = date => {
@@ -41,6 +43,8 @@ const ChildPatronAdminSearch = () => {
   const { date } = router.query;
   const dispatch = useDispatch();
   const { patrons } = useSelector(state => state.adminSearch);
+  const kohaUrl = useSelector(state => state.application.externalUrls.koha);
+  const [isLoading, setIsLoading] = useState(false);
 
   const formik = useFormik({
     initialValues: initialValues(date),
@@ -50,7 +54,11 @@ const ChildPatronAdminSearch = () => {
   useEffect(
     () => {
       if (date) {
-        dispatch(fetchChildPatrons(date));
+        (async () => {
+          setIsLoading(true);
+          await dispatch(fetchChildPatrons(date));
+          setIsLoading(false);
+        })();
       }
     },
     [date]
@@ -86,7 +94,7 @@ const ChildPatronAdminSearch = () => {
       case "REGBARN":
         return "Selvregistrert barn";
       case "REGBARNWEB":
-        return "Selvregistrert barn (fra web)";
+        return "Selvregistrert barn";
       default:
         return categorycode;
     }
@@ -100,6 +108,11 @@ const ChildPatronAdminSearch = () => {
     return formatDateFromISOString(dob);
   };
 
+  const handleCompleteRegistration = patron => {
+    dispatch(completeChildPatronRegistration(patron));
+    router.push("/ansatt/ny-bruker");
+  };
+
   return (
     <div className="child-patron-admin-search">
       <form onSubmit={handleSubmit} disabled={false}>
@@ -137,46 +150,77 @@ const ChildPatronAdminSearch = () => {
         </span>
       </Block>
 
-      <Block bottom={4}>
-        <h2>
-          Resultat for <b>{formateDate(date)}</b>
-        </h2>
-      </Block>
-      {patrons?.length > 0 && (
-        <Block top={4}>
-          <Table full responsive>
-            <Table.Head>
-              <Table.Row>
-                <Table.Cell isHeadCell>Navn</Table.Cell>
-                <Table.Cell isHeadCell>Kategori</Table.Cell>
-                <Table.Cell isHeadCell>Fødselsdato</Table.Cell>
-              </Table.Row>
-            </Table.Head>
-            <Table.Body>
-              {patrons.map((obj, idx) => (
-                <Fragment key={idx}>
-                  <Table.Row>
-                    <Table.Cell label="Navn">
-                      <b>{obj?.name}</b>
-                    </Table.Cell>
-                    <Table.Cell label="Kategori">
-                      <b>{formatCategoryCode(obj?.categorycode)}</b>
-                    </Table.Cell>
-                    <Table.Cell label="Fødselsdato">
-                      <b>{formatDateOfBirth(obj?.dateofbirth)}</b>
-                    </Table.Cell>
-                    <Table.Cell label="">
-                      <span className="child-patron-admin-search__register-text">
-                        <b>Fullfør registrering</b>
-                      </span>
-                    </Table.Cell>
-                  </Table.Row>
-                </Fragment>
-              ))}
-            </Table.Body>
-          </Table>
+      {!isLoading && (patrons?.length === 0 || !patrons) && (
+        <Block top={6}>
+          <h3>
+            Søket på <b>{formateDate(date)}</b> gav ingen treff.
+          </h3>
         </Block>
       )}
+
+      {!isLoading && patrons?.length > 0 && (
+        <>
+          <Block bottom={4}>
+            <h2>
+              Resultat for <b>{formateDate(date)}</b>
+            </h2>
+          </Block>
+          <Block top={4}>
+            <Table full responsive>
+              <Table.Head>
+                <Table.Row>
+                  <Table.Cell isHeadCell>Navn</Table.Cell>
+                  <Table.Cell isHeadCell>Kategori</Table.Cell>
+                  <Table.Cell isHeadCell>Fødselsdato</Table.Cell>
+                </Table.Row>
+              </Table.Head>
+              <Table.Body>
+                {patrons.map((patron, idx) => (
+                  <Fragment key={idx}>
+                    <Table.Row>
+                      <Table.Cell label="Navn">
+                        <b>{`${patron?.firstname} ${patron?.surname}`}</b>
+                      </Table.Cell>
+                      <Table.Cell label="Kategori">
+                        <b>{formatCategoryCode(patron?.categorycode)}</b>
+                      </Table.Cell>
+                      <Table.Cell label="Fødselsdato">
+                        <b>{formatDateOfBirth(patron?.dateofbirth)}</b>
+                      </Table.Cell>
+                      <Table.Cell label="">
+                        {patron?.categorycode === "B" && (
+                          <>
+                            <span className="link">
+                              <a
+                                href={`${kohaUrl}/cgi-bin/koha/members/moremember.pl?borrowernumber=${
+                                  patron?.borrowernumber
+                                }`}
+                                target="_blank"
+                              >
+                                Endre i Koha
+                              </a>
+                            </span>
+                            <Icon type="new-tab" />
+                          </>
+                        )}
+                        {patron?.categorycode === "REGBARN" ||
+                          (patron?.categorycode === "REGBARNWEB" && (
+                            <span
+                              className="child-patron-admin-search__register-text"
+                              onClick={() => handleCompleteRegistration(patron)}
+                            >
+                              <b>Fullfør registrering</b>
+                            </span>
+                          ))}
+                      </Table.Cell>
+                    </Table.Row>
+                  </Fragment>
+                ))}
+              </Table.Body>
+            </Table>
+          </Block>
+        </>
+      )}
     </div>
   );
 };

deichman.no/components/NewPatronFormAdmin/styles.css

@@ -22,5 +22,10 @@ input {
   .child-patron-admin-search__register-text {
     color: var(--col-ok-3);
     cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .link {
+    margin-right: var(--spacing-1);
   }
 }

deichman.no/pages/ansatt/ny-bruker/index.js

-import { Block, Container, Grid, GridItem, Icon } from "@digibib/deichman-ui";
+import {
+  Alert,
+  Block,
+  Container,
+  Grid,
+  GridItem,
+  Icon
+} from "@digibib/deichman-ui";
 import autoBind from "auto-bind";
 import { differenceInYears, parse } from "date-fns";
 import PropTypes from "prop-types";
@@ -12,6 +19,7 @@ import {
 } from "../../../components/NewPatronFormAdmin";
 import NewChildPatronFormAdmin from "../../../components/NewPatronFormAdmin/NewChildPatronFormAdmin";
 import NewChildPatronFormAdminSearch from "../../../components/NewPatronFormAdmin/NewChildPatronFormAdminSearch";
+import { resetStateChildPatronRegistration } from "../../../store/adminSearch";
 import { withAuthSync } from "../../../utilities/auth";
 import PersonIdentificationnumber from "../../../utilities/personIdentificationnumber";
 
@@ -34,7 +42,9 @@ class RegistrationStep1 extends React.Component {
       showSubmitError: false,
       showErrorMessageFinalizeChildForm: false,
       userDataFromFront: false,
-      userHasNoEmail: false
+      userHasNoEmail: false,
+      showAlert: false,
+      submittedChildPatronName: null
     };
 
     this.ssnCheck = new PersonIdentificationnumber();
@@ -253,6 +263,10 @@ class RegistrationStep1 extends React.Component {
   async submitFinalizeChildForm(data) {
     this.setState({ isSubmitting: true });
     const url = "/api/registration/child-finalize";
+    const firstName = data.firstName;
+    const lastName = data.lastName;
+    const name = `${firstName} ${lastName}`;
+
     try {
       const checkUserResponse = await fetch(url, {
         headers: {
@@ -269,10 +283,13 @@ class RegistrationStep1 extends React.Component {
       });
 
       if (checkUserResponse.ok) {
-        // Forward to thank you page
-        window.location.href = `/ansatt/ny-bruker/kvittering-barn?borrowernumber=${
-          data.borrowernumber
-        }`;
+        this.props.resetChildPatronState();
+        this.setState({
+          showAlert: true,
+          submittedChildPatronName: name,
+          userHalfRegistered: false
+        });
+        window.scrollTo(0, 0);
       } else {
         this.setState({
           showErrorMessageFinalizeChildForm: true,
@@ -360,6 +377,10 @@ class RegistrationStep1 extends React.Component {
     return true;
   }
 
+  handleAlertClose = () => {
+    this.setState({ showAlert: false });
+  };
+
   render() {
     const {
       userData,
@@ -375,9 +396,11 @@ class RegistrationStep1 extends React.Component {
       showErrorPatronSearch,
       showSubmitError,
       showErrorMessageFinalizeChildForm,
-      userDataFromFront
+      userDataFromFront,
+      showAlert,
+      submittedChildPatronName
     } = this.state;
-    const { kohaUrl } = this.props;
+    const { kohaUrl, adminSearch } = this.props;
     const kohaBorrowerUrl = `${kohaUrl}/cgi-bin/koha/members/moremember.pl?borrowernumber=${borrowernumber}`;
     const kohaHomeUrl = `${kohaUrl}/cgi-bin/koha/mainpage.pl`;
 
@@ -389,6 +412,23 @@ class RegistrationStep1 extends React.Component {
           isHiddenPage
         />
         <Container preventCollapse>
+          {showAlert && (
+            <div className="test">
+              <Alert
+                centered
+                closeLabel="Lukk"
+                type="notification"
+                onClose={this.handleAlertClose}
+              >
+                <Block top={4} bottom={4}>
+                  <p>
+                    Låner <b>{submittedChildPatronName}</b> er aktiv!{" "}
+                    <a href={kohaBorrowerUrl} target="_blank">Vis låner i Koha</a>.
+                  </p>
+                </Block>
+              </Alert>
+            </div>
+          )}
           <Block top={8} bottom={8}>
             <h1>Ny låner</h1>
           </Block>
@@ -409,7 +449,7 @@ class RegistrationStep1 extends React.Component {
           {/* User is child and has completed online registration */}
           {!isLoadingKohaData && (
             <Block>
-              {userHalfRegistered && (
+              {userHalfRegistered && !adminSearch?.selectedPatron && (
                 <FinalizeChildFromWebForm
                   userData={userData}
                   isSubmitting={isSubmitting}
@@ -421,64 +461,67 @@ class RegistrationStep1 extends React.Component {
             </Block>
           )}
 
+          {adminSearch?.selectedPatron && (
+            <Block>
+              <FinalizeChildFromWebForm
+                userData={adminSearch.selectedPatron}
+                isSubmitting={isSubmitting}
+                isError={showErrorMessageFinalizeChildForm}
+                onSubmitForm={this.submitFinalizeChildForm}
+                kohaExternalUrl={kohaUrl}
+              />
+            </Block>
+          )}
+
           {/* Regular user: Show standard flow */}
-          {canBeRegistered && !userHalfRegistered && (
-            <>
-              {currentStep === "search" && (
-                <>
-                  <NewPatronFormAdminIdSearch
-                    isDufNumber={this.isDufNumber}
-                    onSubmitForm={this.submitPatronSearch}
-                    isError={showErrorPatronSearch}
-                    isLoading={isLoading}
+          {canBeRegistered &&
+            !userHalfRegistered &&
+            !adminSearch?.selectedPatron && (
+              <>
+                {currentStep === "search" && (
+                  <>
+                    <NewPatronFormAdminIdSearch
+                      isDufNumber={this.isDufNumber}
+                      onSubmitForm={this.submitPatronSearch}
+                      isError={showErrorPatronSearch}
+                      isLoading={isLoading}
+                    />
+                    <NewChildPatronFormAdminSearch />
+                  </>
+                )}
+
+                {!isAdultUser && currentStep === "form" && (
+                  <NewPatronFormAdmin
+                    userData={userData}
+                    cardnumber={cardnumber}
+                    userDataFromFront={userDataFromFront}
+                    isError={showSubmitError}
+                    onSubmitForm={this.submitRegularForm}
                   />
-                  <NewChildPatronFormAdminSearch />
-                </>
-              )}
-
-              {/* {currentStep === "form" && (
-                <NewPatronFormAdmin
-                  isAdultUser={isAdultUser}
-                  userData={userData}
-                  cardnumber={cardnumber}
-                  userDataFromFront={userDataFromFront}
-                  isError={showSubmitError}
-                  onSubmitForm={this.submitRegularForm}
-                />
-              )} */}
-              {!isAdultUser && currentStep === "form" && (
-                <NewPatronFormAdmin
-                  userData={userData}
-                  cardnumber={cardnumber}
-                  userDataFromFront={userDataFromFront}
-                  isError={showSubmitError}
-                  onSubmitForm={this.submitRegularForm}
-                />
-              )}
-
-              {isAdultUser && currentStep === "form" && (
-                <NewChildPatronFormAdmin
-                  userData={userData}
-                  cardnumber={cardnumber}
-                  userDataFromFront={userDataFromFront}
-                  isError={showSubmitError}
-                  onSubmitForm={this.submitRegularForm}
-                />
-              )}
-
-              <Block bottom={8}>
-                <Grid>
-                  <GridItem large="two-fifths" />
-                  <GridItem large="three-fifths">
-                    <a href={kohaHomeUrl}>Tilbake til Koha</a>
-                    <span style={{ marginLeft: "0.5rem" }}>
-                      <Icon type="new-tab" />
-                    </span>
-                  </GridItem>
-                </Grid>
-              </Block>
-            </>
-          )}
+                )}
+
+                {isAdultUser && currentStep === "form" && (
+                  <NewChildPatronFormAdmin
+                    userData={userData}
+                    cardnumber={cardnumber}
+                    userDataFromFront={userDataFromFront}
+                    isError={showSubmitError}
+                    onSubmitForm={this.submitRegularForm}
+                  />
+                )}
+                <Block bottom={8}>
+                  <Grid>
+                    <GridItem large="two-fifths" />
+                    <GridItem large="three-fifths">
+                      <a href={kohaHomeUrl}>Tilbake til Koha</a>
+                      <span style={{ marginLeft: "0.5rem" }}>
+                        <Icon type="new-tab" />
+                      </span>
+                    </GridItem>
+                  </Grid>
+                </Block>
+              </>
+            )}
         </Container>
       </>
     );
@@ -490,10 +533,13 @@ RegistrationStep1.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  kohaUrl: state.application.externalUrls.koha
+  kohaUrl: state.application.externalUrls.koha,
+  adminSearch: state.adminSearch
 });
 
-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = dispatch => ({
+  resetChildPatronState: () => dispatch(resetStateChildPatronRegistration())
+});
 
 export default connect(
   mapStateToProps,

deichman.no/store/adminSearch/index.js

 const GET_CHILD_PATRONS_SUCCESS = "admin/CHILD_PATRONS_SUCCESS";
 const GET_CHILD_PATRONS_ERROR = "admin/CHILD_PATRONS_ERROR";
+const COMPLETE_CHILD_PATRON_REGISTRATION =
+  "admin/COMPLETE_CHILD_PATRON_REGISTRATION";
+const RESET_CHILD_PATRON_REGISTRATION = "admin/RESET_CHILD_PATRON_REGISTRATION";
 
 const initialState = {
-  patrons: []
+  patrons: [],
+  selectedPatron: null
 };
 
 export default function reducer(state = initialState, action = {}) {
@@ -13,6 +17,18 @@ export default function reducer(state = initialState, action = {}) {
         patrons: action.result
       };
 
+    case COMPLETE_CHILD_PATRON_REGISTRATION:
+      return {
+        ...state,
+        selectedPatron: action.patron
+      };
+
+    case RESET_CHILD_PATRON_REGISTRATION:
+      return {
+        ...state,
+        selectedPatron: null
+      };
+
     default:
       return {
         ...state
@@ -28,6 +44,14 @@ export function getChildPatronsError(err) {
   return { type: GET_CHILD_PATRONS_ERROR, err };
 }
 
+export function getCompleteChildPatronRegistration(patron) {
+  return { type: COMPLETE_CHILD_PATRON_REGISTRATION, patron };
+}
+
+export function getResetCompleteChildPatronRegistration() {
+  return { type: RESET_CHILD_PATRON_REGISTRATION };
+}
+
 const formatToKohaDate = date => {
   const [d1, d2, m1, m2, y1, y2, y3, y4] = date.split("");
 
@@ -43,7 +67,7 @@ export const fetchChildPatrons = birthdate => {
           "Content-Type": "application/json; charset=utf-8"
         },
         credentials: "include",
-        body: JSON.stringify({birthdate: formatToKohaDate(birthdate)})
+        body: JSON.stringify({ birthdate: formatToKohaDate(birthdate) })
       });
 
       const patrons = await response.json();
@@ -53,3 +77,15 @@ export const fetchChildPatrons = birthdate => {
     }
   };
 };
+
+export const completeChildPatronRegistration = patron => {
+  return dispatch => {
+    dispatch(getCompleteChildPatronRegistration(patron));
+  };
+};
+
+export const resetStateChildPatronRegistration = () => {
+  return dispatch => {
+    dispatch(getResetCompleteChildPatronRegistration());
+  };
+};