Merge pull request #702 from freeCodeCamp/main

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

api/src/routes/donate.test.ts

@@ -4,7 +4,8 @@ import {
   devLogin,
   setupServer,
   superRequest,
-  defaultUserEmail
+  defaultUserEmail,
+  defaultUserId
 } from '../../jest.utils';
 import { createUserInput } from '../utils/create-user';
 
@@ -42,6 +43,21 @@ const userWithProgress: Prisma.userCreateInput = {
     }
   ]
 };
+const donationMock = {
+  endDate: null,
+  startDate: {
+    date: '2024-07-17T10:20:56.076Z',
+    when: '2024-07-17T10:20:56.076+00:00'
+  },
+  id: '66979a414748aa2f3ba36d41',
+  amount: 500,
+  customerId: 'cust_test_id',
+  duration: 'month',
+  email: '[email protected]',
+  provider: 'stripe',
+  subscriptionId: 'sub_test_id',
+  userId: defaultUserId
+};
 const sharedDonationReqBody = {
   amount: 500,
   duration: 'month'
@@ -93,6 +109,9 @@ const mockSubRetrieveObj = {
   status: 'active'
 };
 const mockSubRetrieve = jest.fn(() => Promise.resolve(mockSubRetrieveObj));
+const mockCheckoutSessionCreate = jest.fn(() =>
+  Promise.resolve({ id: 'checkout_session_id' })
+);
 const mockCustomerUpdate = jest.fn();
 const generateMockSubCreate = (status: string) => () =>
   Promise.resolve({
@@ -120,15 +139,22 @@ jest.mock('stripe', () => {
       subscriptions: {
         create: mockSubCreate,
         retrieve: mockSubRetrieve
+      },
+      checkout: {
+        sessions: {
+          create: mockCheckoutSessionCreate
+        }
       }
     };
   });
 });
 
 describe('Donate', () => {
+  let setCookies: string[];
   setupServer();
   describe('Authenticated User', () => {
     let superPost: ReturnType<typeof createSuperRequest>;
+    let superPut: ReturnType<typeof createSuperRequest>;
     const verifyUpdatedUserAndNewDonation = async (email: string) => {
       const user = await fastifyTestInstance.prisma.user.findFirst({
         where: { email }
@@ -162,8 +188,9 @@ describe('Donate', () => {
     };
 
     beforeEach(async () => {
-      const setCookies = await devLogin();
+      setCookies = await devLogin();
       superPost = createSuperRequest({ method: 'POST', setCookies });
+      superPut = createSuperRequest({ method: 'PUT', setCookies });
       await fastifyTestInstance.prisma.user.updateMany({
         where: { email: userWithProgress.email },
         data: userWithProgress
@@ -302,6 +329,39 @@ describe('Donate', () => {
       });
     });
 
+    describe('PUT /donate/update-stripe-card', () => {
+      it('should return 200 and return session id', async () => {
+        await fastifyTestInstance.prisma.donation.create({
+          data: donationMock
+        });
+        const response = await superPut('/donate/update-stripe-card').send({});
+        expect(mockCheckoutSessionCreate).toHaveBeenCalledWith({
+          cancel_url: 'http://localhost:8000/update-stripe-card',
+          customer: 'cust_test_id',
+          mode: 'setup',
+          payment_method_types: ['card'],
+          setup_intent_data: {
+            metadata: {
+              customer_id: 'cust_test_id',
+              subscription_id: 'sub_test_id'
+            }
+          },
+          success_url:
+            'http://localhost:8000/update-stripe-card?session_id={CHECKOUT_SESSION_ID}'
+        });
+        expect(response.body).toEqual({ sessionId: 'checkout_session_id' });
+        expect(response.status).toBe(200);
+      });
+      it('should return 500 if there is no donation record', async () => {
+        const response = await superPut('/donate/update-stripe-card').send({});
+        expect(response.body).toEqual({
+          message: 'flash.generic-error',
+          type: 'danger'
+        });
+        expect(response.status).toBe(500);
+      });
+    });
+
     describe('POST /donate/create-stripe-payment-intent', () => {
       it('should return 200 and call stripe api properly', async () => {
         mockSubCreate.mockImplementationOnce(
@@ -432,16 +492,16 @@ describe('Donate', () => {
   });
 
   describe('Unauthenticated User', () => {
-    let setCookies: string[];
     // Get the CSRF cookies from an unprotected route
     beforeAll(async () => {
       const res = await superRequest('/status/ping', { method: 'GET' });
       setCookies = res.get('Set-Cookie');
     });
 
-    const endpoints: { path: string; method: 'POST' }[] = [
+    const endpoints: { path: string; method: 'POST' | 'PUT' }[] = [
       { path: '/donate/add-donation', method: 'POST' },
-      { path: '/donate/charge-stripe-card', method: 'POST' }
+      { path: '/donate/charge-stripe-card', method: 'POST' },
+      { path: '/donate/update-stripe-card', method: 'PUT' }
     ];
 
     endpoints.forEach(({ path, method }) => {

api/src/routes/donate.ts

@@ -8,7 +8,7 @@ import {
   allStripeProductIdsArray
 } from '../../../shared/config/donation-settings';
 import * as schemas from '../schemas';
-import { STRIPE_SECRET_KEY } from '../utils/env';
+import { STRIPE_SECRET_KEY, HOME_LOCATION } from '../utils/env';
 import { inLastFiveMinutes } from '../utils/validate-donation';
 import { findOrCreateUser } from './helpers/auth-helpers';
 
@@ -30,6 +30,35 @@ export const donateRoutes: FastifyPluginCallbackTypebox = (
     typescript: true
   });
 
+  fastify.put(
+    '/donate/update-stripe-card',
+    {
+      schema: schemas.updateStripeCard
+    },
+    async req => {
+      const donation = await fastify.prisma.donation.findFirst({
+        where: { userId: req.user?.id, provider: 'stripe' }
+      });
+      if (!donation)
+        throw Error(`Stripe donation record not found: ${req.user?.id}`);
+      const { customerId, subscriptionId } = donation;
+      const session = await stripe.checkout.sessions.create({
+        payment_method_types: ['card'],
+        mode: 'setup',
+        customer: customerId,
+        setup_intent_data: {
+          metadata: {
+            customer_id: customerId,
+            subscription_id: subscriptionId
+          }
+        },
+        success_url: `${HOME_LOCATION}/update-stripe-card?session_id={CHECKOUT_SESSION_ID}`,
+        cancel_url: `${HOME_LOCATION}/update-stripe-card`
+      });
+      return { sessionId: session.id } as const;
+    }
+  );
+
   fastify.post(
     '/donate/add-donation',
     {

api/src/schemas.ts

@@ -14,6 +14,7 @@ export { deprecatedEndpoints } from './schemas/deprecated';
 export { chargeStripeCard } from './schemas/donate/charge-stripe-card';
 export { chargeStripe } from './schemas/donate/charge-stripe';
 export { createStripePaymentIntent } from './schemas/donate/create-stripe-payment-intent';
+export { updateStripeCard } from './schemas/donate/update-stripe-card';
 export { resubscribe } from './schemas/email-subscription/resubscribe';
 export { unsubscribe } from './schemas/email-subscription/unsubscribe';
 export { updateMyAbout } from './schemas/settings/update-my-about';

api/src/schemas/donate/update-stripe-card.ts

@@ -0,0 +1,12 @@
+import { Type } from '@fastify/type-provider-typebox';
+import { genericError } from '../types';
+
+export const updateStripeCard = {
+  body: Type.Object({}),
+  response: {
+    200: Type.Object({
+      sessionId: Type.String()
+    }),
+    default: genericError
+  }
+};

client/i18n/locales/japanese/translations.json

@@ -55,9 +55,9 @@
     "reset-lesson": "レッスンをリセット",
     "run": "実行",
     "run-test": "テスト実行 (Ctrl + Enter)",
-    "check-code": "Check Your Code",
-    "check-code-ctrl": "Check Your Code (Ctrl + Enter)",
-    "check-code-cmd": "Check Your Code (Command + Enter)",
+    "check-code": "コードをチェック",
+    "check-code-ctrl": "コードをチェック (Ctrl + Enter)",
+    "check-code-cmd": "コードをチェック (Command + Enter)",
     "reset": "リセット",
     "reset-step": "ステップをリセット",
     "help": "ヘルプ",
@@ -72,11 +72,11 @@
     "update-email": "メールアドレスを更新",
     "verify-email": "メールアドレスの確認",
     "submit-and-go": "提出して次のチャレンジに進む",
-    "submit-and-go-ctrl": "Submit and go to next challenge (Ctrl + Enter)",
-    "submit-and-go-cmd": "Submit and go to next challenge (Command + Enter)",
+    "submit-and-go-ctrl": "提出して次のチャレンジに進む (Ctrl + Enter)",
+    "submit-and-go-cmd": "提出して次のチャレンジに進む (Command + Enter)",
     "go-to-next": "次のチャレンジに進む",
-    "go-to-next-ctrl": "Go to next challenge (Ctrl + Enter)",
-    "go-to-next-cmd": "Go to next challenge (Command + Enter)",
+    "go-to-next-ctrl": "次のチャレンジに進む (Ctrl + Enter)",
+    "go-to-next-cmd": "次のチャレンジに進む (Command + Enter)",
     "ask-later": "後で",
     "start-coding": "コーディングを始めましょう！",
     "go-to-settings": "設定へ移動して認定証を取得",

client/i18n/locales/ukrainian/translations.json

@@ -55,9 +55,9 @@
     "reset-lesson": "Скинути цей урок",
     "run": "Запустити",
     "run-test": "Запустити тест (Ctrl + Enter)",
-    "check-code": "Check Your Code",
-    "check-code-ctrl": "Check Your Code (Ctrl + Enter)",
-    "check-code-cmd": "Check Your Code (Command + Enter)",
+    "check-code": "Перевірити код",
+    "check-code-ctrl": "Перевірити код (Ctrl + Enter)",
+    "check-code-cmd": "Перевірити код (Command + Enter)",
     "reset": "Скинути",
     "reset-step": "Скинути цей крок",
     "help": "Допомога",
@@ -72,11 +72,11 @@
     "update-email": "Оновити мою адресу електронної пошти",
     "verify-email": "Підтвердити адресу електронної пошти",
     "submit-and-go": "Відправити та перейти до наступного завдання",
-    "submit-and-go-ctrl": "Submit and go to next challenge (Ctrl + Enter)",
-    "submit-and-go-cmd": "Submit and go to next challenge (Command + Enter)",
+    "submit-and-go-ctrl": "Надіслати та перейти до наступного завдання (Ctrl + Enter)",
+    "submit-and-go-cmd": "Надіслати та перейти до наступного завдання (Command + Enter)",
     "go-to-next": "Перейти до наступного завдання",
-    "go-to-next-ctrl": "Go to next challenge (Ctrl + Enter)",
-    "go-to-next-cmd": "Go to next challenge (Command + Enter)",
+    "go-to-next-ctrl": "Перейти до наступного завдання (Ctrl + Enter)",
+    "go-to-next-cmd": "Перейти до наступного завдання (Command + Enter)",
     "ask-later": "Нагадати пізніше",
     "start-coding": "Розпочати програмувати!",
     "go-to-settings": "Перейдіть до налаштувань, щоб отримати сертифікацію",

client/src/components/layouts/default.tsx

@@ -258,18 +258,18 @@ function DefaultLayout({
             />
           ) : null}
           <SignoutModal />
-          {isChallenge && !examInProgress && isRenderBreadcrumb ? (
-            <div className='breadcrumbs-demo'>
-              <BreadCrumb
-                block={block as string}
-                superBlock={superBlock as string}
-              />
-            </div>
-          ) : isExSmallViewportHeight ? (
-            <Spacer size='xxSmall' />
-          ) : (
-            <Spacer size='small' />
-          )}
+          {isChallenge &&
+            !examInProgress &&
+            (isRenderBreadcrumb ? (
+              <div className='breadcrumbs-demo'>
+                <BreadCrumb
+                  block={block as string}
+                  superBlock={superBlock as string}
+                />
+              </div>
+            ) : (
+              <Spacer size={isExSmallViewportHeight ? 'xxSmall' : 'small'} />
+            ))}
           {fetchState.complete && children}
         </div>
         {showFooter && <Footer />}

client/src/components/settings/certification.tsx

@@ -231,7 +231,21 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
             onClick={createClickHandler(certSlug)}
             target='_blank'
           >
-            {isFullStackCert ? t('buttons.show-cert') : t('buttons.claim-cert')}
+            {isFullStackCert ? (
+              <>
+                {t('buttons.show-cert')}{' '}
+                <span className='sr-only'>
+                  {t('certification.title.Legacy Full Stack')}
+                </span>
+              </>
+            ) : (
+              <>
+                {t('buttons.claim-cert')}{' '}
+                <span className='sr-only'>
+                  {t('certification.title.Legacy Full Stack')}
+                </span>
+              </>
+            )}
           </Button>
         ) : (
           <Button
@@ -241,7 +255,10 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
             disabled={true}
             id={'button-' + certSlug}
           >
-            {t('buttons.claim-cert')}
+            {t('buttons.claim-cert')}{' '}
+            <span className='sr-only'>
+              {t('certification.title.Legacy Full Stack')}
+            </span>
           </Button>
         )}
       </div>

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -255,9 +255,7 @@ export function* previewChallengeSaga(action) {
     yield put(initLogs());
     yield put(initConsole(''));
   }
-  // long enough so that holding down a key will only send one request, but not
-  // so long that it feels unresponsive
-  yield delay(30);
+  yield delay(700);
 
   const logProxy = yield channel();
   const proxyLogger = args => logProxy.put(args);

client/src/templates/Challenges/redux/selectors.js

@@ -16,8 +16,10 @@ export const challengeFilesSelector = state => state[ns].challengeFiles;
 export const challengeMetaSelector = state => state[ns].challengeMeta;
 export const challengeTestsSelector = state => state[ns].challengeTests;
 export const consoleOutputSelector = state => state[ns].consoleOut;
-export const completedChallengesIdsSelector = state =>
-  completedChallengesSelector(state).map(node => node.id);
+export const completedChallengesIdsSelector = createSelector(
+  completedChallengesSelector,
+  completedChallenges => completedChallenges.map(node => node.id)
+);
 export const isChallengeCompletedSelector = state => {
   const completedChallenges = completedChallengesSelector(state);
   const { id: currentChallengeId } = challengeMetaSelector(state);
@@ -119,17 +121,13 @@ export const currentBlockIdsSelector = createSelector(
   }
 );
 
-export const completedChallengesInBlockSelector = state => {
-  const completedChallengesIds = completedChallengesIdsSelector(state);
-  const currentBlockIds = currentBlockIdsSelector(state);
-  const { id } = challengeMetaSelector(state);
-
-  return getCompletedChallengesInBlock(
-    completedChallengesIds,
-    currentBlockIds,
-    id
-  );
-};
+export const completedChallengesInBlockSelector = createSelector(
+  completedChallengesIdsSelector,
+  currentBlockIdsSelector,
+  challengeMetaSelector,
+  (completedChallengesIds, currentBlockIds, { id }) =>
+    getCompletedChallengesInBlock(completedChallengesIds, currentBlockIds, id)
+);
 
 export const completedPercentageSelector = createSelector(
   isSignedInSelector,