richie-education 3.2.2-dev43 → 3.2.2-dev52

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx

@@ -11,6 +11,9 @@ import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
 import { PaymentSchedule, ProductType } from 'types/Joanie';
 import { usePaymentPlan } from 'hooks/usePaymentPlan';
 import { HttpError } from 'utils/errors/HttpError';
+import { APIBackend, KeycloakAccountApi } from 'types/api';
+import context from 'utils/context';
+import { AuthenticationApi } from 'api/authentication';
 
 const messages = defineMessages({
   title: {
@@ -49,6 +52,31 @@ const messages = defineMessages({
     defaultMessage:
       'This email will be used to send you confirmation mails, it is the one you created your account with.',
   },
+  keycloakUsernameLabel: {
+    id: 'components.SaleTunnel.Information.keycloak.account.label',
+    description: 'Label for the name',
+    defaultMessage: 'Account name',
+  },
+  keycloakUsernameInfo: {
+    id: 'components.SaleTunnel.Information.keycloak.account.info',
+    description: 'Info for the name',
+    defaultMessage: 'This name will be used in legal documents.',
+  },
+  keycloakEmailInfo: {
+    id: 'components.SaleTunnel.Information.keycloak.email.info',
+    description: 'Info for the email',
+    defaultMessage: 'This email will be used to send you confirmation mails.',
+  },
+  keycloakAccountLinkInfo: {
+    id: 'components.SaleTunnel.Information.keycloak.updateLinkInfo',
+    description: 'Text before the keycloak account update link',
+    defaultMessage: 'If any of the information above is incorrect,',
+  },
+  keycloakAccountLinkLabel: {
+    id: 'components.SaleTunnel.Information.keycloak.updateLinkLabel',
+    description: 'Label of the keycloak link to update account',
+    defaultMessage: 'please update your account',
+  },
   voucherTitle: {
     id: 'components.SaleTunnel.Information.voucher.title',
     description: 'Title for the voucher',
@@ -130,6 +158,8 @@ export const SaleTunnelInformationSingular = () => {
     setNeedsPayment(!fromBatchOrder);
   }, [fromBatchOrder, setNeedsPayment]);
 
+  const isKeycloakBackend = context?.authentication.backend === APIBackend.KEYCLOAK;
+
   return (
     <>
       <div>
@@ -148,11 +178,17 @@ export const SaleTunnelInformationSingular = () => {
           <div className="description mb-s">
             <FormattedMessage {...messages.description} />
           </div>
-          <OpenEdxFullNameForm />
           <AddressSelector />
-          <div className="mt-s">
-            <Email />
-          </div>
+          {isKeycloakBackend ? (
+            <KeycloakAccountEdit />
+          ) : (
+            <>
+              <OpenEdxFullNameForm />
+              <div className="mt-s">
+                <Email />
+              </div>
+            </>
+          )}
         </div>
       )}
       <div>
@@ -163,6 +199,51 @@ export const SaleTunnelInformationSingular = () => {
   );
 };
 
+const KeycloakAccountEdit = () => {
+  const accountApi = AuthenticationApi!.account as KeycloakAccountApi;
+  const { user } = useSession();
+
+  return (
+    <>
+      <div className="mt-s">
+        <div className="sale-tunnel__username">
+          <div className="sale-tunnel__username__top">
+            <h4>
+              <FormattedMessage {...messages.keycloakUsernameLabel} />
+            </h4>
+            <div className="fw-bold">{user?.username}</div>
+          </div>
+          <div className="sale-tunnel__username__description">
+            <FormattedMessage {...messages.keycloakUsernameInfo} />
+          </div>
+        </div>
+      </div>
+      <div className="mt-s">
+        <div className="sale-tunnel__email">
+          <div className="sale-tunnel__email__top">
+            <h4>
+              <FormattedMessage {...messages.emailLabel} />
+            </h4>
+            <div className="fw-bold">{user?.email}</div>
+          </div>
+          <div className="sale-tunnel__email__description">
+            <FormattedMessage {...messages.keycloakEmailInfo} />
+          </div>
+        </div>
+      </div>
+      <div className="mt-s">
+        <div className="sale-tunnel__account-link">
+          <FormattedMessage {...messages.keycloakAccountLinkInfo} />{' '}
+          <a href={accountApi.updateUrl()}>
+            <FormattedMessage {...messages.keycloakAccountLinkLabel} />
+          </a>
+          .
+        </div>
+      </div>
+    </>
+  );
+};
+
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({

package/js/components/SaleTunnel/_styles.scss

@@ -67,6 +67,7 @@
     }
   }
 
+  &__username,
   &__email {
     &__top {
       display: flex;
@@ -82,6 +83,13 @@
       font-size: 0.75rem;
     }
   }
+
+  &__account-link {
+    a {
+      color: r-theme-val(sale-tunnel, account-link-color);
+      text-decoration: underline;
+    }
+  }
   .price--striked {
     text-decoration: line-through;
     opacity: 0.5;

package/js/components/SaleTunnel/index.spec.tsx

@@ -36,6 +36,8 @@ import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { StringHelper } from 'utils/StringHelper';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { AuthenticationApi } from 'api/authentication';
+import { APIAuthentication } from 'types/api';
 import { Deferred } from 'utils/test/deferred';
 
 jest.mock('utils/context', () => ({
@@ -850,3 +852,119 @@ describe.each([
     expect(screen.queryByText('DISCOUNT30')).not.toBeInTheDocument();
   });
 });
+
+describe('SaleTunnel with Keycloak backend', () => {
+  const mockAccountUpdateUrl = 'https://keycloak.test/auth/realms/richie-realm/account';
+  const course = PacedCourseFactory().one();
+  let richieUser: User;
+  let originalBackend: string;
+  let originalAccount: APIAuthentication['account'];
+
+  const Wrapper = (props: Omit<SaleTunnelProps, 'isOpen' | 'onClose'>) => {
+    const [open, setOpen] = useState(true);
+    return <SaleTunnel {...props} course={course} isOpen={open} onClose={() => setOpen(false)} />;
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllTimers();
+    jest.resetAllMocks();
+
+    fetchMock.restore();
+    sessionStorage.clear();
+
+    richieUser = UserFactory({
+      username: 'John Doe',
+      email: 'johndoe@example.com',
+    }).one();
+
+    // Mock OpenEdx profile endpoints that may still be triggered by the fonzie-based
+    // AuthenticationApi (resolved at module load). These should not be called by
+    // the keycloak code paths we are testing.
+    fetchMock.get(`begin:https://auth.test/api/user/v1/accounts/`, {});
+    fetchMock.get(`begin:https://auth.test/api/user/v1/preferences/`, {});
+
+    // Temporarily switch context to keycloak backend
+    const context = require('utils/context').default;
+    originalBackend = context.authentication.backend;
+    context.authentication.backend = 'keycloak';
+
+    // Add keycloak account methods to AuthenticationApi
+    originalAccount = AuthenticationApi!.account;
+    AuthenticationApi!.account = {
+      get: () => ({
+        username: 'johndoe',
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'johndoe@example.com',
+      }),
+      updateUrl: () => mockAccountUpdateUrl,
+    };
+  });
+
+  // Must be called after beforeEach so fetchMock.restore() doesn't clear joanie mocks
+  setupJoanieSession();
+
+  afterEach(() => {
+    // Restore original backend and account
+    const context = require('utils/context').default;
+    context.authentication.backend = originalBackend;
+    AuthenticationApi!.account = originalAccount;
+
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    jest.useRealTimers();
+    cleanup();
+  });
+
+  it('should render keycloak account name, email, and update link instead of OpenEdx profile', async () => {
+    const product = CredentialProductFactory().one();
+    const paymentPlan = PaymentPlanFactory().one();
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
+          course_code: course.code,
+          product_id: product.id,
+          state: NOT_CANCELED_ORDER_STATES,
+        })}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
+      );
+
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // Should display the "Account name" heading
+    await screen.findByRole('heading', { level: 4, name: 'Account name' });
+
+    // Should display the username from the session
+    screen.getByText(richieUser.username);
+
+    // Should display the username info
+    screen.getByText('This name will be used in legal documents.');
+
+    // Should display the email from the session
+    screen.getByText(richieUser.email!);
+
+    // Should display the email info
+    screen.getByText('This email will be used to send you confirmation mails.');
+
+    // Should display the keycloak account update link (only the link part)
+    const updateLink = screen.getByRole('link', {
+      name: 'please update your account',
+    });
+    expect(updateLink).toHaveAttribute('href', mockAccountUpdateUrl);
+
+    // Should NOT render the OpenEdx full name form
+    expect(screen.queryByLabelText('First name and last name')).not.toBeInTheDocument();
+
+    // No OpenEdx profile API calls should have been made
+    expect(fetchMock.calls().filter(([url]) => url.includes('/api/user/v1/'))).toHaveLength(0);
+  });
+});

