Merge branch 'main' into 93-pass-the-service-name

Author: alishaevn

src/components/AdditionalInfo/AdditionalInfo.jsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types'
 import {
   Card, CloseButton, Form, ListGroup,
 } from 'react-bootstrap'
-import { convertToBase64, apiV2CompatibleStrings } from '../../resources/utilityFunctions'
+import { addDays, apiV2CompatibleStrings, convertToBase64 } from '../../resources/utilityFunctions'
 
 const AdditionalInfo = ({ updateRequestForm }) => {
   const [showProposalDate, setShowProposalDate] = useState(true)
   const [files, setFiles] = useState([])
-  const today = new Date().toISOString().slice(0, 10)
   const fileRef = useRef(null)
+  const oneWeekFromNow = addDays((new Date()), 7).toISOString().slice(0, 10)
+  const oneDayFromNow = addDays((new Date()), 1).toISOString().slice(0, 10)
 
   const handleChange = (value) => {
     updateRequestForm(value, 'proposedDeadline')
@@ -52,7 +53,8 @@ const AdditionalInfo = ({ updateRequestForm }) => {
               <Form.Control
                 className='prevent-validation-styles'
                 type='date'
-                min={today}
+                min={oneDayFromNow}
+                defaultValue={oneWeekFromNow}
                 placeholder='Proposals Required By'
                 disabled={showProposalDate === false}
                 onChange={showProposalDate && ((e) => handleChange(e.target.value))}

src/compounds/Item/Item.jsx

@@ -34,7 +34,7 @@ const Item = ({ buttonLink, buttonProps, href, fromItemGroup, isLoading, item, o
         <div className='row g-0 h-100'>
           <div className='col-3'>
             <Image
-              className={orientation === 'horizontal' ? 'img-fluid h-100 rounded-start cover-horizontal' : 'card-img-top'}
+              className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
               src={src}
               alt={alt}
             />
@@ -55,7 +55,7 @@ const Item = ({ buttonLink, buttonProps, href, fromItemGroup, isLoading, item, o
       ) : (
         <>
           <Image
-            className={orientation === 'horizontal' ? 'img-fluid h-100 rounded-start cover' : 'card-img-top'}
+            className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
             src={src}
             alt={alt}
           />

src/compounds/Item/item.scss

@@ -2,12 +2,13 @@
   white-space: nowrap;
 }
 
-.cover-horizontal {
+.cover {
   object-fit: cover;
   height: 200px;
   width: 100%;
 }
 
 .link-hover:hover {
   opacity: .8;
-}
+}
+

src/compounds/ItemPage/ItemPage.jsx

@@ -1,21 +1,27 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Button, Row, Col } from 'react-bootstrap'
 import Image from '../../components/Image/Image'
 import TextBox from '../../components/TextBox/TextBox'
 import Title from '../../components/Title/Title'
-import './item-page.css'
 
 const ItemPage = ({ title, titleStyle, description, descriptionStyle, img }) => {
   // sets a default width while still allowing width to be overridden
   img = { width: 400, ...img }
 
   return (
-    <main className='container item-page'>
-      <Title title={title} style={titleStyle} />
-      <div className='item-page-details'>
-        <TextBox text={description} style={descriptionStyle} size='medium' />
-        <Image {...img} />
-      </div>
+    <main className='container py-5'>
+      <Title title={title} style={titleStyle}/>
+      <Row className='mt-3'>
+        <Col xs={12} md={6} className='d-flex flex-column'>
+          <TextBox text={description} style={descriptionStyle} size='medium' />
+          {/* TODO(summer-cook): Update this button's href so it is pointing at the item's form instead of blank request form */}
+          <Button href='/requests/new' className='align-self-start mt-4'>Initiate Request</Button>
+        </Col>
+        <Col xs={12} md={6} className='mt-4 mt-md-0 me-md-auto d-flex justify-content-start justify-content-md-end'>
+          <Image {...img} />
+        </Col>
+      </Row>
     </main>
   )
 }

src/compounds/ItemPage/item-page.css

@@ -9,3 +9,9 @@ export const convertToBase64 = (fileArray) => fileArray.map((file) => new Promis
   fileReader.onload = () => resolve(fileReader.result)
   fileReader.onerror = (error) => reject(new Error(error))
 }))
+
+// used to add days to a new Date() in the AdditionalInfo component
+export const addDays = (date, days) => {
+  date.setDate(date.getDate() + days)
+  return date
+}