richie-education 2.25.0-b2.dev176 → 2.25.0-b2.dev183

package/js/hooks/useOpenEdxProfile/utils/index.ts

@@ -0,0 +1,131 @@
+import { IntlShape, defineMessages } from 'react-intl';
+import countries from 'i18n-iso-countries';
+import { OpenEdxGender, OpenEdxLevelOfEducation, OpenEdxApiProfile } from 'types/openEdx';
+import { Maybe } from 'types/utils';
+
+export const levelOfEducationMessages = defineMessages<OpenEdxLevelOfEducation>({
+  [OpenEdxLevelOfEducation.MASTER_OR_PROFESSIONNAL_DEGREE]: {
+    id: 'openEdxProfile.levelOfEducation.masterOrProfessionnalDegree',
+    description:
+      'Translation for level of education "master or professional degree" in openEdx profile',
+    defaultMessage: 'Master',
+  },
+  [OpenEdxLevelOfEducation.PHD_OR_DOCTORATE]: {
+    id: 'openEdxProfile.levelOfEducation.phdOrDoctorate',
+    description: 'Translation for level of education "phd or doctorate" in openEdx profile',
+    defaultMessage: 'PHD',
+  },
+  [OpenEdxLevelOfEducation.BACHELOR_DEGREE]: {
+    id: 'openEdxProfile.levelOfEducation.bachelorDegree',
+    description: 'Translation for level of education "bachelor degree" in openEdx profile',
+    defaultMessage: 'Bachelor degree',
+  },
+  [OpenEdxLevelOfEducation.ASSOCIATE_DEGREE]: {
+    id: 'openEdxProfile.levelOfEducation.associateDegree',
+    description: 'Translation for level of education "associate degree" in openEdx profile',
+    defaultMessage: 'Associate degree',
+  },
+  [OpenEdxLevelOfEducation.SECONDARY_OR_HIGH_SCHOOL]: {
+    id: 'openEdxProfile.levelOfEducation.secondaryOrHighSchool',
+    description: 'Translation for level of education "secondary or high school" in openEdx profile',
+    defaultMessage: 'Secondary or high school',
+  },
+  [OpenEdxLevelOfEducation.JUNIOR_SECONDARY_OR_MIDDLE_SCHOOL]: {
+    id: 'openEdxProfile.levelOfEducation.juniorSecondaryOrMiddleSchool',
+    description:
+      'Translation for level of education "junior secondary or middle school" in openEdx profile',
+    defaultMessage: 'Junior secondary or middle school',
+  },
+  [OpenEdxLevelOfEducation.ELEMENTARY_PRIMARY_SCHOOL]: {
+    id: 'openEdxProfile.levelOfEducation.elementaryPrimarySchool',
+    description:
+      'Translation for level of education "elementary primary school" in openEdx profile',
+    defaultMessage: 'Elementary primary school',
+  },
+  [OpenEdxLevelOfEducation.NONE]: {
+    id: 'openEdxProfile.levelOfEducation.none',
+    description: 'Translation for level of education "none" in openEdx profile',
+    defaultMessage: 'None',
+  },
+  [OpenEdxLevelOfEducation.OTHER]: {
+    id: 'openEdxProfile.levelOfEducation.other',
+    description: 'Translation for level of education "other" in openEdx profile',
+    defaultMessage: 'Other',
+  },
+});
+
+export const genderMessages = defineMessages<OpenEdxGender>({
+  [OpenEdxGender.MALE]: {
+    id: 'openEdxProfile.gender.male',
+    description: 'Translation for gender "male" in openEdx profile',
+    defaultMessage: 'Male',
+  },
+  [OpenEdxGender.FEMALE]: {
+    id: 'openEdxProfile.gender.female',
+    description: 'Translation for gender "female" in openEdx profile',
+    defaultMessage: 'Female',
+  },
+  [OpenEdxGender.OTHER]: {
+    id: 'openEdxProfile.gender.other',
+    description: 'Translation for gender "other" in openEdx profile',
+    defaultMessage: 'Other',
+  },
+});
+
+export interface OpenEdxProfile {
+  username: Maybe<string>;
+  name: Maybe<string>;
+  country: Maybe<string>;
+  yearOfBirth: Maybe<string>;
+  levelOfEducation: Maybe<string>;
+  email: Maybe<string>;
+  dateJoined: Maybe<string>;
+  gender: Maybe<string>;
+  language: Maybe<string>;
+  favoriteLanguage: Maybe<string>;
+}
+
+export const parseOpenEdxApiProfile = (
+  intl: IntlShape,
+  data?: OpenEdxApiProfile,
+): OpenEdxProfile => {
+  const [languageCode] = intl.locale.split('-');
+  const defaultValues: OpenEdxProfile = {
+    username: ' - ',
+    name: ' - ',
+    email: ' - ',
+    language: ' - ',
+    country: ' - ',
+    levelOfEducation: ' - ',
+    gender: ' - ',
+    yearOfBirth: ' - ',
+    favoriteLanguage: ' - ',
+    dateJoined: undefined,
+  };
+
+  const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });
+  const parsedData = data
+    ? {
+        username: data.username || defaultValues.username,
+        name: data.name || defaultValues.name,
+        email: data.email || defaultValues.email,
+        yearOfBirth: data.year_of_birth || defaultValues.yearOfBirth,
+        dateJoined: data.date_joined || defaultValues.dateJoined,
+        levelOfEducation: data.level_of_education
+          ? intl.formatMessage(levelOfEducationMessages[data.level_of_education])
+          : defaultValues.levelOfEducation,
+        gender: data.gender
+          ? intl.formatMessage(genderMessages[data.gender])
+          : defaultValues.gender,
+        country: data.country
+          ? countries.getName(data.country, languageCode)
+          : defaultValues.country,
+        language: data['pref-lang'] ? languageNames.of(data['pref-lang']) : defaultValues.language,
+        favoriteLanguage: data.language_proficiencies.length
+          ? languageNames.of(data.language_proficiencies[0].code)
+          : defaultValues.favoriteLanguage,
+      }
+    : defaultValues;
+
+  return parsedData;
+};

