From 70ccecd19efea9bd916e2d6ec283cd1ae778cafc 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:45:40 -0400
Subject: [PATCH] jams-react-client: add CustomUiPreview
Change-Id: I935a12326289b398fdbeacc016a8555718e66077
---
.../CustomUiPreview/CustomUiPreview.js | 179 ++++++++++++++++++
.../components/CustomUiPreview/JamiIdCard.js | 76 ++++++++
.../src/components/CustomUiPreview/TipBox.js | 42 ++++
3 files changed, 297 insertions(+)
create mode 100644 jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
create mode 100644 jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
create mode 100644 jams-react-client/src/components/CustomUiPreview/TipBox.js
diff --git a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
new file mode 100644
index 00000000..4e061806
--- /dev/null
+++ b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
@@ -0,0 +1,179 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+import customUiBackgroundImage from "assets/img/CustomUiBg.jpg";
+import logoImage from "assets/img/logo-jami-net.svg";
+
+import TipBox from "./TipBox";
+import JamiIdCard from "./JamiIdCard";
+import i18next from "i18next";
+
+const styles = {
+ backgroundImage: {
+ backgroundImage: `url(${customUiBackgroundImage})`,
+ backgroundSize: "cover",
+ backgroundPosition: "center",
+ height: "250px",
+ position: (props) => (props.isOldPreview ? "relative" : "absolute"),
+ left: 0,
+ right: 0,
+ margin: (props) => (props.isOldPreview ? "0 0" : "0 20px"),
+ transition: (props) => (props.isOldPreview ? "none" : "opacity 0.25s"),
+ opacity: (props) => props.opacity,
+ zIndex: (props) => (props.isOldPreview ? "1" : "2"),
+ },
+ previewWindow: {
+ position: "absolute",
+ left: "50%",
+ top: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "80%",
+ height: "200px",
+
+ borderRadius: "5px",
+ backgroundColor: "white",
+ display: "flex",
+ boxShadow: "0px 3px 6px #0000005C",
+ },
+ sidebar: {
+ // minWidth: "100px",
+ width: "100px",
+ height: "100%",
+ backgroundColor: "#f4f4f4",
+ borderRadius: "5px 0px 0px 5px",
+ },
+ mainContent: {
+ flex: 1,
+ padding: "2rem",
+ backgroundColor: (props) => props.backgroundColor,
+ backgroundImage: (props) => `url(${props.backgroundUrl})`,
+ backgroundSize: "cover",
+ backgroundPosition: "center",
+ borderRadius: "0px 5px 5px 0px",
+
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ },
+ welcomeRow: {
+ display: "flex",
+ flexDirection: (props) => (props.isCompactDisplay ? "column" : "row"),
+ height: "100px",
+ justifyContent: "center",
+ alignItems: "center",
+ marginBottom: "0.5rem",
+ },
+ logo: {
+ width: "50%",
+ objectFit: "contain",
+ height: "100%",
+ marginRight: "1rem",
+ },
+ welcomeCard: {
+ borderRadius: "9px",
+ backgroundColor: (props) => (props.isCompactDisplay ? "white" : "#f4f4f4"),
+ padding: "10px",
+ width: "50%",
+ },
+ title: {
+ margin: 0,
+ fontWeight: 500,
+ },
+ description: {
+ fontSize: "5px",
+ },
+ tipRow: {
+ display: "flex",
+ justifyContent: "center",
+ },
+};
+
+const useStyles = makeStyles(styles);
+
+export default function CustomUiPreview({
+ isOldPreview,
+ opacity,
+ uiCustomization,
+}) {
+ let {
+ hasTitle,
+ title,
+ hasDescription,
+ description,
+ hasTips,
+ hasBackground,
+ backgroundColor,
+ backgroundUrl,
+ hasLogo,
+ logoUrl,
+ } = uiCustomization;
+
+ if (!title) {
+ title = i18next.t("welcome_title", "Welcome to Jami");
+ }
+ if (!description) {
+ description = i18next.t(
+ "welcome_Description",
+ "Here is your Jami identifier, don’t hesitate to share it in order to be contacted more easily!"
+ );
+ }
+ if (!logoUrl) {
+ logoUrl = logoImage;
+ }
+
+ if (hasBackground === false) {
+ backgroundColor = "white";
+ backgroundUrl = "";
+ }
+
+ const isCompactDisplay = !hasTitle && !hasDescription && !hasTips;
+
+ const classes = useStyles({
+ backgroundColor,
+ backgroundUrl,
+ isCompactDisplay,
+ isOldPreview,
+ opacity,
+ hasTitle,
+ });
+
+ const tip1 = i18next.t("preview_tip1", "Add a picture and a nickname to complete your profile");
+ const tip2 = i18next.t("preview_tip2", "Why should I save my account?");
+ const tip3 = i18next.t("preview_tip3", "How to set shortcuts?");
+
+ return (
+ <div className={classes.backgroundImage}>
+ <div className={classes.previewWindow}>
+ <div className={classes.sidebar}></div>
+ <div className={classes.mainContent}>
+ <div className={classes.welcomeRow}>
+ {hasLogo ? (
+ <img
+ src={logoUrl}
+ alt="logo"
+ className={classes.logo}
+ ></img>
+ ) : null}
+ <div className={classes.welcomeCard}>
+ {hasTitle ? (
+ <h4 className={classes.title}>{title}</h4>
+ ) : null}
+ {hasDescription ? (
+ <p className={classes.description}>{description}</p>
+ ) : null}
+ <JamiIdCard isCompactDisplay={isCompactDisplay} />
+ </div>
+ </div>
+ {hasTips ? (
+ <div className={classes.tipRow}>
+ <TipBox text={tip1} />
+ <TipBox text={tip2} />
+ <TipBox text={tip3} />
+ </div>
+ ) : null}
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
new file mode 100644
index 00000000..ce5dc005
--- /dev/null
+++ b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
@@ -0,0 +1,76 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+
+import jamiIdImage from "assets/img/jami_id.svg";
+import copySvg from "assets/img/BTN_Copy.svg";
+import editSvg from "assets/img/BTN_Edit.svg";
+import shareSvg from "assets/img/BTN_Share.svg";
+import { infoColor } from "assets/jss/material-dashboard-react";
+
+const styles = {
+ root: {
+ backgroundColor: (props) => (props.isCompactDisplay ? "#f4f4f4" : "white"),
+ maxWidth: (props) => (props.isCompactDisplay ? "100%" : "110px"),
+ width: (props) => (props.isCompactDisplay ? "100%" : "110px"),
+ height: (props) => (props.isCompactDisplay ? "20px" : "40px"),
+ position: "relative",
+ borderRadius: "9px",
+ overflow: "hidden",
+ margin: "auto",
+ },
+ logo: {
+ position: "absolute",
+ left: 0,
+ top: 0,
+ backgroundColor: infoColor[0],
+ borderRadius: (props) =>
+ props.isCompactDisplay ? "20px" : "20px 20px 20px 0px",
+ padding: "0px 5px 0px 5px",
+ },
+ nameplate: {
+ position: "absolute",
+ left: "50%",
+ top: "50%",
+ transform: (props) =>
+ props.isCompactDisplay ? "translate(-50%, -50%)" : "translate(-50%, 50%)",
+ textAlign: "center",
+ fontSize: "5px",
+ },
+ icons: {
+ position: "absolute",
+ right: "0",
+ height: "16px",
+ top: (props) => (props.isCompactDisplay ? "50%" : "0"),
+ transform: (props) =>
+ props.isCompactDisplay ? "translate(0%, -50%)" : "none",
+ marginRight: "2px",
+ },
+ icon: {
+ margin: "5px",
+ width: "6px",
+ height: "6px",
+ },
+};
+
+const useStyles = makeStyles(styles);
+
+export default function JamiIdCard({ isCompactDisplay }) {
+ const classes = useStyles({ isCompactDisplay });
+
+ return (
+ <div className={classes.root}>
+ <div className={classes.logo}>
+ <img src={jamiIdImage} alt="jami id" />
+ </div>
+
+ <div className={classes.nameplate}>placeholder</div>
+
+ <div className={classes.icons}>
+ <img src={editSvg} alt="edit" className={classes.icon} />
+ <img src={copySvg} alt="copy" className={classes.icon} />
+ <img src={shareSvg} alt="share" className={classes.icon} />
+ </div>
+ </div>
+ );
+}
diff --git a/jams-react-client/src/components/CustomUiPreview/TipBox.js b/jams-react-client/src/components/CustomUiPreview/TipBox.js
new file mode 100644
index 00000000..b4a51397
--- /dev/null
+++ b/jams-react-client/src/components/CustomUiPreview/TipBox.js
@@ -0,0 +1,42 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import tipLightBulbImage from "assets/img/tip_light_bulb.svg";
+
+const styles = {
+ root: {
+ width: "80px",
+ maxWidth: "80px",
+ flexBasis: "100%",
+ backgroundColor: "#f4f4f4",
+ padding: "0px 5px 5px 5px",
+ margin: "2px",
+ borderRadius: "10px",
+ },
+ img: {
+ verticalAlign: "middle",
+ },
+ title: {
+ verticalAlign: "middle",
+ fontSize: 6,
+ marginLeft: "0.5rem",
+ },
+ text: {
+ fontSize: 5,
+ margin: 0,
+ },
+};
+
+const useStyles = makeStyles(styles);
+
+export default function TipBox({ text }) {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <img src={tipLightBulbImage} alt="light bulb" className={classes.img} />
+ <span className={classes.title}>Tips</span>
+ <p className={classes.text}>{text}</p>
+ </div>
+ );
+}
--
GitLab