richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/utils/AbilitiesHelper/index.ts

@@ -0,0 +1,71 @@
+import { Maybe, Nullable } from 'types/utils';
+import contractAbilities from 'utils/AbilitiesHelper/contractAbilities';
+import joanieUserProfileAbilities from './joanieUserProfileAbilities';
+import {
+  Entity,
+  Actions,
+  JoanieUserProfileActions,
+  isJoanieUserProfileEntity,
+  isContractEntity,
+  ContractActions,
+} from './types';
+
+// further actions can be added here
+// like: { ...JoanieUserProfileActions, ...CourseActions };
+export const abilityActions = { ...JoanieUserProfileActions, ...ContractActions };
+
+/**
+ * Check if an action is available on an entity
+ * Joanie's backend give us an "abilities" entry for several models like user, course and organization
+ * these "api abilities" are used to define our "frontend abilities"
+ *
+ * @param entities - The entities on which we want to check action's availability.
+ * @param action - The action to check.
+ */
+const can = (entities: Maybe<Nullable<Entity | Entity[]>>, action: Actions) => {
+  if (!entities) return false;
+
+  if (!Array.isArray(entities)) entities = [entities];
+  else if (entities.length === 0) return false;
+
+  return entities.every((entity) => {
+    if (isJoanieUserProfileEntity(entity)) {
+      return joanieUserProfileAbilities[action as JoanieUserProfileActions](entity);
+    }
+
+    if (isContractEntity(entity)) {
+      return contractAbilities[action as ContractActions](entity);
+    }
+
+    return false;
+  });
+
+  // further abilities can be added here
+  // example:
+  // if (isCourseEntity(entity)) {
+  //   return courseAbilities[action](entity);
+  // }
+};
+
+/**
+ * Check if an action is NOT available on an entity
+ *
+ * @param entities - The entities on which we want to check action's availability.
+ * @param action - The action to check.
+ */
+const cannot = (entities: Maybe<Nullable<Entity | Entity[]>>, action: Actions) => {
+  return !can(entities, action);
+};
+
+const buildEntityInterface = (entities: Maybe<Nullable<Entity | Entity[]>>) => {
+  return {
+    can: (action: Actions) => can(entities, action),
+    cannot: (action: Actions) => cannot(entities, action),
+  };
+};
+
+export default {
+  can,
+  cannot,
+  buildEntityInterface,
+};

package/js/utils/AbilitiesHelper/joanieUserProfileAbilities.spec.ts