package/js/pages/DashboardAddressesManagement/_styles.scss

@@ -1,7 +1,7 @@
 .dashboard-addresses {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: rem-calc(32px);
 
   &__empty {
     text-align: center;

package/js/pages/DashboardAddressesManagement/index.spec.tsx

@@ -11,7 +11,10 @@ import {
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
@@ -21,13 +24,15 @@ import { resolveAll } from 'utils/resolveAll';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectBannerError } from 'utils/test/expectBanner';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { User } from 'types/User';
+import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
-    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    authentication: { backend: 'fonzie', endpoint: 'https://endpoint.test' },
     joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
@@ -37,7 +42,24 @@ jest.mock('utils/indirection/window', () => ({
 }));
 
 describe('<DashAddressesManagement/>', () => {
+  let richieUser: User;
   beforeEach(() => {
+    richieUser = UserFactory().one();
+    const openEdxProfile = OpenEdxApiProfileFactory({
+      username: richieUser.username,
+      email: richieUser.email,
+      name: richieUser.full_name,
+    }).one();
+    const { 'pref-lang': prefLang, ...openEdxAccount } = openEdxProfile;
+
+    fetchMock.get(
+      `https://endpoint.test/api/user/v1/accounts/${richieUser.username}`,
+      openEdxAccount,
+    );
+    fetchMock.get(`https://endpoint.test/api/user/v1/preferences/${richieUser.username}`, {
+      'pref-lang': prefLang,
+    });
+
     fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
   });
@@ -51,7 +73,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -73,7 +95,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -96,7 +118,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -142,7 +164,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -194,7 +216,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -218,7 +240,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -245,7 +267,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', addresses);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -270,7 +292,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -293,7 +315,7 @@ describe('<DashAddressesManagement/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [address]);
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
@@ -323,7 +345,7 @@ describe('<DashAddressesManagement/>', () => {
 
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
           <IntlProvider locale="en">
             <SessionProvider>
               <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />

package/js/pages/DashboardAddressesManagement/index.tsx

@@ -7,6 +7,7 @@ import { Icon, IconTypeEnum } from 'components/Icon';
 import { Spinner } from 'components/Spinner';
 import { useAddressesManagement } from 'hooks/useAddressesManagement';
 import { Address } from 'types/Joanie';
+import { DashboardBox } from 'widgets/Dashboard/components/DashboardBox';
 import { DashboardAddressBox } from './DashboardAddressBox';
 
 const messages = defineMessages({
@@ -72,15 +73,19 @@ export const DashboardAddressesManagement = ({
                 <FormattedMessage {...messages.emptyList} />
               </p>
             )}
-            {addressesList.map((address) => (
-              <DashboardAddressBox
-                key={address.id}
-                address={address}
-                edit={(_address) => onClickEdit?.(_address)}
-                remove={remove}
-                promote={promote}
-              />
-            ))}
+            {addressesList.length > 0 && (
+              <DashboardBox.List>
+                {addressesList.map((address) => (
+                  <DashboardAddressBox
+                    key={address.id}
+                    address={address}
+                    edit={(_address) => onClickEdit?.(_address)}
+                    remove={remove}
+                    promote={promote}
+                  />
+                ))}
+              </DashboardBox.List>
+            )}
             <Button color="secondary" fullWidth onClick={() => onClickCreate?.()}>
               <Icon name={IconTypeEnum.PLUS} className="button__icon" />
               <FormattedMessage {...messages.add} />