Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[MB-9736] PrimeUI Update Shipment Page #7595

Merged
merged 14 commits into from
Oct 20, 2021
Merged

[MB-9736] PrimeUI Update Shipment Page #7595

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1e49fc0
moved shipment to PrimeUI component, added formik updateshipment form
Oct 14, 2021
bbcb431
working update shipment page, haven't tested with new shipment yet
Oct 15, 2021
04f6359
update to checking if an address is empty
Oct 15, 2021
bc1a121
update to address format when updating shipment with Prime API
Oct 15, 2021
2ca0b90
add error logging to update shipment page
Oct 15, 2021
f20f152
fixed error with null address field going from uncontrolled to contro…
Oct 15, 2021
289386a
fix link to update shipment page from shipment component
Oct 15, 2021
2eac274
start of testing and refactor to move PrimeUIShipmentForm into it's o…
Oct 19, 2021
fc608f1
adding tests for PrimeUI Update Shipment
Oct 20, 2021
04da3ba
allow submit after error has occurred on page
Oct 20, 2021
90053de
remove unnecessary date check
Oct 20, 2021
ea8b2ee
Merge remote-tracking branch 'origin/master' into jm-MB-9736
Oct 20, 2021
cd986cb
remove test file with no tests
Oct 20, 2021
840b529
remove incorrect cache invalidation
Oct 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/pages/Office/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ const PrimeSimulatorMoveDetails = lazy(() => import('pages/PrimeUI/MoveTaskOrder
const PrimeSimulatorCreatePaymentRequest = lazy(() =>
import('pages/PrimeUI/CreatePaymentRequest/CreatePaymentRequest'),
);
const PrimeUIShipmentForm = lazy(() => import('pages/PrimeUI/Shipment/PrimeUIShipmentUpdate'));

export class OfficeApp extends Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -245,7 +247,7 @@ export class OfficeApp extends Component {
<PrivateRoute
key="primeSimulatorUpdateShipmentPath"
path={primeSimulatorRoutes.UPDATE_SHIPMENT_PATH}
component={() => <div>Update shipment path for prime simulator</div>}
component={PrimeUIShipmentForm}
rogeruiz marked this conversation as resolved.
Show resolved Hide resolved
requiredRoles={[roleTypes.PRIME_SIMULATOR]}
/>

Expand Down
94 changes: 2 additions & 92 deletions src/pages/PrimeUI/CreatePaymentRequest/CreatePaymentRequest.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,12 @@ import { useParams } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Button, Checkbox } from '@trussworks/react-uswds';

import { shipmentTypeLabels } from '../../../content/shipments';
import { formatDateFromIso } from '../../../shared/formatters';
import Shipment from '../Shipment/Shipment';

import LoadingPlaceholder from 'shared/LoadingPlaceholder';
import SomethingWentWrong from 'shared/SomethingWentWrong';
import SectionWrapper from 'components/Customer/SectionWrapper';
import formStyles from 'styles/form.module.scss';
import { ShipmentOptionsOneOf } from 'types/shipment';
import { AgentShape } from 'types/agent';
import { AddressShape } from 'types/address';
import descriptionListStyles from 'styles/descriptionList.module.scss';
import { usePrimeSimulatorGetMove } from 'hooks/queries';

Expand Down Expand Up @@ -54,92 +50,6 @@ ServiceItem.propTypes = {
}).isRequired,
};

const Shipment = ({ shipment }) => {
return (
<dl className={descriptionListStyles.descriptionList}>
<h3>{`${shipmentTypeLabels[shipment.shipmentType]} shipment`}</h3>
<div className={descriptionListStyles.row}>
<dt>Status:</dt>
<dd>{shipment.status}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Shipment ID:</dt>
<dd>{shipment.id}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Shipment eTag:</dt>
<dd>{shipment.eTag}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Requested Pickup Date:</dt>
<dd>{shipment.requestedPickupDate}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Actual Pickup Date:</dt>
<dd>{shipment.actualPickupDate}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Estimated Weight:</dt>
<dd>{shipment.primeEstimatedWeight}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Actual Weight:</dt>
<dd>{shipment.primeActualWeight}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Pickup Address:</dt>
<dd>
{shipment.pickupAddress.streetAddress1} {shipment.pickupAddress.streetAddress2} {shipment.pickupAddress.city}{' '}
{shipment.pickupAddress.state} {shipment.pickupAddress.postalCode}
</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Destination Address:</dt>
<dd>
{shipment.destinationAddress.streetAddress1} {shipment.destinationAddress.streetAddress2}{' '}
{shipment.destinationAddress.city} {shipment.destinationAddress.state}{' '}
{shipment.destinationAddress.postalCode}
</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Created at:</dt>
<dd>{formatDateFromIso(shipment.createdAt, 'YYYY-MM-DD')}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Approved at:</dt>
<dd>{shipment.approvedDate}</dd>
</div>
</dl>
);
};

