Skip to content

Diya fix(ui): Fixed Owner Message Popup on Image Upload#5252

Open
DiyaWadhwani wants to merge 2 commits into
developmentfrom
Diya_Fix_OwnerMessageImages
Open

Diya fix(ui): Fixed Owner Message Popup on Image Upload#5252
DiyaWadhwani wants to merge 2 commits into
developmentfrom
Diya_Fix_OwnerMessageImages

Conversation

@DiyaWadhwani
Copy link
Copy Markdown
Contributor

Description

Fixes two UX issues with the Owner Message image upload flow:

  1. After uploading an image, the raw base64 string was displayed in the textarea — replaced with a friendly confirmation message instead
  2. After saving an image message and reopening the edit modal, the state was blank (fresh view) instead of showing the image-selected state — caused by getMessage() not being called after a successful save, leaving Redux state empty

Fixes: Owner Message modal shows raw base64 in textarea and resets to fresh view on reopen after saving image

Related PRs:

Follow-up to PRs #4769 and #5169.

Main changes explained:

  • Updated src/components/OwnerMessage/OwnerMessage.jsx to display a friendly confirmation string in the textarea when an image is selected instead of the raw base64 string
  • Updated src/components/OwnerMessage/OwnerMessage.jsx to add a "Remove image" button allowing the user to clear the selected image and return to the upload form
  • Updated src/components/OwnerMessage/OwnerMessage.jsx to call getMessage() after a successful save so Redux state is refreshed and reopening the modal correctly shows the image-selected state

How to test:

  1. Check out current branch
  2. Run npm install --force and npm run start:local
  3. Clear site data/cache
  4. Log in as Owner or a user with editHeaderMessage permission
  5. Click the edit icon on the owner message in the header
  6. Upload a valid .png, .jpg, or .jpeg image
  7. Verify the textarea shows ✓ Image selected — click Update/Create to save instead of a base64 string
  8. Verify the upload section (label, size note, file input) disappears
  9. Verify a "Remove image" button appears — click it and confirm you return to the fresh upload view
  10. Upload an image again and click Create/Update
  11. Reopen the modal by clicking the edit icon again
  12. Verify the modal shows the image-selected state (not a fresh upload form)

Note:

The root cause of the reopen issue was that getMessage() was never called after saving, so ownerMessage in Redux remained empty until page refresh. The textarea confirmation message is display-only — the actual base64 is still stored in message state and saved correctly.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 9, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit d11e956
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69fe79ef3905860008e02216
😎 Deploy Preview https://deploy-preview-5252--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 9, 2026

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant