jams-react-client: add CustomUiPreview

Change-Id: I935a12326289b398fdbeacc016a8555718e66077

jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js

+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>
+  );
+}

jams-react-client/src/components/CustomUiPreview/JamiIdCard.js

+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>
+  );
+}

jams-react-client/src/components/CustomUiPreview/TipBox.js

+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>
+  );
+}