Shipment.propTypes = {
shipment: PropTypes.shape({
id: PropTypes.string,
eTag: PropTypes.string,
shipmentType: ShipmentOptionsOneOf,
requestedPickupDate: PropTypes.string,
scheduledPickupDate: PropTypes.string,
actualPickupDate: PropTypes.string,
pickupAddress: AddressShape,
secondaryPickupAddress: AddressShape,
destinationAddress: AddressShape,
secondaryDeliveryAddress: AddressShape,
agents: PropTypes.arrayOf(AgentShape),
primeEstimatedWeight: PropTypes.number,
primeActualWeight: PropTypes.number,
diversion: PropTypes.bool,
counselorRemarks: PropTypes.string,
customerRemarks: PropTypes.string,
status: PropTypes.string,
reweigh: PropTypes.shape({
id: PropTypes.string,
}),
createdAt: PropTypes.string,
approvedDate: PropTypes.string,
}).isRequired,
};

const CreatePaymentRequest = () => {
const { moveCodeOrID } = useParams();

Expand Down Expand Up @@ -198,7 +108,7 @@ const CreatePaymentRequest = () => {
{mtoShipments?.map((mtoShipment) => {
return (
<div key={mtoShipment.id}>
<Shipment shipment={mtoShipment} />
<Shipment shipment={mtoShipment} moveId={moveTaskOrder.id} />
<h2>Shipment Service Items</h2>
{mtoServiceItems?.map((mtoServiceItem, mtoServiceItemIndex) => {
return (
Expand Down
100 changes: 2 additions & 98 deletions src/pages/PrimeUI/MoveTaskOrder/MoveDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,18 @@
import React from 'react';
import { useParams, Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import { shipmentTypeLabels } from '../../../content/shipments';
import { formatDateFromIso } from '../../../shared/formatters';
import Shipment from '../Shipment/Shipment';

import styles from './MoveDetails.module.scss';

import LoadingPlaceholder from 'shared/LoadingPlaceholder';
import SomethingWentWrong from 'shared/SomethingWentWrong';
import SectionWrapper from 'components/Customer/SectionWrapper';
import formStyles from 'styles/form.module.scss';
import { ShipmentOptionsOneOf } from 'types/shipment';
import { AgentShape } from 'types/agent';
import { AddressShape } from 'types/address';
import descriptionListStyles from 'styles/descriptionList.module.scss';
import { usePrimeSimulatorGetMove } from 'hooks/queries';

const Shipment = ({ shipment }) => {
return (
<dl className={descriptionListStyles.descriptionList}>
<div className={classnames(descriptionListStyles.row, styles.shipmentHeader)}>
<h3>{`${shipmentTypeLabels[shipment.shipmentType]} shipment`}</h3>
<Link to={`shipments/${shipment.id}`} className="usa-button usa-button-secondary">
Update Shipment
</Link>
</div>
<div className={descriptionListStyles.row}>
<dt>Status:</dt>
<dd>{shipment.status}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Shipment ID:</dt>
<dd>{shipment.id}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Shipment eTag:</dt>
<dd>{shipment.eTag}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Requested Pickup Date:</dt>
<dd>{shipment.requestedPickupDate}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Actual Pickup Date:</dt>
<dd>{shipment.actualPickupDate}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Estimated Weight:</dt>
<dd>{shipment.primeEstimatedWeight}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Actual Weight:</dt>
<dd>{shipment.primeActualWeight}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Pickup Address:</dt>
<dd>
{shipment.pickupAddress.streetAddress1} {shipment.pickupAddress.streetAddress2} {shipment.pickupAddress.city}{' '}
{shipment.pickupAddress.state} {shipment.pickupAddress.postalCode}
</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Destination Address:</dt>
<dd>
{shipment.destinationAddress.streetAddress1} {shipment.destinationAddress.streetAddress2}{' '}
{shipment.destinationAddress.city} {shipment.destinationAddress.state}{' '}
{shipment.destinationAddress.postalCode}
</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Created at:</dt>
<dd>{formatDateFromIso(shipment.createdAt, 'YYYY-MM-DD')}</dd>
</div>
<div className={descriptionListStyles.row}>
<dt>Approved at:</dt>
<dd>{shipment.approvedDate}</dd>
</div>
</dl>
);
};

Shipment.propTypes = {
shipment: PropTypes.shape({
id: PropTypes.string,
eTag: PropTypes.string,
shipmentType: ShipmentOptionsOneOf,
requestedPickupDate: PropTypes.string,
scheduledPickupDate: PropTypes.string,
actualPickupDate: PropTypes.string,
pickupAddress: AddressShape,
secondaryPickupAddress: AddressShape,
destinationAddress: AddressShape,
secondaryDeliveryAddress: AddressShape,
agents: PropTypes.arrayOf(AgentShape),
primeEstimatedWeight: PropTypes.number,
primeActualWeight: PropTypes.number,
diversion: PropTypes.bool,
counselorRemarks: PropTypes.string,
customerRemarks: PropTypes.string,
status: PropTypes.string,
reweigh: PropTypes.shape({
id: PropTypes.string,
}),
createdAt: PropTypes.string,
approvedDate: PropTypes.string,
}).isRequired,
};

const MoveDetails = () => {
const { moveCodeOrID } = useParams();

Expand Down Expand Up @@ -147,7 +51,7 @@ const MoveDetails = () => {
{mtoShipments?.map((mtoShipment) => {
return (
<div key={mtoShipment.id}>
<Shipment shipment={mtoShipment} />
<Shipment shipment={mtoShipment} moveId={moveTaskOrder.id} />
</div>
);
})}
Expand Down
Loading