@logora/debate 0.1.0

package/src/components/user/avatar_selector/AvatarSelector.module.scss

@@ -0,0 +1,105 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.title {
+    font-size: theme.$font-size-extra-small;
+    text-transform: uppercase;
+    @include spacing.mb(3, xs);
+    &.avatarListTitle {
+        @include spacing.pt(3, xs);
+        @include spacing.mt(3, xs);
+        @include spacing.mb(2, xs);
+        border-top: 1px solid theme.$background-color-secondary;
+    }
+}
+
+.uploadAvatarContainer {
+    display: flex !important;
+    align-items: center !important;
+}
+
+.imageInput {
+    display: none;
+}
+
+.imageInputLabel {
+    height: fit-content !important;
+    @include spacing.p(2, xs);
+    border: 1px solid theme.$call-primary !important;
+    border-radius: theme.$box-border-radius !important;
+    cursor: pointer !important;
+    color: theme.$call-primary !important;
+    &:hover {
+        opacity: .7;
+    }
+}
+
+.avatarList {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+    grid-gap: 30px;
+    overflow: auto;
+    max-height: 350px;
+    @include spacing.px(1, xs);
+    @include spacing.py(1, xs);
+    &.userChoice {
+        padding-bottom: 60px !important;
+    }
+}
+
+.cancelSelection {
+    width: fit-content;
+    @include spacing.px(3, xs);
+    @include spacing.py(2, xs);
+    @include spacing.mb(2, xs);
+    background-color: theme.$background-color-secondary;
+    color: theme.$text-secondary;
+    border-radius: 30px;
+    font-size: theme.$font-size-extra-small;
+    cursor: pointer;
+    &:hover {
+        opacity: .7;
+    }
+}
+
+.avatar {
+    cursor: pointer;
+    &.selected {
+        box-shadow: 0 0 0 3px theme.$success-primary;
+        box-sizing: border-box;
+    }
+}
+
+.uploadedAvatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    @include spacing.mr(2, xs);
+    object-fit: cover;
+}
+
+.chosenAvatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.confirm {
+    display: flex !important;
+    gap: 20px;
+    justify-content: center;
+    background-color: theme.$background-color-primary;
+    @include spacing.p(2.5, xs);
+    @include spacing.pr(0, xs);
+    @include spacing.mt(1, xs);
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 2;
+    width: 100%;
+}
+
+.button {
+    text-transform: uppercase;
+}

package/src/components/user/avatar_selector/AvatarSelector.stories.jsx

@@ -0,0 +1,46 @@
+export default {
+    title: 'User/Avatar Selector',
+    component: AvatarSelector,
+    args: {},
+    argTypes: {}
+};
+
+import React from "react";
+import { AvatarSelector } from "./AvatarSelector";
+import { IntlProvider } from "react-intl";
+import { faker } from '@faker-js/faker';
+
+const avatarUrlList = [faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub()];
+
+const handleChooseAvatar = (avatar) => {
+    console.log(`Chosen avatar: ${avatar}`);
+};
+
+export const DefaultAvatarSelector = () => {
+    return (
+        <div style={{width:"500px", height: "300px"}}>
+            <IntlProvider locale="en">
+                <AvatarSelector
+                    onChooseAvatar={handleChooseAvatar}
+                    avatarUrlList={avatarUrlList}
+                    userName={"User Name"}
+                />
+            </IntlProvider>
+        </div>
+    );
+};
+
+export const AllowUserImageAvatarSelector = () => {
+    return (
+        <div style={{width:"500px", height: "300px"}}>
+            <IntlProvider locale="en">
+                <AvatarSelector
+                    onChooseAvatar={handleChooseAvatar}
+                    avatarUrlList={avatarUrlList}
+                    userName={"User Name"}
+                    allowUserImage
+                />
+            </IntlProvider>
+        </div>
+    );
+};

