PC-112: Fix and rename PcLogoUploader.jsx; resolve bug causing incorrect logo display

vb-cmd · vb-cmd · commit b9f51c22972e · 2025-04-23T15:49:41.000+03:00
diff --git a/app/assets/stylesheets/application/customer_form.scss b/app/assets/stylesheets/application/customer_form.scss
@@ -5,7 +5,7 @@
 
 .image-placeholder {
   max-width: 136px;
-  max-height: 117px;
+  width: 136px;
 
   label:hover {
     cursor: pointer;
@@ -19,3 +19,9 @@
 .title-input {
   max-width: 241px;
 }
+
+@media (max-width: 575px) {
+  .title-input {
+    max-width: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/application/input.scss b/app/assets/stylesheets/application/input.scss
@@ -61,6 +61,10 @@ textarea {
   padding: 0;
 }
 
+.rbt-input-hint {
+  color: transparent;
+}
+
 /**
  *** TYPEAHEAD CUSTOM STYLES ***
  **/
diff --git a/app/javascript/components/services/fetchService.js b/app/javascript/components/services/fetchService.js
@@ -14,11 +14,20 @@ export const fetchAuthentication = {
 export const fetchCustomers = {
   index: () => get(ENDPOINTS.CUSTOMERS),
   upsert: (data) => post(ENDPOINTS.CUSTOMERS_UPSERT, data),
-  upsertUseFormData: (customer) => {
+  upsertUseFormData: async (customer) => {
     const formData = new FormData()
     const { first_name, last_name } = extractNames(customer.full_name)
 
-    if (customer.logo_file) formData.append('customer[logo]', customer.logo_file)
+    if (customer.logo_url) {
+      const response = await fetch(customer.logo_url)
+
+      if (response.ok) {
+        const blob = await response.blob()
+        formData.append('customer[logo]', blob)
+      } else {
+        throw new Error('Failed to fetch logo')
+      }
+    }
     formData.append('customer[company_name]', customer.company_name)
     formData.append('customer[first_name]', first_name)
     formData.append('customer[last_name]', last_name)
diff --git a/app/javascript/components/shared/CustomerForm.jsx b/app/javascript/components/shared/CustomerForm.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Row, Col, Form, Button } from 'react-bootstrap'
-import { PcDropdownSelect, PcCompanyLogoUploader, PcInput } from '../ui'
+import { PcDropdownSelect, PcLogoUploader, PcInput } from '../ui'
 import { EMPTY_ENTITIES, INPUT_VALIDATORS, ROUTES, STEPS } from './constants'
 import { fetchCustomers, fetchQuotes } from '../services'
 import { useAppHooks } from '../hooks'
@@ -29,32 +29,35 @@ export const CustomerForm = () => {
     customers.find((c) => c.attributes.company_name.toLowerCase() === customer.company_name.toLowerCase())?.id ||
     customer.company_name
 
-  const handleCompanyChange = (e) => {
-    const { value } = e.target
+  const handleCompanyChange = (selected) => {
+    console.info('handleCompanyChange', selected)
+    if(selected.length === 0) return
+
+    const { value, label } = selected[0]
     const selectedCustomer = customers.find((customer) => customer.id === value)
 
     if (selectedCustomer) {
       setCustomer(selectedCustomer.attributes)
     } else {
-      setCustomer({
-        ...EMPTY_ENTITIES.customer,
-        company_name: value,
-      })
+      setCustomer(prev => ({ ...prev, company_name: label }))
     }
 
+    setIsNextDisabled(false)
     setErrors((prev) => ({ ...prev, company_name: '' }))
   }
 
-  const handleCompanyInputChange = (e) => {
-    const { value } = e.target
+  const handleCompanyInputChange = (text, event) => {
+    console.info('handleCompanyInputChange', text, event)
 
-    if (value) {
+    if (text) {
       setIsNextDisabled(false)
       setErrors((prev) => ({ ...prev, company_name: '' }))
     } else {
       setIsNextDisabled(true)
       setErrors((prev) => ({ ...prev, company_name: 'Company name is required' }))
     }
+
+    setCustomer((prev) => ({ ...prev, company_name: text }))
   }
 
   const handleInputChange = (e) => {
@@ -70,7 +73,7 @@ export const CustomerForm = () => {
   const handleEmailChange = (e) => {
     const { value } = e.target
 
-    if (value && !INPUT_VALIDATORS.email.test(value)) {
+    if (value && !INPUT_VALIDATORS.emailFormat.test(value)) {
       setIsNextDisabled(true)
       setErrors((prev) => ({ ...prev, email: 'Invalid email format' }))
     } else {
@@ -95,6 +98,7 @@ export const CustomerForm = () => {
     const file = e.target.files[0]
 
     if (!file) {
+      setIsNextDisabled(false)
       setErrors((prev) => ({ ...prev, logo: '' }))
       return
     }
@@ -105,7 +109,7 @@ export const CustomerForm = () => {
       logoErrors.push('Logo must be less than 2MB')
     }
 
-    if (!INPUT_VALIDATORS.fileType.includes(file.type)) {
+    if (!INPUT_VALIDATORS.allowedFileTypes.includes(file.type)) {
       logoErrors.push('Logo must be a JPEG or PNG file')
     }
 
@@ -114,12 +118,7 @@ export const CustomerForm = () => {
       setErrors((prev) => ({ ...prev, logo: logoErrors.join('\n') }))
     } else {
       setIsNextDisabled(false)
-      setCustomer((prev) => ({
-        ...prev,
-        logo_file: file,
-        logo_url: URL.createObjectURL(file),
-      }))
-
+      setCustomer((prev) => ({ ...prev, logo_url: URL.createObjectURL(file), }))
       setErrors((prev) => ({ ...prev, logo: '' }))
     }
   }
@@ -159,11 +158,11 @@ export const CustomerForm = () => {
       <div className="border rounded border-primary customer-form bg-light w-100 mb-7">
         <Row className="mb-6">
           <div className="d-flex flex-column flex-sm-row gap-6">
-            <Col className={'image-placeholder'}>
-              <PcCompanyLogoUploader
+            <Col className={'image-placeholder mx-auto'}>
+              <PcLogoUploader
                 id="company_logo"
                 onChange={handleLogoChange}
-                accept={INPUT_VALIDATORS.fileType.join(',')}
+                accept={INPUT_VALIDATORS.allowedFileTypes.join(',')}
                 logo={customer.logo_url}
                 error={errors.logo} />
             </Col>
@@ -255,7 +254,9 @@ export const CustomerForm = () => {
           </Col>
         </Row>
       </div>
-      <Button type={'submit'} className="pc-btn-next" disabled={isNextDisabled}>
+      <Button type={'submit'}
+              className="pc-btn-next mb-3"
+              disabled={isNextDisabled}>
         Next
       </Button>
     </Form>
diff --git a/app/javascript/components/shared/constants.js b/app/javascript/components/shared/constants.js
@@ -52,15 +52,14 @@ export const EMPTY_ENTITIES = {
     position: '',
     address: '',
     notes: '',
-    logo_file: null,
     logo_url: null,
   }
   // future empty entities can be added here
 }
 
 export const INPUT_VALIDATORS = {
-  email:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  emailFormat:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,
   maxSizeFile: 2 * 1024 * 1024,
-  fileType: ['image/jpeg', 'image/png'],
-  // future validation messages can be added here
+  allowedFileTypes: ['image/jpeg', 'image/png'],
+  // future validation rules can be added here
 }
diff --git a/app/javascript/components/ui/PcDropdownSelect.jsx b/app/javascript/components/ui/PcDropdownSelect.jsx
@@ -7,41 +7,19 @@ export const PcDropdownSelect = ({
                                    id,
                                    options,
                                    placeholder,
-                                   onChange,
-                                   onInputChange,
                                    height,
                                    value,
                                    label,
                                    error,
                                    maxResults = 5,
                                    hasIcon = false,
+                                   ...props
                                  }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [inputValue, setInputValue] = useState('')
 
   const selectedOption =
     options.find((opt) => opt.value === value) || (value ? { value, label: value, customOption: true } : null)
 
-  const hasMatchingOption = () => {
-    const normalizedInput = normalizeName(inputValue)
-    return options.some((option) => normalizeName(option.label) === normalizedInput)
-  }
-
-  const handleChange = (selected) => {
-    if (selected.length > 0) {
-      const selectedOption = selected[0]
-      const valueToPass = selectedOption.customOption ? selectedOption.label : selectedOption.value
-      onChange({ target: { id, value: valueToPass } })
-    } else {
-      onChange({ target: { id, value: '' } })
-    }
-  }
-
-  const handleInputChange = (text, event) => {
-    setInputValue(text)
-    if (onInputChange) onInputChange(event)
-  }
-
   const handleFilterBy = (option, props) => {
     const inputValue = normalizeName(props.text)
     return normalizeName(option.label).includes(inputValue)
@@ -53,17 +31,16 @@ export const PcDropdownSelect = ({
         id={id}
         options={options}
         placeholder={placeholder}
-        onChange={handleChange}
-        onInputChange={handleInputChange}
         filterBy={handleFilterBy}
-        allowNew={!hasMatchingOption()}
+        allowNew={false}
         newSelectionPrefix="Add new customer: "
         className={`${hasIcon ? isMenuOpen ? 'pc-typeahead-arrow-up' : 'pc-typeahead-arrow-down' : ''} border border-primary rounded-1`}
         style={{ height }}
         selected={selectedOption ? [selectedOption] : []}
         maxResults={maxResults}
         paginate={false}
         onMenuToggle={(isOpen) => setIsMenuOpen(isOpen)}
+        {...props}
       />
       <Form.Label className="border-label fw-bold fs-11 lh-sm px-1">{label}</Form.Label>
       {error && <div className="text-danger fs-12">{error}</div>}
diff --git a/app/javascript/components/ui/PcLogoUploader.jsx b/app/javascript/components/ui/PcLogoUploader.jsx
@@ -2,16 +2,16 @@ import React from 'react'
 import { PcIcon } from './PcIcon'
 import { Form } from 'react-bootstrap'
 
-export const PcCompanyLogoUploader = ({ id, logo, error, ...props }) => {
+export const PcLogoUploader = ({ id, logo, error, ...props }) => {
   const logoDisplay = logo ?
-    <img src={logo}
-         alt="Company Logo"
+    <img src={logo} alt="Logo"
          className={'object-fit-contain w-100 h-100'} />
     : <PcIcon name="placeholder" alt="Placeholder Logo" />
 
-  return <Form.Group className="d-flex flex-column w-100 h-100">
+  return <Form.Group className="d-flex flex-column">
     <Form.Label htmlFor={id}
                 className={'m-0 d-flex justify-content-center align-items-center h-100 w-100 bg-white border rounded border-primary p-1'}
+                style={{ flexBasis: '117px', maxHeight: '117px' }}
                 column={'sm'}>
       {logoDisplay}
     </Form.Label>
diff --git a/app/javascript/components/ui/index.js b/app/javascript/components/ui/index.js
@@ -3,4 +3,4 @@ export * from './PcStepIndicator'
 export * from './PcIcon'
 export * from './PcInput'
 export * from './PcDropdownSelect'
-export * from './PcCompanyLogoUploader'
+export * from './PcLogoUploader'

Original file line number	Diff line number	Diff line change
`@@ -52,15 +52,14 @@ export const EMPTY_ENTITIES = {`
`52`	`52`	`position: '',`
`53`	`53`	`address: '',`
`54`	`54`	`notes: '',`
`55`		`- logo_file: null,`
`56`	`55`	`logo_url: null,`
`57`	`56`	`}`
`58`	`57`	`// future empty entities can be added here`
`59`	`58`	`}`
`60`	`59`
`61`	`60`	`export const INPUT_VALIDATORS = {`
`62`		`- email:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,`
	`61`	`+ emailFormat:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,`
`63`	`62`	`maxSizeFile: 2 * 1024 * 1024,`
`64`		`- fileType: ['image/jpeg', 'image/png'],`
`65`		`- // future validation messages can be added here`
	`63`	`+ allowedFileTypes: ['image/jpeg', 'image/png'],`
	`64`	`+ // future validation rules can be added here`
`66`	`65`	`}`