feat: add progress alert (#52499)

client/i18n/locales/english/translations.json

@@ -495,6 +495,7 @@
     "progress-modal-cta-8": "Donate now to help us develop new courses on emerging tools and programming concepts.",
     "progress-modal-cta-9": "Donate now to support our math for developers curriculum.",
     "progress-modal-cta-10": "Donate now to help us develop free professional programming certifications for all.",
+    "help-us-reach-goal": "Donate now to help us reach our goal of 10,000 supporters by 2024.",
     "help-us-develop": "Help us develop free professional programming certifications for all.",
     "nicely-done": "Nicely done. You just completed {{block}}.",
     "credit-card": "Credit Card",

client/src/components/Intro/learn-alert.tsx

@@ -3,6 +3,7 @@ import { Alert } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useTranslation } from 'react-i18next';
 import { Link } from '../helpers';
+import { ProgressBar } from '../Progress/progress-bar';
 
 interface LearnAlertProps {
   onDonationAlertClick: () => void;
@@ -16,6 +17,32 @@ const LearnAlert = ({
   const { t } = useTranslation();
   const seasonalMessage = useFeature('seasonal-alert');
 
+  const progressFlag = useFeature('progress-alert');
+
+  const progressAlert = (
+    <Alert variant='info' className='annual-donation-alert'>
+      <div aria-hidden='true' className='progress-wrapper'>
+        <div>
+          <ProgressBar now={Number(progressFlag.value)} />
+        </div>
+      </div>
+      <h3 className='text-center'>{`${progressFlag.value}%`}</h3>
+      <p>{t('donate.help-us-reach-goal')}</p>
+      <hr />
+      <p className={'text-center'}>
+        <Link
+          className='btn'
+          key='donate'
+          sameTab={false}
+          to='/donate'
+          onClick={onDonationAlertClick}
+        >
+          {t('buttons.donate')}
+        </Link>
+      </p>
+    </Alert>
+  );
+
   const seasonalMessageAlert = (
     <Alert variant='info' className='annual-donation-alert'>
       <p>
@@ -37,6 +64,8 @@ const LearnAlert = ({
     </Alert>
   );
 
+  if (progressFlag.on) return progressAlert;
+
   if (seasonalMessage.on && !isDonating) return seasonalMessageAlert;
   return null;
 };

client/src/templates/Introduction/intro.css

@@ -449,6 +449,57 @@ ToDo: find out why, and remove the need for it */
   padding-inline-end: 0.25em;
 }
 
+.annual-donation-alert .progress-wrapper {
+  display: inline-block;
+  width: 100%;
+  margin: 1.2rem 0;
+  flex-direction: row;
+  border: 1px solid var(--blue70);
+}
+
+.annual-donation-alert h3 {
+  color: var(--blue70);
+}
+
+.annual-donation-alert .progress-bar-wrap,
+.progress-bar-background {
+  background-color: transparent;
+}
+
+.annual-donation-alert hr {
+  border-top-color: var(--blue10);
+}
+
+/* story starts here */
+
+.annual-donation-alert .progress-bar-percent {
+  border-right: 1px solid var(--blue70);
+  background-color: var(--blue-mid);
+  box-shadow: none;
+  animation: progress-bar-stripes 3s linear infinite;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(225, 225, 225, 0.3) 0%,
+    rgba(225, 225, 225, 0.3) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(225, 225, 225, 0.3) 51%,
+    rgba(225, 225, 225, 0.3) 75%,
+    transparent 75%,
+    transparent 100%
+  );
+  background-size: 100px 100px;
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 100px 0;
+  }
+}
+
 .tags-wrapper {
   display: flex;
   width: 100%;