package/src/components/user/avatar_selector/AvatarSelector.test.jsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { render, screen, act, waitFor } from "@testing-library/react";
+import { DefaultAvatarSelector } from "./AvatarSelector.stories";
+import { AllowUserImageAvatarSelector } from "./AvatarSelector.stories";
+import { AvatarSelector } from "./AvatarSelector";
+import { faker } from '@faker-js/faker';
+import { IntlProvider } from "react-intl";
+import userEvent from '@testing-library/user-event';
+
+const avatarUrlList = [faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub()];
+const file = new File(['hello'], 'hello.png', {type: 'image/png'})
+
+describe("AvatarSelector", () => {
+
+    it("should render with all images", () => {
+        render(<DefaultAvatarSelector />);
+        const images = screen.getAllByTestId("avatar");
+        expect(images.length).toBe(17);
+    });
+
+    it("should trigger callback with user validation", async () => {
+        const onChooseCallback = vi.fn();
+
+        render(
+            <IntlProvider locale="en">
+                <AvatarSelector 
+                    onChooseAvatar={onChooseCallback}
+                    avatarUrlList={avatarUrlList}
+                    userName={"User Name"}
+                />
+            </IntlProvider>
+        );
+
+        const images = screen.getAllByTestId("avatar");
+        const chosenAvatar = images[0];
+
+        await userEvent.click(chosenAvatar);
+
+        const button = screen.getByRole("button");
+        await userEvent.click(button);
+        expect(onChooseCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it("should render with upload input and avatar list", () => {
+        render(<AllowUserImageAvatarSelector />);
+
+        const images = screen.getAllByTestId("avatar");
+        expect(images.length).toBe(17);
+        expect(screen.getByText("Import image of your choice")).toBeInTheDocument();
+        expect(screen.getByText("Or choose from one of our avatars")).toBeInTheDocument();
+        expect(screen.getByText("Upload an image")).toBeInTheDocument();
+    });
+
+    it("should render cancel button", async () => {
+        render(<AllowUserImageAvatarSelector />);
+        
+        const images = screen.getAllByTestId("avatar");
+        const chosenAvatar = images[0];
+
+        await userEvent.click(chosenAvatar);
+        expect(screen.getByText("Cancel selection")).toBeInTheDocument();
+    });
+
+    it("should handle image upload", async () => {
+        const onChooseCallback = vi.fn();
+        render(
+            <IntlProvider locale="en">
+                <AvatarSelector 
+                    onChooseAvatar={onChooseCallback}
+                    avatarUrlList={avatarUrlList}
+                    userName={"User Name"}
+                    allowUserImage
+                />
+            </IntlProvider>
+        );
+        
+        const fileInput = screen.getByTestId("avatar-input");
+        act(() => {
+            userEvent.upload(fileInput, file);
+        });
+
+        await waitFor(() => screen.getByTestId("upload-avatar"));
+
+        const uploadedAvatarPreview = screen.getByTestId("upload-avatar");
+        expect(uploadedAvatarPreview).toBeInTheDocument();
+
+        const confirmButton = screen.getByRole("button");
+        expect(confirmButton).toBeEnabled();
+
+        await userEvent.click(confirmButton);
+
+        await waitFor(() => {
+            expect(onChooseCallback).toHaveBeenCalledTimes(1);
+        });
+
+        expect(onChooseCallback).toHaveBeenCalledWith(file);
+    });
+});

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

@@ -0,0 +1 @@
+export { AvatarSelector } from "./AvatarSelector";

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.docs.mdx

@@ -0,0 +1,22 @@
+---
+description: A modal to select name and language for user profile.
+labels: ["modal", "onboarding"]
+---
+
+A modal component that allows users to select his first name, last name and language.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```jsx
+import UpdateUserInfoModal from '@logora/debate.user.update_user_info_modal';
+
+<ModalProvider>
+    <IntlProvider locale="en">
+        <AuthProvider>
+            <UpdateUserInfoModal />
+        </AuthProvider>
+    </IntlProvider>
+</ModalProvider>
+```

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

@@ -0,0 +1,254 @@
+import React, { useState } from 'react';
+import { useResponsive } from '@logora/debate/hooks/use_responsive';
+import { Modal, useModal } from '@logora/debate/dialog/modal';
+import { useDataProvider } from '@logora/debate/data/data_provider';
+import { useIntl, FormattedMessage } from "react-intl";
+import { useAuth } from '@logora/debate/auth/use_auth';
+import { useConfig } from '@logora/debate/data/config_provider';
+import { useFormValidation } from '@logora/debate/forms/use_form_validation';
+import { Icon } from '@logora/debate/icons/icon';
+import { AvatarSelector } from '@logora/debate/user/avatar_selector';
+import { Button } from '@logora/debate/action/button';
+import { TextInput } from '@logora/debate/input/text_input';
+import { Select } from '@logora/debate/input/select';
+import { Loader } from '@logora/debate/progress/loader';
+import { Toggle } from "@logora/debate/input/toggle";
+import styles from './UpdateUserInfoModal.module.scss';
+import PropTypes from "prop-types";
+
+export const UpdateUserInfoModal = ({ termsUrl, privacyUrl, showEmailConsent = false, showTerms = false }) => {
+    const auth = useAuth();
+    const api = useDataProvider();
+    const intl = useIntl();
+    const config = useConfig();
+
+    const avatarUrlList = [...Array(config.avatars?.maxFileName || 0).keys()].map(j => `${config.avatars?.baseUrl}/${j+1}.${config.avatars?.fileExtension}`);
+
+    const [firstName, setFirstName] = useState(auth.currentUser.first_name || '');
+    const [description, setDescription] = useState(auth.currentUser.description || '');
+    const [lastName, setLastName] = useState(auth.currentUser.last_name || '');
+    const [lang, setLang] = useState(auth.currentUser.language);
+    const [showAvatars, setShowAvatars] = useState(false);
+    const [previewPictureBase64, setPreviewPictureBase64] = useState(auth.currentUser.image_url);
+    const [previewPicture, setPreviewPicture] = useState(null);
+    const [avatarUpload, setAvatarUpload] = useState(false);
+    const [isUpdating, setIsUpdating] = useState(false);
+    const { isMobile } = useResponsive();
+    const { errors, validate } = useFormValidation();
+    const { hideModal } = useModal();
+    const [acceptsTerms, setAcceptsTerms] = useState(false);
+    const [acceptsProviderEmail, setAcceptsProviderEmail] = useState(false);
+
+    const displayPreview = (uri) => {
+		const reader = new FileReader();
+		reader.onloadend = () => { setPreviewPictureBase64(reader.result) }
+		reader.readAsDataURL(uri);
+	}
+
+    const validationRules = [
+        { first_name: ["required", null] }, 
+        { first_name: ["minChar", 2] }, 
+        { last_name: ["required", null] }, 
+        { last_name: ["minChar", 2] }, 
+        { language: ["required", null] },
+        ...( showTerms ? [{ accepts_terms: ["enforceValue", true] }] : [])
+    ]
+
+    const submit = (event) => {
+        event.preventDefault();
+        const data = {};
+        if (firstName) { data['first_name'] =  firstName; }
+        if (lastName) { data['last_name'] =  lastName; }
+        if (lang) { data['language'] =  lang; }
+        if (previewPicture && avatarUpload) { data['image'] = previewPicture; }
+        if (previewPicture && !avatarUpload) { data['origin_image_url'] = previewPicture; }
+        if (description) { data['description'] = description; }
+        if (showEmailConsent) { data["accepts_provider_email"] = acceptsProviderEmail; }
+        if (showTerms) { data["accepts_terms"] = acceptsTerms; }
+        data["is_onboarded"] = true;
+
+        if (validate(data, validationRules)) {
+            setIsUpdating(true);
+            const formData = new FormData();
+            Object.entries(data).forEach(([key, value]) => {
+                formData.append(key, value);
+            })
+
+            api.update("users", auth.currentUser.slug, formData).then(response => {
+                if(response.data.success) {
+                    auth.setCurrentUser(response.data.data.resource);
+                    hideModal();
+                } else {
+                    hideModal();
+                }
+            });
+        }
+    }
+
+    const handleChooseAvatar = (avatar) => {
+        const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
+        setPreviewPicture(avatar);
+        setShowAvatars(false);
+        if (urlRegex.test(avatar)) {
+            setPreviewPictureBase64(avatar);
+            setAvatarUpload(false);
+        } else {
+            setAvatarUpload(true);
+            displayPreview(avatar);
+        }
+    };
+
+    return (
+        <Modal data-vid={"update_user_info_modal"} title={intl.formatMessage({ id: "modal.update_user_info_modal.modal_title", defaultMessage: "Update your profile" })} style={{ width: isMobile ? "unset" : "max-content", minWidth: isMobile ? "unset" : "500px", maxWidth: "800px" }} showCloseButton={false} disableClickOutside={true}>
+            { isUpdating ? 
+                <Loader />
+            :
+                !showAvatars ?
+                    <>
+                        <div className={styles.container}>
+                            <div className={styles.userImageContainer}>
+                                { previewPictureBase64 ?
+                                    <img className={styles.userPictureUpload} src={previewPictureBase64} alt={intl.formatMessage({ id:"alt.my_profile_picture", defaultMessage:"Ma photo de profil" })} />
+                                :
+                                    <div className={styles.userPictureUpload}>
+                                            <Icon name="camera" height={20} width={20} alt={intl.formatMessage({ id:"user.user_edit.profile_picture", defaultMessage:"Profile picture" })}/>
+                                    </div>
+                                }
+                                <Button data-testid="avatar-button" data-tid={"action_save_profile"} onClick={() => setShowAvatars(true)} style={{ whiteSpace: "nowrap" }}>
+                                    { intl.formatMessage({ id:"user.user_edit.avatar", defaultMessage: "Select an avatar"}) }
+                                </Button>
+                            </div>
+                            <div className={styles.inputsContainer}>
+                                <div className={styles.nameContainer}>
+                                    <div className={styles.updateProfileInput}>
+                                        <TextInput   
+                                            type={"text"} 
+                                            name={"first_name"} 
+                                            aria-label={intl.formatMessage({ id: "auth.signup_form.first_name.aria_label", defaultMessage: "First name" })}
+                                            placeholder={intl.formatMessage({ id:"auth_signup_form_first_name_placeholder", defaultMessage: "First name" })} 
+                                            onChange={e => config.actions?.disableOnboardingNameUpdate === true ? null : setFirstName(e.target.value)}
+                                            value={firstName}
+                                            error={errors["first_name"] ? true : false}
+                                            message={errors["first_name"]}
+                                            data-testid="first-name"
+                                            disabled={config.actions?.disableOnboardingNameUpdate === true}
+                                        />
+                                    </div>
+                                    <div className={styles.updateProfileInput}>
+                                        <TextInput 
+                                            type={"text"} 
+                                            name={"last_name"} 
+                                            aria-label={intl.formatMessage({ id: "auth.signup_form.last_name.aria_label", defaultMessage: "Last name" })}
+                                            placeholder={intl.formatMessage({ id:"auth_signup_form_last_name_placeholder", defaultMessage: "Last name" })} 
+                                            onChange={e => config.actions?.disableOnboardingNameUpdate === true ? null : setLastName(e.target.value)}
+                                            value={lastName}
+                                            error={errors["last_name"] ? true : false}
+                                            message={errors["last_name"]}
+                                            data-testid="last-name"
+                                            disabled={config.actions?.disableOnboardingNameUpdate === true}
+                                        />
+                                    </div>
+                                </div>
+                                { config.actions?.disableNameUpdate == true && config.actions?.disableOnboardingNameUpdate != true &&
+                                    <div className={styles.hint}>
+                                        { intl.formatMessage({ id:"user.user_edit.user_name_hint", defaultMessage: "last name" }) } 
+                                    </div>
+                                }
+                                { (config.translation?.translationMethods && Object.keys(config.translation.translationMethods).length > 0) &&
+                                    <Select 
+                                        selectClassName={styles.langSelect}
+                                        options={Object.keys(config.translation.translationMethods).map(l =>  (
+                                            {
+                                                name: l,
+                                                value: l,
+                                                text: `${l.toUpperCase()}`
+                                            }
+                                        ))}
+                                        defaultOption={lang}
+                                        onChange={(option) => setLang(option.value)}
+                                    />
+                                }
+                                <div className={styles.userDescription}>
+                                    <textarea 
+                                        className={styles.textArea} 
+                                        placeholder={intl.formatMessage({ id:"user.user_edit.user_description", defaultMessage: "Describe yourself in a few words" })} 
+                                        value={description} 
+                                        onChange={(e) => setDescription(e.target.value)} 
+                                        maxLength={500}
+                                        data-testid="description"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        { showTerms &&
+                            <div className={styles.toggle}>
+                                <Toggle 
+                                    type={"checkbox"} 
+                                    name={"accepts_terms"} 
+                                    style={{ fontSize: 18 }}
+                                    checked={acceptsTerms} 
+                                    label={ <FormattedMessage
+                                        id='modal.update_user_info_modal.accepts_terms'
+                                        defaultMessage="I declare I have read the <var1>General Conditions of Use</var1> and the <var2>Privacy policy</var2> of the debate space and accept them."
+                                        values={{
+                                            var1: (chunks) => (
+                                                <a className={styles.cgu} target='_blank' href={termsUrl}>
+                                                    {chunks}
+                                                </a>
+                                            ),
+                                            var2: (chunks) => (
+                                                <a className={styles.cgu} target='_blank' href={privacyUrl}>
+                                                    {chunks}
+                                                </a>
+                                            ),
+                                        }}/>}
+                                    onInputChanged={(e) => setAcceptsTerms(!acceptsTerms)}
+                                    message={errors["accepts_terms"]}
+                                    data-testid={"accepts-terms-input"}
+                                />
+                            </div>
+                        }
+                        { showEmailConsent &&
+                            <div className={styles.toggle}>
+                                <Toggle 
+                                    type={"checkbox"} 
+                                    name={"accepts_provider_email"} 
+                                    style={{ fontSize: 18 }}
+                                    checked={acceptsProviderEmail} 
+                                    label={ intl.formatMessage({ id: "modal.update_user_info_modal.consent_label", defaultMessage: "I agree to receive emails from the editor" }, { provider: config.provider?.companyName }) }
+                                    onInputChanged={(e) => setAcceptsProviderEmail(!acceptsProviderEmail)} 
+                                    data-testid={"accepts-email-input"}
+                                />
+                            </div>
+                        }
+                        <div className={styles.userSaveBox}>
+                            <Button data-testid="save-button" data-tid={"action_save_profile"} onClick={(e) => submit(e)}>
+                                { intl.formatMessage({ id:"user.user_edit.save", defaultMessage: "Save"}) }
+                            </Button>
+                        </div>
+                    </>
+                : 
+                    <>
+                        <AvatarSelector 
+                            onChooseAvatar={handleChooseAvatar}
+                            avatarUrlList={avatarUrlList}
+                            userName={auth.currentUser.full_name}
+                            allowUserImage={config.avatars?.allowUserImage}
+                        />
+                        <div className={styles.backButton} onClick={() => setShowAvatars(false)}>{ intl.formatMessage({ id:"user.user_edit.back", defaultMessage: "Back"}) }</div>
+                    </>
+            }
+        </Modal>
+    );
+}
+
+UpdateUserInfoModal.propTypes = {
+    /** URL to the terms page */
+	termsUrl: PropTypes.string,
+    /** URL to the privacy page */
+	privacyUrl: PropTypes.string,
+    /** If `true`, will show a toggle for email consent */
+	showEmailConsent: PropTypes.bool,
+	/** If `true`, will show a toggle to accept terms */
+	showTerms: PropTypes.bool,
+}