2027 new design payment drawer

[vakac995]

Closes #2027

Motivation and context

Because requested here: #2027 (#2027)

I believe described here: #2027 (#2027)

By implementing requested changes from here: #2027 (#2027)

https://www.figma.com/design/MmvFKzUv6yE5U2wrOpWtwS/Podkrepi.bg?node-id=26830-46795&t=s1fFOpTTQPyWlov9-0

Screenshots:

Before	After
Paste screenshot	Paste screenshot
I do not have from before

I do not have from before| I do not have from before| I do not have from before| I do not have from before| I do not have from before| I do not have from before|

campaigns/[slug]
campaigns/[slug]/share

Testing

Steps to test

Please check requested changes from here #2027 (#2027) and validate all is implemented

Affected urls

campaigns/[slug]
campaigns/[slug]/share

I did manual E2E tests

campaigns/[slug]
campaigns/[slug]/share

campaigns/[slug] - No longer shows Inline Donation but Payment Drawer

Environment

New environment variables:

• NEW_ENV_VAR: env var details

New or updated dependencies:

Dependency name	Previous version	Updated version	Details
dependency/name	v1.0.0	v2.0.0

[github-actions]

❌ Not all tests have run for this PR. Please add the run tests label to trigger them.

[Copilot]

Pull request overview

This PR implements a redesigned payment drawer for campaign pages per issue #2027. The redesign provides a modern, mobile-first interface with two states: collapsed (minimal info with progress indicator) and expanded (full details with donations/wishes tabs and sharing).

Changes:

• Replaced InlineDonation component with new PaymentDrawer component featuring collapsed/expanded states for mobile and always-visible sidebar for desktop
• Added new /campaigns/[slug]/share page with social media sharing functionality (Facebook, LinkedIn, Instagram, Email)
• Extended API endpoints to support sorting donations by date or amount
• Updated theme with new color variants, shadows, and gradients for the drawer design

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/components/client/campaigns/PaymentDrawer/*	Complete redesign of donation interface with mobile/desktop variants, tabs, progress visualization, and integrated sharing
src/pages/campaigns/[slug]/share.tsx	New dedicated share page with social media integration
src/components/client/campaigns/ViewCampaignPage.tsx	Replaced InlineDonation with PaymentDrawer component
src/service/apiEndpoints.ts	Added sortBy and sortOrder parameters to donations API endpoint
src/common/theme.ts & src/types/theme.d.ts	Extended theme with accent colors, yellow variants, custom shadows, and gradients
src/common/routes.ts	Added share route for campaigns
public/locales/{en,bg}/*.json	Added translations for new drawer, tabs, sharing, and error messages
e2e/tests/regression/campaign-flow/campaign-view.spec.ts	Updated tests with proper await syntax for new drawer selectors
e2e/pages/web-pages/campaigns/campaigns.page.ts	Updated page object selectors to use PaymentDrawer instead of InlineDonation

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The copyToClipboard function from useCopyToClipboard returns void, not a Promise. Using await and try-catch here won't work as expected. The function already handles success/failure internally through state management.

Replace this implementation with:

const copyLink = useCallback(() => {
  copyToClipboard(campaignUrl)
  AlertStore.show(
    t('alerts.link-copied', { ns: 'common', defaultValue: 'Link copied successfully!' }),
    'success',
  )
}, [campaignUrl, copyToClipboard, t])

Or if you need error handling, use the status from the hook:

const [copyStatus, copyToClipboard] = useCopyToClipboard(1000)

useEffect(() => {
  if (copyStatus === 'copied') {
    AlertStore.show(t('alerts.link-copied', { ns: 'common' }), 'success')
  } else if (copyStatus === 'failed') {
    AlertStore.show(t('alerts.copy-failed', { ns: 'common' }), 'error')
  }
}, [copyStatus, t])

Suggested change

	const copyLink = useCallback(async () => {
	try {
	await copyToClipboard(campaignUrl)
	AlertStore.show(
	t('alerts.link-copied', { ns: 'common', defaultValue: 'Link copied successfully!' }),
	'success',
	)
	} catch {
	AlertStore.show(
	t('alerts.copy-failed', { ns: 'common', defaultValue: 'Copy failed. Please try again.' }),
	'error',
	)
	}
	const copyLink = useCallback(() => {
	copyToClipboard(campaignUrl)
	AlertStore.show(
	t('alerts.link-copied', { ns: 'common', defaultValue: 'Link copied successfully!' }),
	'success',
	)

[Copilot]

The collapsed bottom bar relies solely on touch gestures (swipe up) to expand, which is not keyboard accessible. While the "Дарения" button inside can open the drawer, the swipe handle itself should be keyboard accessible for users who cannot use touch.

Consider wrapping the swipe handle in a button or adding keyboard event handlers:

<Box
  className={classes.swipeHandle}
  role="button"
  tabIndex={0}
  onClick={openDrawer}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      openDrawer()
    }
  }}
  aria-label={t('cta.expand-drawer', { defaultValue: 'Expand payment drawer' })}
/>

Alternatively, ensure the "Дарения" button is properly positioned as the first focusable element in the drawer for keyboard users.

Suggested change

	<Box className={classes.swipeHandle} aria-hidden="true" />
	<Box
	className={classes.swipeHandle}
	role="button"
	tabIndex={0}
	onClick={openDrawer}
	onKeyDown={(e) => {
	if (e.key === 'Enter' || e.key === ' ') {
	e.preventDefault()
	openDrawer()
	}
	}}
	aria-label={t('cta.expand-drawer', { defaultValue: 'Expand payment drawer' })}
	/>

[Copilot]

The tab elements use Typography components with onClick, which are not keyboard accessible. Users navigating with keyboards cannot activate these tabs using Enter or Space keys, and screen readers won't announce them as interactive elements.

Replace Typography with Button or add proper accessibility attributes:

<Button
  className={`${classes.desktopTab} ${
    activeTab === 'donors' ? classes.desktopTabSelected : ''
  }`}
  onClick={() => handleTabChange('donors')}
  role="tab"
  aria-selected={activeTab === 'donors'}
  aria-controls="summary-donors-wrapper"
  data-testid="summary-donors">
  {t('cta.donations')}
</Button>

Also wrap the tabs in a proper role="tablist" container. The same issue exists in MobilePaymentDrawer.tsx lines 195-208.

Suggested change

	<Box className={classes.desktopTabsWrapper}>
	<Typography
	className={`${classes.desktopTab} ${
	activeTab === 'donors' ? classes.desktopTabSelected : ''
	}`}
	onClick={() => handleTabChange('donors')}
	data-testid="summary-donors">
	{t('cta.donations')}
	</Typography>
	<Typography
	className={`${classes.desktopTab} ${
	activeTab === 'wishes' ? classes.desktopTabSelected : ''
	}`}
	onClick={() => handleTabChange('wishes')}
	data-testid="summary-wishes">
	{t('campaign.wishes')}
	</Typography>
	</Box>
	{/* Content */}
	<Box
	className={classes.contentSection}
	<Box className={classes.desktopTabsWrapper} role="tablist">
	<Button
	className={`${classes.desktopTab} ${
	activeTab === 'donors' ? classes.desktopTabSelected : ''
	}`}
	onClick={() => handleTabChange('donors')}
	role="tab"
	aria-selected={activeTab === 'donors'}
	aria-controls="summary-donors-wrapper"
	data-testid="summary-donors">
	{t('cta.donations')}
	</Button>
	<Button
	className={`${classes.desktopTab} ${
	activeTab === 'wishes' ? classes.desktopTabSelected : ''
	}`}
	onClick={() => handleTabChange('wishes')}
	role="tab"
	aria-selected={activeTab === 'wishes'}
	aria-controls="summary-wishes-wrapper"
	data-testid="summary-wishes">
	{t('campaign.wishes')}
	</Button>
	</Box>
	{/* Content */}
	<Box
	className={classes.contentSection}
	id={activeTab === 'donors' ? 'summary-donors-wrapper' : 'summary-wishes-wrapper'}

