Merge pull request #20187 from overleaf/jel-plans-modal-edu-discount

[web] Use notification for when edu discount is applied or not on light touch redesign

GitOrigin-RevId: 38278ac94f5b3cae18a500b3801412ed1b9a7da0

services/web/app/views/_mixins/notification.pug

@@ -0,0 +1,38 @@
+//- to be kept in sync with frontend/js/shared/components/notification.tsx
+
+mixin notificationIcon(type)
+	if type === 'info'
+		span.material-symbols(aria-hidden="true") info
+	else if type === 'success'
+		span.material-symbols(aria-hidden="true") check_circle
+
+
+mixin notification(options)
+	- var {ariaLive, id, type, title, content, disclaimer, className} = options
+	- var classNames = `notification notification-type-${type} ${className ? className : ''} ${isActionBelowContent ? 'notification-cta-below-content' : ''}`
+
+	div(
+		aria-live=ariaLive,
+		role="alert",
+		id=id,
+		class=classNames
+	)
+		.notification-icon
+			+notificationIcon(type)
+		.notification-content-and-cta
+			.notification-content
+				if title
+					p
+						b #{title}
+				| #{content}
+			//- TODO: handle action
+			//- if action
+			//- 	.notification-cta
+			if disclaimer
+				.notification-disclaimer #{disclaimer}
+		//- TODO: handle dismissible notifications
+		//- TODO: handle onDismiss
+		//- if isDismissible
+		//- 	.notification-close-btn
+		//- 		button(aria-label=translate('close'))
+		//- 			span.material-symbols(aria-hidden="true") close

services/web/app/views/subscriptions/plans/light-redesign/_group_plan_modal.pug

@@ -1,3 +1,5 @@
+include ../../../_mixins/notification
+
 div.modal.fade.group-customize-subscription-modal.website-redesign-modal(tabindex="-1" role="dialog" data-ol-group-plan-modal)
 	.modal-dialog(role="document")
 		.modal-content
@@ -92,13 +94,13 @@ div.modal.fade.group-customize-subscription-modal.website-redesign-modal(tabinde
 									span #{translate('educational_discount_disclaimer')}
 
 					.row
-						.col-md-12.text-center
+						.col-md-12
 							.educational-discount-section
 								div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
 									.applied(hidden=true data-ol-group-plan-educational-discount-applied)
-										| #{translate('educational_discount_applied')}
+										+notification({ariaLive: 'polite', content: translate('educational_discount_applied'), type: 'success', ariaLive: 'polite'})
 									.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
-										| #{translate('educational_discount_available_for_groups_of_ten_or_more')}
+										+notification({ariaLive: 'polite', content: translate('educational_discount_available_for_groups_of_ten_or_more'), type: 'info', ariaLive: 'polite'})
 			.modal-footer
 				.text-center
 					button.btn.btn-primary.btn-lg(

services/web/frontend/js/shared/components/notification.tsx

@@ -1,3 +1,5 @@
+// to be kept in sync with app/views/_mixins/notification.pug
+
 import classNames from 'classnames'
 import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'