package/js/hooks/useOpenEdxProfile/index.ts

@@ -7,6 +7,7 @@ import { useSessionMutation } from 'utils/react-query/useSessionMutation';
 import { OpenEdxFullNameFormValues } from 'components/OpenEdxFullNameForm';
 import { HttpError } from 'utils/errors/HttpError';
 import { TSessionQueryKey } from 'utils/react-query/useSessionKey';
+import { OpenEdxAccountApi } from 'types/api';
 import { OpenEdxProfile, parseOpenEdxApiProfile } from './utils';
 
 const messages = defineMessages({
@@ -61,7 +62,8 @@ const useOpenEdxProfile = (
 
   const queryFn: () => Promise<OpenEdxProfile> = useCallback(async () => {
     try {
-      const openEdxApiProfile = await AuthenticationApi!.account!.get(username);
+      const account = AuthenticationApi!.account as OpenEdxAccountApi;
+      const openEdxApiProfile = await account.get(username);
       return parseOpenEdxApiProfile(intl, openEdxApiProfile);
     } catch {
       setError(intl.formatMessage(messages.errorGet));
@@ -79,7 +81,7 @@ const useOpenEdxProfile = (
   const writeHandlers = {
     update: mutation({
       mutationFn: (data: OpenEdxFullNameFormValues) =>
-        AuthenticationApi!.account!.update(username, data),
+        (AuthenticationApi!.account as OpenEdxAccountApi).update(username, data),
       onSuccess,
       onError: () => setError(intl.formatMessage(messages.errorUpdate)),
     }),

package/js/index.tsx

@@ -119,7 +119,7 @@ async function render() {
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <IntlProvider locale={locale} messages={translatedMessages} defaultLocale="en-US">
-          <Root richieReactSpots={richieReactSpots} />
+          <Root richieReactSpots={richieReactSpots} locale={locale} />
         </IntlProvider>
       </QueryClientProvider>,
     );