[Copilot]

The tab elements use Typography components with onClick, which are not keyboard accessible. Users navigating with keyboards cannot activate these tabs using Enter or Space keys, and screen readers won't announce them as interactive elements.

Replace Typography with Button or add proper accessibility attributes:

<Button
  className={`${classes.tab} ${activeTab === 'donors' ? classes.tabSelected : ''}`}
  onClick={() => handleTabChange('donors')}
  role="tab"
  aria-selected={activeTab === 'donors'}
  aria-controls="summary-donors-wrapper"
  data-testid="summary-donors">
  {t('cta.donations')}
</Button>

Also change the FormControl container to use role="tablist" for proper tab navigation semantics.

Suggested change

	<FormControl className={classes.tabsContainer}>
	<Typography
	className={`${classes.tab} ${activeTab === 'donors' ? classes.tabSelected : ''}`}
	onClick={() => handleTabChange('donors')}
	data-testid="summary-donors">
	{t('cta.donations')}
	</Typography>
	<Typography
	className={`${classes.tab} ${activeTab === 'wishes' ? classes.tabSelected : ''}`}
	onClick={() => handleTabChange('wishes')}
	data-testid="summary-wishes">
	{t('campaign.wishes')}
	</Typography>
	</FormControl>
	{/* Content */}
	<Box
	className={classes.contentSection}
	<FormControl className={classes.tabsContainer} role="tablist">
	<Button
	type="button"
	className={`${classes.tab} ${activeTab === 'donors' ? classes.tabSelected : ''}`}
	onClick={() => handleTabChange('donors')}
	role="tab"
	aria-selected={activeTab === 'donors'}
	aria-controls="summary-donors-wrapper"
	data-testid="summary-donors">
	{t('cta.donations')}
	</Button>
	<Button
	type="button"
	className={`${classes.tab} ${activeTab === 'wishes' ? classes.tabSelected : ''}`}
	onClick={() => handleTabChange('wishes')}
	role="tab"
	aria-selected={activeTab === 'wishes'}
	aria-controls="summary-wishes-wrapper"
	data-testid="summary-wishes">
	{t('campaign.wishes')}
	</Button>
	</FormControl>
	{/* Content */}
	<Box
	className={classes.contentSection}
	id={
	activeTab === 'donors' ? 'summary-donors-wrapper' : 'summary-wishes-wrapper'
	}

[Copilot]

Hardcoded colors are used instead of theme values, which reduces maintainability and consistency across the application. Several of these colors are already defined in the theme.

Replace hardcoded color values with theme references:

• colors.yellow → theme.palette.yellowVariants.light or theme.palette.secondary.main
• colors.yellowHover → theme.palette.yellowVariants.hover
• colors.white → theme.palette.common.white
• colors.black → theme.palette.common.black
• colors.greyBackground → theme.palette.grey[100]
• colors.greyBorder → theme.palette.grey[300]

The darkBlue (#294E85) appears to match the primary dark blue used elsewhere. Consider adding it to the theme if it's a brand color, or use an existing theme color.

[sashko9807]

Apologizes for the delay.
Those seems a lot of file changes, just for a small adjustments in the padding as described in Discord. Is there anything else that has been changed here?
If not, can you just merge the working branch with master and commit only the changes? If you think it will be easier, feel free to open another PR of this with just the padding change.