Commit 9a28c764 authored by Øyvind Julsrud's avatar Øyvind Julsrud Committed by Torstein
Browse files

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

parent c6b7c9b6
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 <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>
);
};
......
......@@ -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);
}
}
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,
......
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());
};
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment