@logora/debate 0.1.0

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.module.scss

@@ -0,0 +1,176 @@
+@use "styles/spacing" as spacing;
+@use "styles/theme" as theme;
+@use "styles/flex" as flex;
+@use "styles/display" as display;
+
+.container {
+  display: flex !important;
+  @include flex.flex-direction(column, xs);
+  @include flex.flex-direction(row, sm);
+  @include flex.align-items(flex-start, sm);
+  @include flex.align-items(center, xs);
+  @include spacing.mb(4, xs);
+}
+
+.nameContainer {
+  display: flex !important;
+  @include flex.flex-direction(column, xs);
+  @include flex.flex-direction(row, sm);
+  @include flex.align-items(flex-start, sm);
+  @include flex.justify-content(center, xs);
+  @include flex.justify-content(flex-start, sm);
+  gap: spacing.$spacer;
+}
+
+.inputsContainer {
+  margin-left: spacing.$spacer-xl;
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacer;
+  @include display.media-breakpoint-down(xs) {
+    margin-left: 0;
+    margin-top: spacing.$spacer-xl;
+  }
+}
+
+.hint {
+  width: 100%;
+  font-size: theme.$font-size-small;
+  color: theme.$text-secondary;
+}
+
+.langSelect {
+  width: 100%;
+}
+
+.textArea {
+  width: 100%;
+  height: 100px;
+  box-sizing: border-box;
+  outline: 0;
+  padding: 0.69em 1em;
+  font-size: inherit;
+  font-family: inherit;
+  border: theme.$box-border;
+  box-shadow: theme.$box-shadow;
+  border-radius: theme.$box-border-radius;
+  background-color: theme.$background-color-primary;
+  color: theme.$text-primary;
+
+  // when no content in the input and not focused, display the label as the placeholder
+  &:placeholder-shown:not(:focus) {
+    & ~ label {
+      transition: top 300ms, font-size 300ms, padding-top 300ms, transform 300ms,
+        color 300ms ease-in-out;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 1em;
+      background-color: unset;
+    }
+  }
+
+  // keep precedence! filled < hover < success < error < disabled
+  &.filled {
+    background-color: theme.$background-color-secondary;
+  }
+  &::placeholder {
+    color: theme.$text-secondary;
+  }
+  &:hover {
+    border: 1px solid theme.$text-secondary;
+  }
+  &:focus {
+    border: 1px solid theme.$text-secondary !important;
+    background-color: theme.$background-color-primary;
+    & ~ label {
+      color: theme.$text-secondary !important;
+    }
+  }
+
+  &.success {
+    border: 1px solid theme.$success-primary !important;
+    & ~ label {
+      color: theme.$success-primary;
+    }
+  }
+  &.error {
+    border: 1px solid theme.$cancel-primary !important;
+    & ~ label {
+      color: theme.$cancel-primary;
+    }
+  }
+  &:disabled {
+    cursor: not-allowed;
+    background-color: theme.$text-tertiary;
+    border: 1px solid theme.$darken-text-tertiary;
+    & ~ label {
+      color: theme.$darkest-text-tertiary;
+    }
+  }
+}
+
+.userSaveBox {
+  float: right;
+  margin-top: spacing.$spacer;
+}
+
+.dialog {
+  margin-bottom: spacing.$spacer;
+}
+
+// PROFILE PICTURE
+.userPictureUpload {
+  width: 160px;
+  height: 160px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #666;
+  border-radius: 50%;
+  margin-bottom: spacing.$spacer;
+  object-fit: cover;
+  @include display.media-breakpoint-down(xs) {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.userImageContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.formFooterTerms {
+  @include spacing.mt(3, xs);
+  font-size: theme.$font-size-small;
+  text-align: center;
+}
+
+.termsLink {
+  color: theme.$call-primary !important;
+}
+
+.backButton {
+  width: max-content;
+  margin-top: spacing.$spacer-xl;
+  border-bottom: 1px solid theme.$text-secondary;
+  cursor: pointer;
+}
+
+.toggle {
+  @include spacing.mt(3, xs);
+  color: theme.$text-primary;
+}
+
+.toggle .cgu {
+  color: theme.$text-primary;
+  font-weight: theme.$font-weight-bold;
+  text-decoration: underline !important;
+}
+
+.required {
+  color: theme.$cancel-primary;
+  @include spacing.mt(3, xs);
+  font-size: theme.$font-size-small;
+}

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.stories.jsx

@@ -0,0 +1,113 @@
+export default {
+    title: 'User/Update User Info Modal',
+    component: UpdateUserInfoModal,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { UpdateUserInfoModal } from './UpdateUserInfoModal';
+import { IntlProvider } from 'react-intl';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthProvider, AuthContext } from '@logora/debate/auth/use_auth';
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const httpClient = {
+    get: () => null,
+    post: () => null,
+    patch: () => { return new Promise((resolve, reject) => {
+            resolve(
+                {
+                    status: 200, 
+                    data: {
+                        success: true,
+                        data: {
+                            language: "fr",
+                            first_name: "Test",
+                            last_name: "Test"
+                        }
+                    }
+                } 
+            );
+        });
+    },
+};
+
+const currentUser = {
+    id: faker.number.int(),
+    full_name: faker.person.fullName(),
+    first_name: faker.person.firstName(),
+    last_name: faker.person.lastName(),
+    description: faker.person.jobTitle(),
+    image_url: faker.image.avatarGitHub(),
+    points: faker.number.int()
+}
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+export const DefaultUpdateUserInfoModal = () => {
+    return (
+        <div style={{ width: "850px", height: "300px" }}>
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}] }}}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthProvider>
+                                    <UpdateUserInfoModal />
+                                </AuthProvider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        </div>
+    );
+};
+
+export const UpdateUserInfoModalWithTermsAndConsent = () => {
+    return (
+        <div style={{ width: "850px", height: "300px" }}>
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}] }}}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthProvider>
+                                    <UpdateUserInfoModal 
+                                        showEmailConsent={true}
+                                        showTerms={true}
+                                    />
+                                </AuthProvider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        </div>
+    );
+};
+
+export const UpdateUserInfoModalWithInfos = () => {
+    return (
+        <div style={{ width: "850px", height: "300px" }}>
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}] }}}>
+                    <IconProvider library={regularIcons}>
+                        <IntlProvider locale="en">
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IntlProvider>
+                    </IconProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        </div>
+    );
+};

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.test.jsx

@@ -0,0 +1,213 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from '@testing-library/user-event';
+import { UpdateUserInfoModal } from "./UpdateUserInfoModal";
+import { IntlProvider } from 'react-intl';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ModalProvider } from "@logora/debate/dialog/modal";
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const httpClient = {
+    get: vi.fn(),
+    post: vi.fn(),
+    patch: vi.fn()
+};
+
+const currentUser = {
+    id: faker.number.int(),
+    full_name: faker.person.fullName(),
+    image_url: faker.image.avatarGitHub(),
+    points: faker.number.int()
+}
+
+const currentUserWithInfos = {
+    id: faker.number.int(),
+    full_name: faker.person.fullName(),
+    first_name: faker.person.firstName(),
+    last_name: faker.person.lastName(),
+    description: faker.person.jobTitle(),
+    image_url: faker.image.avatarGitHub(),
+    points: faker.number.int()
+}
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+beforeAll(() => {
+    HTMLDialogElement.prototype.showModal = function () {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function () {
+      this.removeAttribute("open");
+    };
+  });
+
+describe("UpdateUserInfoModal", () => {
+    it("should appear normally", async () => {
+        const { queryByText } = render(
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        );
+        expect(queryByText("Last name")).toBeInTheDocument();
+        expect(queryByText("First name")).toBeInTheDocument();
+        expect(queryByText("0")).toBeInTheDocument();
+        expect(queryByText("Update your profile")).toBeInTheDocument();
+        expect(queryByText("Select an avatar")).toBeInTheDocument();
+        expect(queryByText("Save")).toBeInTheDocument();
+        expect(queryByText("I declare I have read the General Conditions of Use and the Privacy policy of the debate space and accept them.")).not.toBeInTheDocument();
+        expect(queryByText("I agree to receive emails from the editor")).not.toBeInTheDocument();
+    });
+
+    it("should appear with terms and consent", async () => {
+        const { queryByText } = render(
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal 
+                                        showEmailConsent
+                                        showTerms
+                                    />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        );
+        expect(queryByText("Last name")).toBeInTheDocument();
+        expect(queryByText("First name")).toBeInTheDocument();
+        expect(queryByText("0")).toBeInTheDocument();
+        expect(queryByText("Update your profile")).toBeInTheDocument();
+        expect(queryByText("Select an avatar")).toBeInTheDocument();
+        expect(queryByText("Save")).toBeInTheDocument();
+        expect(queryByText(/I declare I have read the /i)).toBeInTheDocument();
+        expect(queryByText(/ of the debate space and accept them./i)).toBeInTheDocument();
+        expect(queryByText("I agree to receive emails from the editor")).toBeInTheDocument();
+    });
+
+    it("should throw an error if the name field is less than 2 characters", async () => {
+        const { getByTestId, queryByText } = render(
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        );
+
+        const saveButton = getByTestId('save-button');
+        await userEvent.click(saveButton)
+        expect(queryByText("first_name is too short.")).toBeInTheDocument();
+        expect(queryByText("last_name is too short.")).toBeInTheDocument();
+    });
+
+    it("should display back button when choosing an avatar", async () => {
+        const { getByTestId, queryByText } = render(
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal 
+                                        showEmailConsent
+                                        showTerms
+                                    />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        );
+        
+        const avatarButton = getByTestId('avatar-button');
+        await userEvent.click(avatarButton)
+
+        expect(queryByText("Back")).toBeInTheDocument();
+    });
+
+    it("should throw an error if the terms are not accepted", async () => {
+        const { getByTestId, queryByText } = render(
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal 
+                                        showEmailConsent
+                                        showTerms
+                                    />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </ModalProvider>
+        );
+        
+        const firstName = getByTestId('first-name');
+        await userEvent.click(firstName)
+        await userEvent.keyboard("First name")
+
+        const lastName = getByTestId('last-name');
+         await userEvent.click(lastName)
+        await userEvent.keyboard("Last name")
+
+        const saveButton = getByTestId('save-button');
+        await userEvent.click(saveButton)
+        expect(queryByText("accepts_terms must be true.")).toBeInTheDocument();
+    });
+
+    it("should displays the current user's info", async () => {
+        const { getByTestId} = render(
+            <ModalProvider>
+                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
+                    <IntlProvider locale="en">
+                        <IconProvider library={regularIcons}>
+                            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                <AuthContext.Provider value={{ currentUser: currentUserWithInfos, isLoggedIn: true }}>
+                                    <UpdateUserInfoModal />
+                                </AuthContext.Provider>
+                            </DataProviderContext.Provider>
+                        </IconProvider>
+                    </IntlProvider>
+                </ConfigProvider>
+            </ModalProvider> 
+        );
+
+        const firstName = getByTestId('first-name');
+        expect(firstName.value).toBe(currentUserWithInfos.first_name);
+
+        const lastName = getByTestId('last-name');
+        expect(lastName.value).toBe(currentUserWithInfos.last_name);
+
+        const description = getByTestId('description');
+        expect(description.value).toBe(currentUserWithInfos.description);
+    });
+});

package/src/components/user/update_user_info_modal/index.js

@@ -0,0 +1,2 @@
+export { UpdateUserInfoModal } from "./UpdateUserInfoModal";
+export { useUpdateUserInfo } from "./useUpdateUserInfo";

package/src/components/user/update_user_info_modal/useUpdateUserInfo.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useModal } from "@logora/debate/dialog/modal";
+import { useConfig } from "@logora/debate/data/config_provider";
+import { UpdateUserInfoModal } from "./UpdateUserInfoModal";
+
+export const useUpdateUserInfo = () => {
+	const { currentUser, isLoggedIn } = useAuth();
+	const { showModal, isModalPresent } = useModal();
+	const config = useConfig();
+
+	const showUpdateUserInfoModal = () => {
+		showModal(
+			<UpdateUserInfoModal
+				showEmailConsent={config.auth?.showEmailConsent}
+				showTerms={config.auth?.hideCgu !== true}
+				termsUrl={
+					config.provider?.cguUrl || "https://www.logora.com/blog-posts/cgu"
+				}
+				privacyUrl={
+					config.provider?.privacyUrl ||
+					"https://www.logora.com/blog-posts/privacy-policy"
+				}
+			/>,
+		);
+	};
+
+	useEffect(() => {
+		if (
+			!isModalPresent &&
+			isLoggedIn &&
+			currentUser.is_onboarded === false &&
+			config.auth?.showOnboarding === true
+		) {
+			showUpdateUserInfoModal();
+		}
+	}, [isModalPresent, isLoggedIn, config.auth?.showOnboarding]);
+
+	return null;
+};

package/src/components/user/user_box/UserBox.docs.mdx

@@ -0,0 +1,21 @@
+---
+description: A component that renders an user box.
+---
+
+import { UserBox } from './UserBox';
+
+A component that renders a user box. It renders a profile image, a full name and a description.
+
+### Component usage
+```js
+import { UserBox } from '@logora/user.user_box';
+```
+```js
+<BrowserRouter>
+    <IntlProvider locale="en">
+        <ConfigProvider routes={{...routes}}>
+            <UserBox user={user} />
+        </ConfigProvider>
+    </IntlProvider>
+</BrowserRouter>
+```

package/src/components/user/user_box/UserBox.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
+import { Link } from '@logora/debate/action/link';
+import { useRoutes } from '@logora/debate/data/config_provider';
+import { Avatar } from '@logora/debate/user/avatar';
+import styles from './UserBox.module.scss';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+export const UserBox = ({ user }) => {
+	const intl = useIntl();
+	const routes = useRoutes();
+
+	return (
+		<div className={cx(styles.userBox, "author-box")}>
+			<div className={styles.userBoxHeader}>
+				<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })} aria-label={intl.formatMessage({ id: "user.user_box.author_link.aria_label", defaultMessage: "View profile" })}>
+					<Avatar data-tid={"action_view_user_image"} userName={user.full_name} avatarUrl={user.image_url} isOnline={(new Date(user.last_activity) > Date.now())} size={60} />
+				</Link>
+			</div>
+			<div className={styles.userBoxDescription}>
+				<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })}>
+					<div data-tid={"action_view_user_name"} className={styles.userBoxName} title={user.full_name}>
+						{user.full_name}
+					</div>
+				</Link>
+				{user.role === 'contributor' && (
+					<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })} hash={"activity"}>
+						<div className={styles.userBoxPoints}>
+							<span>
+								<FormattedMessage
+									id="user.user_box.points"
+									values={{ count: user.points }}
+									defaultMessage="{count} points"
+								/>
+							</span>
+						</div>
+					</Link>
+				)}
+				<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })}>
+					<div className={styles.userBoxStats}>
+						<div className={styles.userDebates}>
+							<FormattedMessage id="user.user_box.user_arguments" values={{ count: user.messages_count }} defaultMessage="{count} arguments" />
+						</div>
+						<div className={styles.userVotes}>
+							<FormattedMessage id="user.user_box.user_votes" values={{ count: user.upvotes }} defaultMessage="{count} votes" />
+						</div>
+					</div>
+				</Link>
+			</div>
+		</div>
+	);
+}
+
+UserBox.propTypes = {
+	/** User object, must contains : image_url, last_activity, full_name, points, hash_id, messages_count, upvotes */
+	user: PropTypes.object,
+}