diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 4bfad39ac..02df1806a 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -5081,6 +5081,27 @@ + + login + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + refresh false @@ -5548,6 +5569,27 @@ + + password + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + search false @@ -5632,6 +5674,27 @@ + + username + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + yes false diff --git a/client/src/components/breadcrumbs/breadcrumbs.component.jsx b/client/src/components/breadcrumbs/breadcrumbs.component.jsx index ded2134a4..4425d39af 100644 --- a/client/src/components/breadcrumbs/breadcrumbs.component.jsx +++ b/client/src/components/breadcrumbs/breadcrumbs.component.jsx @@ -1,32 +1,36 @@ -import React from "react"; +import { HomeFilled } from "@ant-design/icons"; import { Breadcrumb } from "antd"; +import React from "react"; import { connect } from "react-redux"; +import { Link } from "react-router-dom"; import { createStructuredSelector } from "reselect"; import { selectBreadcrumbs } from "../../redux/application/application.selectors"; -import { Link } from "react-router-dom"; -import { HomeFilled } from "@ant-design/icons"; +import "./breadcrumbs.styles.scss"; + const mapStateToProps = createStructuredSelector({ breadcrumbs: selectBreadcrumbs, }); export function BreadCrumbs({ breadcrumbs }) { return ( - - - - - - - {breadcrumbs.map((item) => - item.link ? ( - - {item.label} - - ) : ( - {item.label} - ) - )} - +
+ + + + + + + {breadcrumbs.map((item) => + item.link ? ( + + {item.label} + + ) : ( + {item.label} + ) + )} + +
); } export default connect(mapStateToProps, null)(BreadCrumbs); diff --git a/client/src/components/breadcrumbs/breadcrumbs.styles.scss b/client/src/components/breadcrumbs/breadcrumbs.styles.scss new file mode 100644 index 000000000..6a84a55e0 --- /dev/null +++ b/client/src/components/breadcrumbs/breadcrumbs.styles.scss @@ -0,0 +1,3 @@ +.breadcrumb-container { + margin: 1rem 4rem; +} diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 1a49d905f..70eef0aff 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -6,21 +6,22 @@ import Icon, { GlobalOutlined, HomeFilled, TeamOutlined, + UserOutlined } from "@ant-design/icons"; -import { Avatar, Col, Menu, Row, Layout } from "antd"; +import { Avatar, Col, Layout, Menu, Row } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import { FaCalendarAlt, FaCarCrash } from "react-icons/fa"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; import { createStructuredSelector } from "reselect"; -import UserImage from "../../assets/User.svg"; import { setModalContext } from "../../redux/modals/modals.actions"; import { signOutStart } from "../../redux/user/user.actions"; import { selectBodyshop, - selectCurrentUser, + selectCurrentUser } from "../../redux/user/user.selectors"; +import "./header.styles.scss"; const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, @@ -37,6 +38,32 @@ const mapDispatchToProps = (dispatch) => ({ signOutStart: () => dispatch(signOutStart()), }); +const logoSpan = { + xs: { + span: 0, + }, + md: { + span: 1, + }, + lg: { + span: 2, + }, +}; + +const menuSpan = { + xs: { + span: 24, + }, + md: { + span: 22, + offset: 1, + }, + lg: { + span: 21, + offset: 1, + }, +}; + function Header({ bodyshop, handleMenuClick, @@ -47,12 +74,14 @@ function Header({ setPaymentContext, }) { const { t } = useTranslation(); + const { Header } = Layout; return ( - - - +
+ + {bodyshop - - + + @@ -114,7 +147,6 @@ function Header({ - @@ -141,7 +173,6 @@ function Header({ - @@ -194,7 +225,6 @@ function Header({ - {t("menus.header.shop_config")} @@ -213,21 +243,26 @@ function Header({ {t("menus.header.shop_csi")} - - - - - + {currentUser.photoURL ? ( + + ) : ( + } + /> + )} + {currentUser.displayName || t("general.labels.unknown")} }> @@ -260,7 +295,7 @@ function Header({ - +
); } diff --git a/client/src/components/header/header.styles.scss b/client/src/components/header/header.styles.scss new file mode 100644 index 000000000..101494fe2 --- /dev/null +++ b/client/src/components/header/header.styles.scss @@ -0,0 +1,9 @@ +.header-shop-logo { + background-size: cover; + max-width: 100%; + max-height: 3.5rem; +} +.header-main-menu { + width: 80vw; + float: left; +} diff --git a/client/src/components/payment-modal/payment-modal.container.jsx b/client/src/components/payment-modal/payment-modal.container.jsx index 6f3283a1a..e6c68de68 100644 --- a/client/src/components/payment-modal/payment-modal.container.jsx +++ b/client/src/components/payment-modal/payment-modal.container.jsx @@ -1,4 +1,4 @@ -import { useElements, useStripe, CardElement } from "@stripe/react-stripe-js"; +import { useElements, useStripe } from "@stripe/react-stripe-js"; import { Form, Modal } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -11,7 +11,6 @@ import { selectCurrentUser, } from "../../redux/user/user.selectors"; import PaymentForm from "../payment-form/payment-form.container"; -import axios from "axios"; const mapStateToProps = createStructuredSelector({ paymentModal: selectPayment, bodyshop: selectBodyshop, @@ -38,7 +37,7 @@ function InvoiceEnterModalContainer({ error: null, cardComplete: false, }); - const [stripeState, setStripeState] = stripeStateArr; + const stripeState = stripeStateArr[0]; const cardValid = !!!stripeState.error && stripeState.cardComplete; @@ -105,14 +104,12 @@ function InvoiceEnterModalContainer({ onCancel={handleCancel} afterClose={() => form.resetFields()} okButtonProps={{ loading: loading, disabled: !cardValid }} - destroyOnClose - > + destroyOnClose>
+ initialValues={{ jobid: context.jobId }}> diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx index fb3013270..bf71b18bf 100644 --- a/client/src/components/sign-in-form/sign-in-form.component.jsx +++ b/client/src/components/sign-in-form/sign-in-form.component.jsx @@ -1,17 +1,20 @@ import { LockOutlined, UserOutlined } from "@ant-design/icons"; -import { Button, Form, Input } from "antd"; +import { Button, Form, Input, Typography } from "antd"; import React from "react"; import { useApolloClient } from "react-apollo"; import { connect } from "react-redux"; import { Redirect } from "react-router-dom"; import { createStructuredSelector } from "reselect"; -import Logo from "../../assets/logo240.png"; +import ImEXOnlineLogo from "../../assets/logo240.png"; import { UPSERT_USER } from "../../graphql/user.queries"; import { emailSignInStart } from "../../redux/user/user.actions"; import { selectCurrentUser, selectSignInError, } from "../../redux/user/user.selectors"; +import { useTranslation } from "react-i18next"; +import "./sign-in-form.styles.scss"; +import AlertComponent from "../alert/alert.component"; const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, @@ -23,16 +26,18 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(emailSignInStart({ email, password })), }); -export default connect( - mapStateToProps, - mapDispatchToProps -)(function SignInComponent({ emailSignInStart, currentUser, signInError }) { +export function SignInComponent({ + emailSignInStart, + currentUser, + signInError, +}) { const apolloClient = useApolloClient(); - + const { t } = useTranslation(); const handleFinish = (values) => { const { email, password } = values; emailSignInStart(email, password); }; + const [form] = Form.useForm(); if (currentUser.authorized === true) { apolloClient @@ -49,38 +54,48 @@ export default connect( }); } + const handleLogin = () => { + form.submit(); + }; + + if (currentUser.authorized === true) return ; return ( -
- {currentUser.authorized === true ? : null} - - Bodyshop.app - -
+
+
+ ImEX Online + {t("titles.app")} +
+ + name='email' + rules={[ + { required: true, message: t("general.validation.required") }, + ]}> } - placeholder="Username" + prefix={} + placeholder={t("general.labels.username")} /> + name='password' + rules={[ + { required: true, message: t("general.validation.required") }, + ]}> } - type="password" - placeholder="Password" + prefix={} + type='password' + placeholder={t("general.labels.password")} /> - - - {signInError ?
{signInError.message}
: null}
); -}); +} + +export default connect(mapStateToProps, mapDispatchToProps)(SignInComponent); diff --git a/client/src/components/sign-in-form/sign-in-form.styles.scss b/client/src/components/sign-in-form/sign-in-form.styles.scss new file mode 100644 index 000000000..e24a3a038 --- /dev/null +++ b/client/src/components/sign-in-form/sign-in-form.styles.scss @@ -0,0 +1,28 @@ +.login-container { + display: flex; + align-items: center; + flex-direction: column; + padding: 2rem; + form { + width: 75vw; + max-width: 20rem; + } +} + +.login-logo-container { + display: flex; + align-items: center; + margin-bottom: 2rem; + h1 { + text-align: center; + margin: 1rem; + } +} + +//Required as it is position inside form. +.login-btn { + margin: 1.5rem 0rem; + position: relative; + left: 50%; + transform: translate(-50%, 0); +} diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx index 9b9667899..2f09c4db4 100644 --- a/client/src/pages/manage/manage.page.component.jsx +++ b/client/src/pages/manage/manage.page.component.jsx @@ -1,10 +1,12 @@ import { Elements } from "@stripe/react-stripe-js"; +import { loadStripe } from "@stripe/stripe-js"; import { BackTop, Layout } from "antd"; import React, { lazy, Suspense, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Route, Switch } from "react-router-dom"; import { createStructuredSelector } from "reselect"; +import { client } from "../../App/App.container"; import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component"; import ChatAffixContainer from "../../components/chat-affix/chat-affix.container"; import ConflictComponent from "../../components/conflict/conflict.component"; @@ -15,14 +17,9 @@ import FooterComponent from "../../components/footer/footer.component"; import HeaderContainer from "../../components/header/header.container"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container"; -import { - selectInstanceConflict, - selectBodyshop, -} from "../../redux/user/user.selectors"; -import "./manage.page.styles.scss"; -import { loadStripe } from "@stripe/stripe-js"; -import { client } from "../../App/App.container"; import { QUERY_STRIPE_ID } from "../../graphql/bodyshop.queries"; +import { selectInstanceConflict } from "../../redux/user/user.selectors"; +import "./manage.page.styles.scss"; const ManageRootPage = lazy(() => import("../manage-root/manage-root.page.container") @@ -113,7 +110,7 @@ const ShopCsiPageContainer = lazy(() => import("../shop-csi/shop-csi.container.page") ); -const { Header, Content, Footer } = Layout; +const { Content, Footer } = Layout; const stripePromise = new Promise((resolve, reject) => { client.query({ query: QUERY_STRIPE_ID }).then((resp) => { @@ -137,10 +134,11 @@ export function Manage({ match, conflict }) { }, [t]); return ( - + + - + {conflict ? ( @@ -150,7 +148,6 @@ export function Manage({ match, conflict }) { fallback={ }> - @@ -302,13 +299,15 @@ export function Manage({ match, conflict }) { )} + + -
- -
- - + { + //
+ // + //
+ } ); } diff --git a/client/src/pages/manage/manage.page.styles.scss b/client/src/pages/manage/manage.page.styles.scss index a4ce5b8b1..3d998e600 100644 --- a/client/src/pages/manage/manage.page.styles.scss +++ b/client/src/pages/manage/manage.page.styles.scss @@ -1 +1,10 @@ -.content-container { overflow-y : scroll; } \ No newline at end of file +.content-container { + overflow-y: auto; + margin: 0.5rem 1.5rem; + padding: 1.5rem; + background: #fff; +} + +.layout-container { + height: 100vh; +} diff --git a/client/src/pages/sign-in/sign-in.page.jsx b/client/src/pages/sign-in/sign-in.page.jsx index aa417570a..b8aa829eb 100644 --- a/client/src/pages/sign-in/sign-in.page.jsx +++ b/client/src/pages/sign-in/sign-in.page.jsx @@ -3,14 +3,7 @@ import SignIn from "../../components/sign-in-form/sign-in-form.component"; export default () => { return ( -
+
); diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 840300590..09e39dc10 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -345,6 +345,7 @@ "create": "Create", "delete": "Delete", "edit": "Edit", + "login": "Login", "refresh": "Refresh", "reset": "Reset to original.", "save": "Save", @@ -365,14 +366,16 @@ "loading": "Loading...", "loadingapp": "Loading Bodyshop.app", "loadingshop": "Loading shop data...", - "loggingin": "Logging you in...", + "loggingin": "Authorizing...", "na": "N/A", "no": "No", "out": "Out", + "password": "Password", "search": "Search...", "selectdate": "Select date...", "text": "Text", "unknown": "Unknown", + "username": "Username", "yes": "Yes" }, "languages": { diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 4c7aee184..e6e105c7b 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -345,6 +345,7 @@ "create": "", "delete": "Borrar", "edit": "Editar", + "login": "", "refresh": "", "reset": "Restablecer a original.", "save": "Salvar", @@ -369,10 +370,12 @@ "na": "N / A", "no": "", "out": "Afuera", + "password": "", "search": "Buscar...", "selectdate": "", "text": "", "unknown": "Desconocido", + "username": "", "yes": "" }, "languages": { diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 0fce3ad8c..ff5b34210 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -345,6 +345,7 @@ "create": "", "delete": "Effacer", "edit": "modifier", + "login": "", "refresh": "", "reset": "Rétablir l'original.", "save": "sauvegarder", @@ -369,10 +370,12 @@ "na": "N / A", "no": "", "out": "En dehors", + "password": "", "search": "Chercher...", "selectdate": "", "text": "", "unknown": "Inconnu", + "username": "", "yes": "" }, "languages": {