Merge branch 'main' into B-21460-Fix-Prime-Sim-Shipment-Create

transcom · Jan 13, 2025 · 92f4d28 · 92f4d28
2 parents 0628a59 + 49931ba
commit 92f4d28
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 54 deletions.
diff --git a/src/components/CustomerHeader/index.module.scss b/src/components/CustomerHeader/index.module.scss
@@ -33,6 +33,9 @@
       display: flex;
       align-items: center;
     }
+    :global(.usa-tag) {
+      line-height: normal;
+    }
   }
   .verticalBar {
     color: $mm-periwinkle;

diff --git a/src/components/Office/DefinitionLists/PPMShipmentInfoList.jsx b/src/components/Office/DefinitionLists/PPMShipmentInfoList.jsx
@@ -238,33 +238,29 @@ const PPMShipmentInfoList = ({
   );
 
   const aoaPacketElement = (
-    <div>
+    <div className={styles.row}>
       <dt>AOA Packet</dt>
       <dd data-testid="aoaPacketDownload">
-        <p className={styles.downloadLink}>
-          <AsyncPacketDownloadLink
-            id={shipment?.ppmShipment?.id}
-            label="Download AOA Paperwork (PDF)"
-            asyncRetrieval={downloadPPMAOAPacket}
-            onFailure={onErrorModalToggle}
-          />
-        </p>
+        <AsyncPacketDownloadLink
+          id={shipment?.ppmShipment?.id}
+          label="Download AOA Paperwork (PDF)"
+          asyncRetrieval={downloadPPMAOAPacket}
+          onFailure={onErrorModalToggle}
+        />
       </dd>
     </div>
   );
 
   const paymentPacketElement = (
-    <div>
+    <div className={styles.row}>
       <dt>Payment Packet</dt>
       <dd data-testid="paymentPacketDownload">
-        <p className={styles.downloadLink}>
-          <AsyncPacketDownloadLink
-            id={shipment?.ppmShipment?.id}
-            label="Download Payment Packet (PDF)"
-            asyncRetrieval={downloadPPMPaymentPacket}
-            onFailure={onErrorModalToggle}
-          />
-        </p>
+        <AsyncPacketDownloadLink
+          id={shipment?.ppmShipment?.id}
+          label="Download Payment Packet (PDF)"
+          asyncRetrieval={downloadPPMPaymentPacket}
+          onFailure={onErrorModalToggle}
+        />
       </dd>
     </div>
   );

diff --git a/src/components/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.jsx b/src/components/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.jsx
@@ -53,13 +53,19 @@ const EvaluationReportShipmentDisplay = ({
             <h5>
               <label id={`shipment-display-label-${shipmentId}`}>{displayInfo.heading}</label>
             </h5>
-            {displayInfo.isDiversion && <Tag>diversion</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">canceled</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && <Tag>diversion requested</Tag>}
-            {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
-              <Tag>cancellation requested</Tag>
-            )}
-            {displayInfo.usesExternalVendor && <Tag>external vendor</Tag>}
+            <div>
+              {displayInfo.isDiversion && <Tag className="usa-tag--diversion">diversion</Tag>}
+              {displayInfo.shipmentStatus === shipmentStatuses.CANCELED && (
+                <Tag className="usa-tag--cancellation">canceled</Tag>
+              )}
+              {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
+                <Tag className="usa-tag--diversion">diversion requested</Tag>
+              )}
+              {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
+                <Tag className="usa-tag--cancellation">cancellation requested</Tag>
+              )}
+              {displayInfo.usesExternalVendor && <Tag>external vendor</Tag>}
+            </div>
           </div>
           <h6 className={styles.headingShipmentID}>Shipment ID: {displayInfo.shipmentLocator}</h6>
           <FontAwesomeIcon className={styles.icon} icon={expandableIconClasses} onClick={handleExpandClick} />

diff --git a/...onents/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.module.scss b/...onents/Office/EvaluationReportShipmentDisplay/EvaluationReportShipmentDisplay.module.scss
@@ -92,14 +92,31 @@
       background-color: $error-light;
     }
 
+    .tagWrapper {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: .5rem;
+    }
+
     .headingTagWrapper {
       display: flex;
       align-items: center;
       flex-grow: 1;
+      flex-wrap: wrap;
+
       h5 {
         @include u-margin-top(0);
         @include u-margin-bottom(0);
       }
+
+      label {
+        @include u-margin-right(1);
+      }
+
+      :global(.usa-tag) {
+        display: inline-block;
+        line-height: normal;
+      }
     }
 
     :global(.usa-checkbox__label) {

diff --git a/src/components/Office/ShipmentDisplay/ShipmentDisplay.jsx b/src/components/Office/ShipmentDisplay/ShipmentDisplay.jsx
@@ -95,23 +95,25 @@ const ShipmentDisplay = ({
                   {displayInfo.heading}
                 </label>
               </h3>
-              <div>
+              <div className={styles.tagWrapper}>
                 {displayInfo.isActualExpenseReimbursement && (
                   <Tag data-testid="actualReimbursementTag">actual expense reimbursement</Tag>
                 )}
-                {displayInfo.isDiversion && <Tag>diversion</Tag>}
+                {displayInfo.isDiversion && <Tag className="usa-tag--diversion">diversion</Tag>}
                 {(displayInfo.shipmentStatus === shipmentStatuses.CANCELED ||
                   displayInfo.status === shipmentStatuses.CANCELED ||
                   displayInfo.ppmShipment?.status === ppmShipmentStatuses.CANCELED) && (
-                  <Tag className="usa-tag--red">canceled</Tag>
+                  <Tag className="usa-tag--cancellation">canceled</Tag>
+                )}
+                {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
+                  <Tag className="usa-tag--diversion">diversion requested</Tag>
                 )}
-                {displayInfo.shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && <Tag>diversion requested</Tag>}
                 {displayInfo.shipmentStatus === shipmentStatuses.CANCELLATION_REQUESTED && (
-                  <Tag>cancellation requested</Tag>
+                  <Tag className="usa-tag--cancellation">cancellation requested</Tag>
                 )}
                 {displayInfo.usesExternalVendor && <Tag>external vendor</Tag>}
                 {displayInfo.ppmShipment?.status && (
-                  <Tag className={styles.ppmStatus} data-testid="ppmStatusTag">
+                  <Tag className="usa-tag--ppmStatus" data-testid="ppmStatusTag">
                     {ppmShipmentStatusLabels[displayInfo.ppmShipment?.status]}
                   </Tag>
                 )}

diff --git a/src/components/Office/ShipmentDisplay/ShipmentDisplay.module.scss b/src/components/Office/ShipmentDisplay/ShipmentDisplay.module.scss
@@ -14,19 +14,21 @@
     @include u-padding(2);
 
     :global(.usa-tag) {
-      @include u-font-size('body', 3xs);
+      font-size: .88rem;
       background-color: $info-light;
-      &.ppmStatus {
-        @include u-font-size('body', 'sm');
-        background-color: $base-lightest;
-      }
     }
 
     :global(.usa-tag--red) {
       @include u-font-size('body', 3xs);
       background-color: $error-light;
     }
 
+    .tagWrapper {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: .5rem;
+    }
+
     .headingTagWrapper {
       display: flex;
       align-items: center;
@@ -103,6 +105,8 @@
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
+    @include u-margin-bottom(.45rem);
+    row-gap: .45rem;
 
     label {
       @include u-margin-right(1);

diff --git a/src/components/Office/ShipmentHeading/ShipmentHeading.jsx b/src/components/Office/ShipmentHeading/ShipmentHeading.jsx
@@ -23,11 +23,13 @@ function ShipmentHeading({ shipmentInfo, handleShowCancellationModal, isMoveLock
       <div className={styles.shipmentHeadingType}>
         <span className={styles.marketCodeIndicator}>{shipmentInfo.marketCode}</span>
         <h2>{shipmentInfo.shipmentType}</h2>
-        {shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--red">canceled</Tag>}
-        {shipmentInfo.isDiversion && <Tag>diversion</Tag>}
-        {!shipmentInfo.isDiversion && shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
-          <Tag>diversion requested</Tag>
-        )}
+        <div>
+          {shipmentStatus === shipmentStatuses.CANCELED && <Tag className="usa-tag--cancellation">canceled</Tag>}
+          {shipmentInfo.isDiversion && <Tag className="usa-tag--diversion">diversion</Tag>}
+          {!shipmentInfo.isDiversion && shipmentStatus === shipmentStatuses.DIVERSION_REQUESTED && (
+            <Tag className="usa-tag--diversion">diversion requested</Tag>
+          )}
+        </div>
       </div>
       <div>
         <h4>#{shipmentInfo.shipmentLocator}</h4>
@@ -48,7 +50,7 @@ function ShipmentHeading({ shipmentInfo, handleShowCancellationModal, isMoveLock
             </Restricted>
           </Restricted>
         )}
-        {isCancellationRequested && <Tag>Cancellation Requested</Tag>}
+        {isCancellationRequested && <Tag className="usa-tag--cancellation">Cancellation Requested</Tag>}
       </div>
     </div>
   );

diff --git a/src/components/Office/ShipmentHeading/shipmentHeading.module.scss b/src/components/Office/ShipmentHeading/shipmentHeading.module.scss
@@ -46,13 +46,6 @@
       padding: 2px 8px;
       font-size: 13px;
     }
-
-    span {
-      background-color: $base-dark;
-      text-transform: uppercase;
-      border-radius: 2px;
-      color: #ffffff;
-    }
   }
 
   .marketCodeIndicator {

diff --git a/src/components/Office/ShipmentSITDisplay/ShipmentSITDisplay.jsx b/src/components/Office/ShipmentSITDisplay/ShipmentSITDisplay.jsx
@@ -162,8 +162,11 @@ const SitStatusTables = ({ shipment, sitExtensions, sitStatus, openModalButton,
   return (
     <>
       <div className={styles.title}>
-        <p>SIT (STORAGE IN TRANSIT){pendingSITExtension && <Tag>SIT EXTENSION REQUESTED</Tag>}</p>
-        {!pendingSITExtension && isConvertedToCustomerExpense && <Tag>Converted To Customer Expense</Tag>}
+        <p>
+          SIT (STORAGE IN TRANSIT){pendingSITExtension && <Tag>SIT EXTENSION REQUESTED</Tag>}
+          {!pendingSITExtension && isConvertedToCustomerExpense && <Tag>Converted To Customer Expense</Tag>}
+        </p>
+
         {sitStatus.currentSIT &&
           !pendingSITExtension &&
           showConvertToCustomerExpense &&

diff --git a/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx b/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx
@@ -757,7 +757,7 @@ const ServicesCounselingMoveDetails = ({
                 </div>
               )}
             </Grid>
-            <Grid row col={12}>
+            <Grid row col={12} className={scMoveDetailsStyles.scFinancialReviewWrapper}>
               <Restricted to={permissionTypes.updateFinancialReviewFlag}>
                 <div className={scMoveDetailsStyles.scFinancialReviewContainer}>
                   <FinancialReviewButton

diff --git a/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.module.scss b/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.module.scss
@@ -25,9 +25,12 @@
     }
   }
 
+  .scFinancialReviewWrapper {
+    justify-content: end;
+  }
+
   .scFinancialReviewContainer {
     @include u-margin-top(1);
-    padding-left: 720px;
   }
 
   .scCancelMoveContainer {

diff --git a/src/shared/AsyncPacketDownloadLink/AsyncPacketDownloadLink.module.scss b/src/shared/AsyncPacketDownloadLink/AsyncPacketDownloadLink.module.scss
@@ -10,7 +10,8 @@
   @include u-padding(0);
   border-width: 0px;
   outline: none !important;
-  height: 30px !important;
+  height: auto !important;
+  text-align: left;
 }
 
 :global(.usa-button).downloadButtonToLink:hover {

diff --git a/src/shared/styles/_overrides.scss b/src/shared/styles/_overrides.scss
@@ -139,6 +139,7 @@
   color: $base-darkest;
   @include u-text('normal');
   vertical-align: middle;
+  border-radius: 2em;
   &--green {
     background-color: $success-light;
   }
@@ -191,6 +192,15 @@
     padding-top: 0px;
     height: 23px;
   }
+  &--ppmStatus {
+    background-color: $color-light-green !important;
+  }
+  &--diversion {
+    background-color: $color-gold !important;
+  }
+  &--cancellation {
+    background-color: $error-light !important;
+  }
 }
 
 //Alerts

diff --git a/src/shared/styles/colors.scss b/src/shared/styles/colors.scss
@@ -62,6 +62,7 @@ $color-gray-light: #b2b2b2;
 $color-red: #cd3504;
 $color-blue: #005ea2;
 $color-blue-focus: #2491ff;
+$color-light-green: lightgreen;
 
 // border color
 $border-color: #dcdee0;