From 22d8d75e71c25d10178c1a23994179299988a575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Wed, 14 Jun 2023 17:37:36 -0400
Subject: [PATCH] jams-react-client: add EditBlueprintUiForm
Change-Id: If1a9a10cad6d5a06ff357c6cca7a53f08e5ac1b4
---
.../public/locales/en/translation.json | 2 +
.../public/locales/fr/translation.json | 2 +
.../views/Blueprint/EditBlueprintUiForm.js | 431 ++++++++++++++++++
3 files changed, 435 insertions(+)
create mode 100644 jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
diff --git a/jams-react-client/public/locales/en/translation.json b/jams-react-client/public/locales/en/translation.json
index 066e4a65..5738f137 100644
--- a/jams-react-client/public/locales/en/translation.json
+++ b/jams-react-client/public/locales/en/translation.json
@@ -265,8 +265,10 @@
"welcome_has_BackgroundCustom": "Background",
"instruction_background": "Choose a background color or a background image",
"or": "or",
+ "upload_an_image": "UPLOAD AN IMAGE",
"welcome_has_Logo": "Logotype",
"instruction_logo": "Use Jami logotype or upload a logotype",
+ "upload_a_logotype": "UPLOAD A LOGOTYPE",
"call_parameters": "Call parameters",
"preview_tip1": "Add a picture and a nickname to complete your profile",
"preview_tip2": "Why should I save my account?",
diff --git a/jams-react-client/public/locales/fr/translation.json b/jams-react-client/public/locales/fr/translation.json
index 0c6da64a..2410c4aa 100644
--- a/jams-react-client/public/locales/fr/translation.json
+++ b/jams-react-client/public/locales/fr/translation.json
@@ -265,8 +265,10 @@
"welcome_has_BackgroundCustom": "Background",
"instruction_background": "Choose a background color or a background image",
"or": "or",
+ "upload_an_image": "UPLOAD AN IMAGE",
"welcome_has_Logo": "Logotype",
"instruction_logo": "Use Jami logotype or upload a logotype",
+ "upload_a_logotype": "UPLOAD A LOGOTYPE",
"call_parameters": "Call parameters",
"preview_tip1": "Add a picture and a nickname to complete your profile",
"preview_tip2": "Why should I save my account?",
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
new file mode 100644
index 00000000..03f4b4bb
--- /dev/null
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
@@ -0,0 +1,431 @@
+import React, { useState } from "react";
+
+import Checkbox from "@material-ui/core/Checkbox";
+import { SketchPicker } from "react-color";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import { TextField, makeStyles } from "@material-ui/core";
+
+import Typography from "@material-ui/core/Typography";
+import CustomImgDropZone from "components/CustomImgDropZone/CustomImgDropZone";
+
+import i18next from "i18next";
+
+const styles = {
+ colorButtonStyle: {
+ borderRadius: "50%",
+ width: "20px",
+ height: "20px",
+ border: "1px solid grey",
+ outline: "none",
+ cursor: "pointer",
+ },
+ popover: {
+ position: "absolute",
+ zIndex: "2",
+ },
+ cover: {
+ position: "fixed",
+ top: "0px",
+ right: "0px",
+ bottom: "0px",
+ left: "0px",
+ },
+};
+
+const useStyles = makeStyles(styles);
+
+const IsCustomizationEnabledForm = ({
+ isCustomizationEnabled,
+ handleUpdateUi,
+}) => {
+ return (
+ <FormGroup row>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={isCustomizationEnabled}
+ color="primary"
+ onChange={(e) => {
+ handleUpdateUi("isCustomizationEnabled", e.target.checked);
+ }}
+ name="isCustomizationEnabled"
+ />
+ }
+ label={i18next.t("is_customization_enabled", "Enable customization")}
+ />
+ </FormGroup>
+ );
+};
+
+const HasTitleForm = ({ uiCustomization, handleUpdateUi }) => {
+ return (
+ <FormGroup row>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={uiCustomization.hasTitle}
+ color="primary"
+ onChange={(e) => {
+ handleUpdateUi("hasTitle", e.target.checked);
+ }}
+ name="hasTitle"
+ />
+ }
+ label={i18next.t("welcome_has_title", "Title")}
+ />
+ </FormGroup>
+ );
+};
+
+const TitleForm = ({ uiCustomization, handleUpdateUi }) => {
+ if (!uiCustomization.hasTitle) {
+ return null;
+ }
+
+ return (
+ <FormGroup row>
+ <span>
+ {i18next.t(
+ "instruction_title",
+ "Use Jami title or personalize it (max 20 characters)"
+ )}
+ </span>
+ <TextField
+ id="customTitle"
+ placeholder={i18next.t("welcome_title", "Welcome to Jami")}
+ value={uiCustomization.customTitle}
+ onChange={(e) => {
+ handleUpdateUi("customTitle", e.target.value);
+ }}
+ fullWidth
+ inputProps={{ maxLength: 20 }}
+ />
+ </FormGroup>
+ );
+};
+
+const HasDescriptionForm = ({ uiCustomization, handleUpdateUi }) => {
+ return (
+ <FormGroup row>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={uiCustomization.hasDescription}
+ color="primary"
+ name="hasDescription"
+ onChange={(e) => {
+ handleUpdateUi("hasDescription", e.target.checked);
+ }}
+ />
+ }
+ label={i18next.t("welcome_has_description", "Description")}
+ />
+ </FormGroup>
+ );
+};
+
+const DescriptionForm = ({ uiCustomization, handleUpdateUi }) => {
+ return (
+ <FormGroup row>
+ {uiCustomization.hasDescription && (
+ <>
+ <span>
+ {i18next.t(
+ "instruction_description",
+ "Use Jami description or personalize it (max 100 characters)"
+ )}
+ </span>
+ <TextField
+ id="customDescription"
+ placeholder={i18next.t(
+ "welcome_Description",
+ "Here is your Jami identifier, don’t hesitate to share it in order to be contacted more easily!"
+ )}
+ value={uiCustomization.customDescription}
+ onChange={(e) => {
+ handleUpdateUi("customDescription", e.target.value);
+ }}
+ fullWidth
+ inputProps={{ maxLength: 100 }}
+ />
+ </>
+ )}
+ </FormGroup>
+ );
+};
+
+const HasTipsForm = ({ uiCustomization, handleUpdateUi }) => {
+ return (
+ <FormGroup row>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={uiCustomization.hasTips}
+ color="primary"
+ onChange={(e) => {
+ handleUpdateUi("hasTips", e.target.checked);
+ }}
+ name="hasTips"
+ />
+ }
+ label={i18next.t("welcome_has_Tips", "Tips")}
+ />
+ </FormGroup>
+ );
+};
+
+const HasBackgroundCustomForm = ({ uiCustomization, handleUpdateUi }) => {
+ return (
+ <FormGroup row>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={uiCustomization.hasBackgroundCustom}
+ color="primary"
+ onChange={(e) => {
+ handleUpdateUi("hasBackgroundCustom", e.target.checked);
+ }}
+ name="hasBackgroundCustom"
+ />
+ }
+ label={i18next.t("welcome_has_BackgroundCustom", "Background")}
+ />
+ </FormGroup>
+ );
+};
+
+const CustomBackgroundForm = ({
+ uiCustomization,
+ handleColorChange,
+ handleUpdateUi,
+ handleImgDrop,
+ bgFile,
+}) => {
+ const classes = useStyles();
+
+ const [displayColorPicker, setDisplayColorPicker] = useState(false);
+
+ const handleClickColor = () => {
+ setDisplayColorPicker(!displayColorPicker);
+ };
+
+ const setBgFile = (value) => {
+ handleUpdateUi("bgFile", value);
+ };
+
+ const handleCloseColor = () => {
+ setDisplayColorPicker(false);
+ };
+
+ return (
+ <FormGroup row>
+ {uiCustomization.hasBackgroundCustom && (
+ <>
+ <span>
+ {i18next.t(
+ "instruction_background",
+ "Choose a background color or a background image"
+ )}
+ </span>
+ <FormGroup
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "left",
+ flexDirection: "row",
+ padding: "10px 0",
+ }}
+ >
+ <div style={{ padding: "0 20px" }}>
+ <button
+ style={{
+ backgroundColor: uiCustomization.customBackgroundColor,
+ }}
+ className={classes.colorButtonStyle}
+ onClick={() => {
+ handleClickColor();
+ }}
+ />
+ {displayColorPicker && (
+ <div className={classes.popover}>
+ <div className={classes.cover} onClick={handleCloseColor} />
+ <SketchPicker
+ color={uiCustomization.customBackgroundColor}
+ onChange={(color) => {
+ handleColorChange(color);
+ handleUpdateUi("customBackgroundColor", color.hex);
+ }}
+ />
+ </div>
+ )}
+ </div>
+
+ <div style={{ padding: "0 20px" }}>
+ <Typography>{i18next.t("or", "or")}</Typography>
+ </div>
+
+ <div style={{ padding: "0 20px" }}>
+ <CustomImgDropZone
+ onDrop={(files) => {
+ handleImgDrop(files, "background");
+ }}
+ label={i18next.t("upload_an_image", "UPLOAD AN IMAGE")}
+ file={bgFile}
+ setFile={setBgFile}
+ handleDelete={(e) => {
+ handleUpdateUi("customBackgroundImageUrl", "");
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ />
+ </div>
+ </FormGroup>
+ </>
+ )}
+ </FormGroup>
+ );
+};
+
+const HasLogoForm = ({ uiCustomization, handleUpdateUi }) => {
+ return (
+ <FormGroup row>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={uiCustomization.hasLogo}
+ color="primary"
+ onChange={(e) => {
+ handleUpdateUi("hasLogo", e.target.checked);
+ }}
+ name="hasLogo"
+ />
+ }
+ label={i18next.t("welcome_has_Logo", "Logotype")}
+ />
+ </FormGroup>
+ );
+};
+
+const LogoForm = ({
+ handleImgDrop,
+ handleDeleteLogo,
+ handleUpdateUi,
+ logoFile,
+}) => {
+ const setLogoFile = (value) => {
+ handleUpdateUi("logoFile", value);
+ };
+
+ return (
+ <>
+ <span>
+ {i18next.t(
+ "instruction_logo",
+ "Use Jami logotype or upload a logotype"
+ )}
+ </span>
+
+ <FormGroup row style={{ padding: "10px 0" }}>
+ <CustomImgDropZone
+ onDrop={(files) => handleImgDrop(files, "logo")}
+ label={i18next.t("upload_a_logotype", "UPLOAD A LOGOTYPE")}
+ file={logoFile}
+ setFile={setLogoFile}
+ handleDelete={(e) => {
+ handleDeleteLogo(e);
+ handleUpdateUi("customLogoImageUrl", null);
+ }}
+ />
+ </FormGroup>
+ </>
+ );
+};
+
+const EditBlueprintUiForm = ({
+ uiCustomization,
+ setUiCustomization,
+ handleUpdateUi,
+ handleImgDrop,
+}) => {
+ const { isCustomizationEnabled } = uiCustomization;
+
+ const bgFile = uiCustomization.customBackgroundImageUrl?.split("/").pop();
+ const logoFile = uiCustomization.customLogoImageUrl?.split("/").pop();
+
+ const handleDeleteLogo = (e) => {
+ setUiCustomization({
+ ...uiCustomization,
+ customLogoImageUrl: "",
+ });
+ e.stopPropagation();
+ };
+
+ const handleColorChange = (color) => {
+ setUiCustomization({
+ ...uiCustomization,
+ customBackgroundColor: color.hex,
+ customBackgroundImageUrl: "",
+ });
+ };
+
+ return (
+ <>
+ <IsCustomizationEnabledForm
+ isCustomizationEnabled={isCustomizationEnabled}
+ handleUpdateUi={handleUpdateUi}
+ />
+
+ {isCustomizationEnabled && (
+ <>
+ <HasTitleForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+ <TitleForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+ <HasDescriptionForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+ <DescriptionForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+ <HasTipsForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+
+ <HasBackgroundCustomForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+ <CustomBackgroundForm
+ uiCustomization={uiCustomization}
+ handleColorChange={handleColorChange}
+ handleUpdateUi={handleUpdateUi}
+ handleImgDrop={handleImgDrop}
+ bgFile={bgFile}
+ />
+ <HasLogoForm
+ uiCustomization={uiCustomization}
+ handleUpdateUi={handleUpdateUi}
+ />
+ {uiCustomization.hasLogo && (
+ <LogoForm
+ handleImgDrop={handleImgDrop}
+ handleDeleteLogo={handleDeleteLogo}
+ handleUpdateUi={handleUpdateUi}
+ logoFile={logoFile}
+ />
+ )}
+ </>
+ )}
+ </>
+ );
+};
+
+export default EditBlueprintUiForm;
--
GitLab