make the background color for the "shipping details" and "additional info" form headers, dynamic

Author: alishaevn

src/components/AdditionalInfo/AdditionalInfo.jsx

@@ -5,7 +5,7 @@ import {
 } from 'react-bootstrap'
 import { addDays, apiV2CompatibleStrings, convertToBase64 } from '../../resources/utilityFunctions'
 
-const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
+const AdditionalInfo = ({ backgroundColor, defaultRequiredDate, updateRequestForm }) => {
   const [showProposalDate, setShowProposalDate] = useState(true)
   const [files, setFiles] = useState([])
   const fileRef = useRef(null)
@@ -40,7 +40,7 @@ const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
 
   return (
     <Card className='mb-4'>
-      <Card.Header className='h3'>Additional Information</Card.Header>
+      <Card.Header className={`h3 bg-${backgroundColor}`}>Additional Information</Card.Header>
       <Card.Body>
         {showProposalDate
           && (
@@ -108,7 +108,12 @@ const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
 }
 
 AdditionalInfo.propTypes = {
+  backgroundColor: PropTypes.string,
   updateRequestForm: PropTypes.func.isRequired,
 }
 
+AdditionalInfo.defaultProps = {
+  backgroundColor: 'light',
+}
+
 export default AdditionalInfo

src/components/AdditionalInfo/AdditionalInfo.stories.jsx

@@ -10,5 +10,6 @@ const Template = (args) => <AdditionalInfo {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
+  backgroundColor: 'light',
   updateRequestForm: (requestForm) => console.log({ requestForm }),
 }

src/components/ShippingDetails/ShippingDetails.jsx

@@ -118,12 +118,12 @@ const AddressForm = ({ addressType, billingCountry, shippingCountry, setShowBill
   )
 }
 
-const ShippingDetails = ({ billingCountry, shippingCountry, updateRequestForm }) => {
+const ShippingDetails = ({ backgroundColor, billingCountry, shippingCountry, updateRequestForm }) => {
   const [showBilling, setShowBilling] = useState(true)
 
   return (
     <Card className='mb-4'>
-      <Card.Header className='h3'>Shipping Details</Card.Header>
+      <Card.Header className={`h3 bg-${backgroundColor}`}>Shipping Details</Card.Header>
       <AddressForm
         addressType='shipping'
         billingCountry={billingCountry}
@@ -154,11 +154,16 @@ AddressForm.propTypes = {
 }
 
 ShippingDetails.propTypes = {
+  backgroundColor: PropTypes.string,
   billingCountry: PropTypes.string.isRequired,
   shippingCountry: PropTypes.string.isRequired,
   updateRequestForm: PropTypes.func.isRequired,
 }
 
+ShippingDetails.defaultProps = {
+  backgroundColor: 'light',
+}
+
 AddressForm.defaultProps = {
   showBilling: false,
   setShowBilling: () => {},

src/components/ShippingDetails/ShippingDetails.stories.jsx

@@ -10,6 +10,7 @@ const Template = (args) => <ShippingDetails {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
+  backgroundColor: 'light',
   billingCountry: 'USA',
   shippingCountry: 'USA',
   updateRequestForm: (requestForm) => console.log({ requestForm }),