#32031597 A4A > Checkout: Implement referrals logo end-to-end flow

Part of https://linear.app/a8c/issue/A4A-2122/implement-preview-referral-email

This PR is built on top of #108715

Proposed Changes

Logo choices

• Added a third option: “Send without logo” (in addition to “Use profile logo” and “Use a different logo”).
• Label is now “Your logo (Optional)”.
• Default selection: profile logo if set, otherwise the last-used referral logo (“different”), otherwise “Send without logo”.

Referral logo → parent

• ReferralLogo now reports the current choice via onChange({ option, logoUrl, file }) so the parent always has option, URL (when “different”), and file (when a new file is chosen).
• When “Use a different logo” is selected, the upload area shows the last-used referral logo (agency_referrals_logo) if no new file is selected yet.

Send / Copy referral link

• Profile: sends the profile logo (no upload).
• Different + new file: uploads the file (or reuses the last upload if the same file is used), then sends that logo URL; after success, updates agency_referrals_logo so it’s pre-filled next time.
• Different + no new file: uses the existing agency_referrals_logo URL (no upload).
• None: sends no logo.
• Send and Copy are disabled when “Use a different logo” is selected, but no logo is set (no file and no existing referral logo).
• Buttons show a loading state while a logo is being uploaded.

API and state

• Request client payment mutation now sends logo: { type: ‘profile’ | ‘custom’ | ‘none’, url?: string } in the request body.
• New Redux action updateAgencyReferralsLogo( logoUrl ) and agency type field agency_referrals_logo to store the last-used custom referral logo.

Logo upload UI and rules

• Max file size for referral logos increased from 5 MB to 10 MB.
• Upload placeholder is 250px wide with 800×320 aspect ratio.
• Checkout profile logo preview and logo upload area in the referral section use the same 250×100px size.

Why are these changes being made?

• Agencies can now clearly choose between using their profile logo, a one‑off custom logo, or no logo at all, and that choice is consistently applied to both “Send” and “Copy referral link” flows via an explicit logo payload.
• The logo picker now shows what will actually be used (last custom referral logo or new upload), prevents sending when “Use a different logo” is selected but no logo is set, and shows proper loading states while uploads happen.
• The logo upload and previews now match the actual 800×320 aspect ratio, so what you see in the UI matches what clients see in emails/checkout.
• Increasing the limit to 10 MB avoids unnecessary rejections for typical agency logo assets while keeping validation and constraints in place.
• Storing agency_referrals_logo lets agencies maintain a dedicated, reusable logo for referrals without having to re-upload it each time or change their global profile branding.

Testing Instructions

Note: The product logos on the email won’t be shown now.

• Patch 204479-ghe-Automattic/wpcom

• Open the A4A live link

• Go to Marketplace > Toggle the referral mode > Add some products (try the yearly billing type + add Jetpack backup add-ons) > Go to checkout > Verify you can now see the logo upload as an option field and there are now 3 options to choose from

• Use profile logo. Visible only if the company logo is updated in the Partner Directory

• Use a different logo for this referral.

• Send without logo

• Choose “Use profile logo” > Send a referral > Verify the email you receive is updated as per the new design > On the Referrals dashboard > Open the client details > Resend the email > Verify you receive the email as expected.

• Send another Referral by using “Use a different logo for this referral” option > The CTAs to send a referral should be disabled if there are no image uploade. Upload an image (800×320 aspect ratio) > Verify the image is shown on the UI, and you can also replace it with another image. Send the referral > Verify the updated logo is shown in the email.

• Go to Checkout with some referral products again > Select the “Use a different logo for this referral” option > Verify the previously uploaded logo is shown here. Refresh the page > Select the “Use a different logo for this referral” option > Verify the previously uploaded logo is shown here.

• On the Referrals dashboard > Open the client details > Resend the email > Verify you receive the email as expected.

• Send another Referral by using the “Send without logo” option > The CTAs to send a referral should not be disabled > Send the referral > Verify no logo is shown in the email

Email with logo:

Email without logo:

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?