@@ -0,0 +1,55 @@
+import { JoanieUserApiAbilityActions } from 'types/User';
+import { JoanieUserProfileFactory } from 'utils/test/factories/joanie';
+import { JoanieUserProfileActions } from './types';
+import AbilitiesHelper from '.';
+
+describe('Abilities.JoanieUserProfile', () => {
+  it.each([
+    {
+      label: 'User has access to both a course and an organization',
+      abilities: {
+        [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: true,
+        [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: true,
+      },
+    },
+    {
+      label: 'User has access to a course',
+      abilities: {
+        [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: false,
+        [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: true,
+      },
+    },
+    {
+      label: 'User has access to an organization',
+      abilities: {
+        [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: true,
+        [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: false,
+      },
+    },
+  ])('should allow ACCESS_TEACHER_DASHBOARD when "$label"', ({ abilities }) => {
+    const joanieUser = JoanieUserProfileFactory({
+      abilities,
+    }).one();
+    expect(AbilitiesHelper.can(joanieUser, JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD)).toBe(
+      true,
+    );
+    expect(
+      AbilitiesHelper.cannot(joanieUser, JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD),
+    ).toBe(false);
+  });
+
+  it("shouldn't allow access to the teacher dashboard when the user doesn't have access to either the course or the organization", () => {
+    const joanieUserProfile = JoanieUserProfileFactory({
+      abilities: {
+        [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: false,
+        [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: false,
+      },
+    }).one();
+    expect(
+      AbilitiesHelper.can(joanieUserProfile, JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD),
+    ).toBe(false);
+    expect(
+      AbilitiesHelper.cannot(joanieUserProfile, JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD),
+    ).toBe(true);
+  });
+});

package/js/utils/AbilitiesHelper/joanieUserProfileAbilities.ts

@@ -0,0 +1,16 @@
+import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
+import { JoanieUserProfileActions } from './types';
+
+type JoanieUserAbilityList = {
+  [action in JoanieUserProfileActions]: (entity: JoanieUserProfile) => boolean;
+};
+const abilities: JoanieUserAbilityList = {
+  [JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD]: (joanieUser: JoanieUserProfile) => {
+    return (
+      Boolean(joanieUser.abilities[JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]) ||
+      Boolean(joanieUser.abilities[JoanieUserApiAbilityActions.HAS_COURSE_ACCESS])
+    );
+  },
+};
+
+export default abilities;

package/js/utils/AbilitiesHelper/types.ts

@@ -0,0 +1,36 @@
+import { JoanieUserProfile } from 'types/User';
+import { Contract } from 'types/Joanie';
+
+export enum JoanieUserProfileActions {
+  ACCESS_TEACHER_DASHBOARD = 'access_teacher_dashboard',
+}
+
+export enum ContractActions {
+  SIGN = 'sign',
+}
+
+const JOANIE_PROFILE_KEYS = [
+  'abilities',
+  'full_name',
+  'id',
+  'is_staff',
+  'is_superuser',
+  'username',
+];
+
+export const isJoanieUserProfileEntity = (entity: Entity): entity is JoanieUserProfile => {
+  const entityKeys = Object.keys(entity);
+
+  if (entityKeys.length !== JOANIE_PROFILE_KEYS.length) return false;
+  return entityKeys.every((key) => JOANIE_PROFILE_KEYS.includes(key));
+};
+
+export const isContractEntity = (entity: Entity): entity is Contract => {
+  const CONTRACT_KEYS = ['student_signed_on', 'organization_signed_on', 'definition', 'order'];
+  return CONTRACT_KEYS.every((key) => entity.hasOwnProperty(key));
+};
+
+// further entities and entity actions can be added here
+// like Entity = JoanieUserProfileEntity | CourseEntity
+export type Entity = JoanieUserProfile | Contract;
+export type Actions = JoanieUserProfileActions | ContractActions;

package/js/utils/ContractHelper/index.spec.ts

@@ -0,0 +1,73 @@
+import { createIntl } from 'react-intl';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { ContractState } from 'types/Joanie';
+import { ContractHelper, ContractStatePoV } from '.';
+
+const unsignedContractFactory = ContractFactory({
+  student_signed_on: undefined,
+  organization_signed_on: undefined,
+});
+const halfSignedContractFactory = ContractFactory({
+  student_signed_on: Date.toString(),
+  organization_signed_on: undefined,
+});
+const signedContractFactory = ContractFactory({
+  student_signed_on: Date.toString(),
+  organization_signed_on: Date.toString(),
+});
+
+describe('ContractHelper', () => {
+  describe('getState', () => {
+    it.each([
+      [null, ContractState.UNSIGNED],
+      [undefined, ContractState.UNSIGNED],
+      [unsignedContractFactory.one(), ContractState.UNSIGNED],
+      [halfSignedContractFactory.one(), ContractState.LEARNER_SIGNED],
+      [signedContractFactory.one(), ContractState.SIGNED],
+    ])('should return the correct state', (contract, state) => {
+      expect(ContractHelper.getState(contract)).toEqual(state);
+    });
+  });
+
+  describe('getStateLabel', () => {
+    const intl = createIntl({ locale: 'en' });
+
+    it.each([
+      [ContractStatePoV.LEARNER, ContractState.UNSIGNED, 'Pending for signature'],
+      [
+        ContractStatePoV.LEARNER,
+        ContractState.LEARNER_SIGNED,
+        'Pending for organization signature',
+      ],
+      [ContractStatePoV.LEARNER, ContractState.SIGNED, 'Signed'],
+      [ContractStatePoV.ORGANIZATION, ContractState.UNSIGNED, 'Pending for learner signature'],
+      [ContractStatePoV.ORGANIZATION, ContractState.LEARNER_SIGNED, 'Pending for signature'],
+      [ContractStatePoV.ORGANIZATION, ContractState.SIGNED, 'Signed'],
+    ])('should return the correct state', (pov, state, label) => {
+      expect(ContractHelper.getStateLabel(state, pov, intl)).toEqual(label);
+    });
+  });
+
+  describe('getHumanReadableState', () => {
+    const intl = createIntl({ locale: 'en' });
+
+    it.each([
+      [ContractStatePoV.LEARNER, unsignedContractFactory.one(), 'Pending for signature'],
+      [
+        ContractStatePoV.LEARNER,
+        halfSignedContractFactory.one(),
+        'Pending for organization signature',
+      ],
+      [ContractStatePoV.LEARNER, signedContractFactory.one(), 'Signed'],
+      [
+        ContractStatePoV.ORGANIZATION,
+        unsignedContractFactory.one(),
+        'Pending for learner signature',
+      ],
+      [ContractStatePoV.ORGANIZATION, halfSignedContractFactory.one(), 'Pending for signature'],
+      [ContractStatePoV.ORGANIZATION, signedContractFactory.one(), 'Signed'],
+    ])('should return the correct state', (pov, contract, label) => {
+      expect(ContractHelper.getHumanReadableState(contract, pov, intl)).toEqual(label);
+    });
+  });
+});

package/js/utils/ContractHelper/index.ts

@@ -0,0 +1,72 @@
+import { defineMessages, IntlShape } from 'react-intl';
+import { Contract, ContractState } from 'types/Joanie';
+import { StringHelper } from 'utils/StringHelper';
+import { Maybe, Nullable } from 'types/utils';
+
+const messages = defineMessages({
+  organizationUnsigned: {
+    id: 'utils.ContractHelper.organizationUnsigned',
+    description: 'Label for unsigned contract status in organization point of view',
+    defaultMessage: 'Pending for learner signature',
+  },
+  organizationHalfSigned: {
+    id: 'utils.ContractHelper.organizationHalfSigned',
+    description: 'Label for half signed contract status in organization point of view',
+    defaultMessage: 'Pending for signature',
+  },
+  organizationSigned: {
+    id: 'utils.ContractHelper.organizationSigned',
+    description: 'Label for signed contract status in organization point of view',
+    defaultMessage: 'Signed',
+  },
+  learnerUnsigned: {
+    id: 'utils.ContractHelper.learnerUnsigned',
+    description: 'Label for unsigned contract status in learner point of view',
+    defaultMessage: 'Pending for signature',
+  },
+  learnerHalfSigned: {
+    id: 'utils.ContractHelper.learnerHalfSigned',
+    description: 'Label for unsigned contract status in learner point of view',
+    defaultMessage: 'Pending for organization signature',
+  },
+  learnerSigned: {
+    id: 'utils.ContractHelper.learnerSigned',
+    description: 'Label for signed contract status in learner point of view',
+    defaultMessage: 'Signed',
+  },
+});
+
+export enum ContractStatePoV {
+  LEARNER = 'learner',
+  ORGANIZATION = 'organization',
+}
+
+export class ContractHelper {
+  static getState(contract: Maybe<Nullable<Contract>>): ContractState {
+    if (contract?.student_signed_on && contract?.organization_signed_on) {
+      return ContractState.SIGNED;
+    }
+
+    if (contract?.student_signed_on) {
+      return ContractState.LEARNER_SIGNED;
+    }
+
+    return ContractState.UNSIGNED;
+  }
+
+  static getStateLabel(state: ContractState, pov: ContractStatePoV, intl: IntlShape) {
+    const camelCasedState = state
+      .toLowerCase()
+      .split('_')
+      .map(StringHelper.capitalizeFirst)
+      .join('');
+    const messageKey = `${pov}${camelCasedState}` as keyof typeof messages;
+    const message = messages[messageKey];
+
+    return intl.formatMessage(message);
+  }
+  static getHumanReadableState(contract: Contract, pov: ContractStatePoV, intl: IntlShape) {
+    const state = this.getState(contract);
+    return this.getStateLabel(state, pov, intl);
+  }
+}

package/js/utils/CourseRuns/index.spec.tsx

@@ -1,5 +1,5 @@
 import { Priority } from 'types';
-import { computeStates } from 'utils/CourseRuns/index';
+import { computeState, computeStates } from 'utils/CourseRuns/index';
 import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
 
 describe('computeStates', () => {
@@ -16,4 +16,23 @@ describe('computeStates', () => {
     const courseRun = computeStates([CourseRunFactoryFromPriority(priority)().one()])[0];
     expect(courseRun.state.priority).toEqual(priority);
   });
+
+  it('is ongoing when there are no enrollment end date nor course end date', () => {
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one();
+    (courseRun as any).enrollment_end = undefined;
+    (courseRun as any).end = undefined;
+    expect(computeState(courseRun).priority).toEqual(Priority.ONGOING_OPEN);
+  });
+
+  it('is ongoing when there are no enrollment end date', () => {
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one();
+    (courseRun as any).enrollment_end = undefined;
+    expect(computeState(courseRun).priority).toEqual(Priority.ONGOING_OPEN);
+  });
+
+  it('is ongoing when there are no course end date', () => {
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one();
+    (courseRun as any).end = undefined;
+    expect(computeState(courseRun).priority).toEqual(Priority.ONGOING_OPEN);
+  });
 });

package/js/utils/CourseRuns/index.ts

@@ -19,8 +19,8 @@ export const computeState = (courseRun: CourseRun): CourseState => {
     };
   }
   const now = new Date();
-  const end = new Date(courseRun.end) ?? MAX_DATE;
-  const enrollmentEnd = new Date(courseRun.enrollment_end) ?? MAX_DATE;
+  const end = courseRun.end ? new Date(courseRun.end) : MAX_DATE;
+  const enrollmentEnd = courseRun.enrollment_end ? new Date(courseRun.enrollment_end) : MAX_DATE;
 
   if (new Date(courseRun.start) < now) {
     if (end > now) {
@@ -77,3 +77,15 @@ export const computeState = (courseRun: CourseRun): CourseState => {
     text: CourseStateTextEnum.ENROLLMENT_CLOSED,
   };
 };
+
+export const isOpenedCourseRunCredential = (courseRunState: CourseState) =>
+  courseRunState.priority <= Priority.FUTURE_NOT_YET_OPEN;
+
+export const isOpenedCourseRunCertificate = (courseRunState: CourseState) =>
+  [
+    Priority.ONGOING_OPEN,
+    Priority.FUTURE_OPEN,
+    Priority.FUTURE_NOT_YET_OPEN,
+    Priority.FUTURE_CLOSED,
+    Priority.ONGOING_CLOSED,
+  ].includes(courseRunState.priority);

package/js/utils/CoursesHelper/index.spec.ts

@@ -1,109 +1,99 @@
 import { CoursesHelper } from 'utils/CoursesHelper/index';
-import { Order } from 'types/Joanie';
-import { EnrollmentFactory, OrderFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
+import { CredentialOrder } from 'types/Joanie';
+import {
+  EnrollmentFactory,
+  CredentialOrderFactory,
+  TargetCourseFactory,
+} from 'utils/test/factories/joanie';
 
 describe('CourseHelper', () => {
   it('should find an active course enrollment in order', () => {
-    const order: Order = {
-      ...OrderFactory().one(),
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(3),
-    };
-    order.enrollments = [
-      {
-        ...EnrollmentFactory().one(),
+    }).one();
+    order.target_enrollments = [
+      EnrollmentFactory({
         course_run: order.target_courses[0].course_runs[0],
         is_active: false,
-      },
-      {
-        ...EnrollmentFactory().one(),
+      }).one(),
+      EnrollmentFactory({
         course_run: order.target_courses[1].course_runs[0],
         is_active: true,
-      },
+      }).one(),
     ];
     expect(CoursesHelper.findActiveCourseEnrollmentInOrder(order.target_courses[1], order)).toEqual(
-      order.enrollments[1],
+      order.target_enrollments[1],
     );
   });
   it('should not find active course enrollment in an order containing only is_active=false enrollments', () => {
-    const order: Order = {
-      ...OrderFactory().one(),
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(3),
-    };
-    order.enrollments = [
-      {
-        ...EnrollmentFactory().one(),
+    }).one();
+
+    order.target_enrollments = [
+      EnrollmentFactory({
         course_run: order.target_courses[0].course_runs[0],
         is_active: false,
-      },
-      {
-        ...EnrollmentFactory().one(),
+      }).one(),
+      EnrollmentFactory({
         course_run: order.target_courses[1].course_runs[0],
         is_active: false,
-      },
+      }).one(),
     ];
     expect(
       CoursesHelper.findActiveCourseEnrollmentInOrder(order.target_courses[1], order),
     ).toBeUndefined();
   });
   it('should not find active course enrollment in an order without enrollment', () => {
-    const order: Order = {
-      ...OrderFactory().one(),
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(3),
-      enrollments: [],
-    };
+      target_enrollments: [],
+    }).one();
     expect(
       CoursesHelper.findActiveCourseEnrollmentInOrder(order.target_courses[0], order),
     ).toBeUndefined();
   });
 
   it('should find enrollments', () => {
-    const order: Order = {
-      ...OrderFactory().one(),
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(3),
-    };
-    order.enrollments = [
-      {
-        ...EnrollmentFactory().one(),
+    }).one();
+    order.target_enrollments = [
+      EnrollmentFactory({
         course_run: order.target_courses[0].course_runs[0],
         is_active: false,
-      },
-      {
-        ...EnrollmentFactory().one(),
+      }).one(),
+      EnrollmentFactory({
         course_run: order.target_courses[1].course_runs[0],
         is_active: true,
-      },
-      {
-        ...EnrollmentFactory().one(),
+      }).one(),
+      EnrollmentFactory({
         course_run: order.target_courses[0].course_runs[1],
         is_active: true,
-      },
+      }).one(),
     ];
     expect(CoursesHelper.findCourseEnrollmentsInOrder(order.target_courses[0], order)).toEqual([
-      order.enrollments[0],
-      order.enrollments[2],
+      order.target_enrollments[0],
+      order.target_enrollments[2],
     ]);
   });
   it('should not find enrollments', () => {
-    const order: Order = {
-      ...OrderFactory().one(),
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(3),
-    };
-    order.enrollments = [
-      {
-        ...EnrollmentFactory().one(),
+    }).one();
+    order.target_enrollments = [
+      EnrollmentFactory({
         course_run: order.target_courses[0].course_runs[0],
         is_active: false,
-      },
-      {
-        ...EnrollmentFactory().one(),
+      }).one(),
+      EnrollmentFactory({
         course_run: order.target_courses[1].course_runs[0],
         is_active: true,
-      },
-      {
-        ...EnrollmentFactory().one(),
+      }).one(),
+      EnrollmentFactory({
         course_run: order.target_courses[0].course_runs[1],
         is_active: true,
-      },
+      }).one(),
     ];
     expect(CoursesHelper.findCourseEnrollmentsInOrder(order.target_courses[2], order)).toEqual([]);
   });

package/js/utils/CoursesHelper/index.ts

@@ -1,19 +1,18 @@
-import * as Joanie from 'types/Joanie';
-import { Enrollment } from 'types/Joanie';
+import { TargetCourse, AbstractCourse, Enrollment, CredentialOrder } from 'types/Joanie';
 
 export class CoursesHelper {
-  static findActiveCourseEnrollmentInOrder(targetCourse: Joanie.TargetCourse, order: Joanie.Order) {
-    return CoursesHelper.findActiveEnrollment(targetCourse, order.enrollments);
+  static findActiveCourseEnrollmentInOrder(targetCourse: TargetCourse, order: CredentialOrder) {
+    return CoursesHelper.findActiveEnrollment(targetCourse, order.target_enrollments);
   }
-  static findActiveEnrollment(targetCourse: Joanie.AbstractCourse, enrollments: Enrollment[]) {
+  static findActiveEnrollment(targetCourse: AbstractCourse, enrollments: Enrollment[]) {
     const courseRunIds = targetCourse.course_runs.map(({ id }) => id);
     return enrollments.find(({ is_active, course_run }) => {
       return is_active && courseRunIds.includes(course_run.id);
     });
   }
-  static findCourseEnrollmentsInOrder(targetCourse: Joanie.AbstractCourse, order: Joanie.Order) {
+  static findCourseEnrollmentsInOrder(targetCourse: AbstractCourse, order: CredentialOrder) {
     const courseRunIds = targetCourse.course_runs.map(({ id }) => id);
-    return order.enrollments.filter(({ course_run }) => {
+    return order.target_enrollments.filter(({ course_run }) => {
       return courseRunIds.includes(course_run.id);
     });
   }

package/js/utils/CreditCardHelper/index.spec.tsx

@@ -17,40 +17,44 @@ describe('CreditCardHelper', () => {
     const date = faker.date.future({ refDate });
 
     expect(
-      CreditCardHelper.getExpirationState({
-        ...CreditCardFactory().one(),
-        expiration_month: date.getMonth() + 1,
-        expiration_year: date.getFullYear(),
-      }),
+      CreditCardHelper.getExpirationState(
+        CreditCardFactory({
+          expiration_month: date.getMonth() + 1,
+          expiration_year: date.getFullYear(),
+        }).one(),
+      ),
     ).toBe(CreditCardExpirationStatus.FINE);
   });
 
   it('is soon expired', () => {
-    const refDate = new Date();
-    refDate.setMonth(refDate.getMonth() + 1);
-    refDate.setDate(1);
-    const futureLessThan3Months = faker.date.future({
-      years: 2.99 / 12,
-      refDate,
+    const now = new Date();
+    const expirationDate = faker.date.between({
+      from: now,
+      to: new Date(now.getFullYear(), now.getMonth() + 4, 0, 23, 59, 59),
     });
 
     expect(
-      CreditCardHelper.getExpirationState({
-        ...CreditCardFactory().one(),
-        expiration_month: futureLessThan3Months.getMonth() + 1,
-        expiration_year: futureLessThan3Months.getFullYear(),
-      }),
+      CreditCardHelper.getExpirationState(
+        CreditCardFactory({
+          expiration_month: expirationDate.getMonth() + 1,
+          expiration_year: expirationDate.getFullYear(),
+        }).one(),
+      ),
     ).toBe(CreditCardExpirationStatus.SOON);
   });
 
   it('is expired', () => {
-    const date = faker.date.past();
+    const now = new Date();
+    const date = faker.date.past({
+      refDate: new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59),
+    });
     expect(
-      CreditCardHelper.getExpirationState({
-        ...CreditCardFactory().one(),
-        expiration_month: date.getMonth() + 1,
-        expiration_year: date.getFullYear(),
-      }),
+      CreditCardHelper.getExpirationState(
+        CreditCardFactory({
+          expiration_month: date.getMonth() + 1,
+          expiration_year: date.getFullYear(),
+        }).one(),
+      ),
     ).toBe(CreditCardExpirationStatus.EXPIRED);
   });
 });

package/js/utils/CreditCardHelper/index.tsx

@@ -15,16 +15,29 @@ export class CreditCardHelper {
     if (!creditCard.expiration_month || !creditCard.expiration_year) {
       return false;
     }
-    const expirationDate = new Date(creditCard.expiration_year, creditCard.expiration_month - 1, 1);
-    const limitDate = new Date();
-    limitDate.setMonth(limitDate.getMonth() + 3);
-    return limitDate.getTime() > expirationDate.getTime();
+    const expirationDate = new Date(
+      creditCard.expiration_year,
+      creditCard.expiration_month,
+      0,
+      23,
+      59,
+      59,
+    );
+    const limitDate = new Date(new Date().getFullYear(), new Date().getMonth() + 4, 0, 23, 59, 59);
+    return limitDate.getTime() >= expirationDate.getTime();
   }
 
   static isExpired(creditCard: CreditCard): boolean {
-    const expirationDate = new Date(creditCard.expiration_year, creditCard.expiration_month - 1, 1);
+    const expirationDate = new Date(
+      creditCard.expiration_year,
+      creditCard.expiration_month,
+      0,
+      23,
+      59,
+      59,
+    );
     const now = new Date();
-    return expirationDate.getTime() < now.getTime();
+    return expirationDate.getTime() <= now.getTime();
   }
 
   static getExpirationState(creditCard: CreditCard): CreditCardExpirationStatus {