Merge pull request #574 from culturecreates/develop

Develop

.env.staging

@@ -1,8 +1,10 @@
 REACT_APP_API_URL="https://staging.api.cms.footlight.io"
+REACT_APP_ARTS_DATA_URI="https://api.artsdata.ca/"
 REACT_APP_DEEPL_URL="https://www.deepl.com/translator#"
 REACT_APP_HELP_EN_URL="https://footlight.gitbook.io/footlight-cms-guide"
 REACT_APP_HELP_FR_URL="https://footlight.gitbook.io/guide-footlight-cms"
 REACT_APP_FEATURE_FLAG_QUICK_CREATE_ORGANIZATION=true
 REACT_APP_FEATURE_FLAG_ORG_PERSON_PLACE_VIEW=true
 REACT_APP_FEATURE_FLAG_QUICK_CREATE_PEOPLE_PLACE=true
+REACT_APP_FEATURE_FLAG_EDIT_SCREEN_PEOPLE_PLACE_ORGANIZATION=true
 REACT_APP_ENV="staging"

package.json

@@ -18,6 +18,7 @@
     "rc-year-calendar": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-easy-crop": "^5.0.0",
     "react-i18next": "^12.0.0",
     "react-places-autocomplete": "^7.3.0",
     "react-quill": "^2.0.0",

src/components/Card/Common/CreateEntityButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PlusCircleOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+function CreateEntityButton(props) {
+  const { t } = useTranslation();
+  const { quickCreateKeyword, onClick } = props;
+  return (
+    <div className="quick-create" onClick={onClick}>
+      <PlusCircleOutlined />
+      &nbsp;{t('dashboard.events.addEditEvent.quickCreate.create')}&nbsp;&#34;
+      {quickCreateKeyword}&#34;
+    </div>
+  );
+}
+
+export default CreateEntityButton;

src/components/Card/Common/EntityCard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import './entityCard.css';
+import ArtsDataLink from '../../Tags/ArtsDataLink/ArtsDataLink';
+import { LinkOutlined } from '@ant-design/icons';
+
+const EntityCard = (props) => {
+  const { title, description, artsDataLink, Logo, linkText, onClick } = props;
+  return (
+    <div className="search-option-entity-card" onClick={onClick}>
+      <div className="image-container">{Logo}</div>
+      <div className="text-container">
+        <div className="title">{title}</div>
+        <div className="description">{description}</div>
+      </div>
+      <div className="link-container">
+        <ArtsDataLink
+          onClick={(e) => {
+            e.stopPropagation();
+            window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer');
+          }}>
+          <span style={{ textDecoration: 'underline' }}>{linkText}</span>
+          <LinkOutlined />
+        </ArtsDataLink>
+      </div>
+    </div>
+  );
+};
+
+export default EntityCard;

src/components/Card/Common/entityCard.css

@@ -0,0 +1,62 @@
+.search-option-entity-card {
+  min-height: 56px;
+  padding: 8px 16px 8px 8px;
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.search-option-entity-card:hover{
+  background: #0000000A;
+}
+
+.search-option-entity-card .image-container {
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: rgb(227, 232, 255);
+}
+
+.search-option-entity-card .text-container {
+  flex-grow: 1;
+  padding: 0 5px;
+}
+
+.search-option-entity-card .image-container img {
+  width: 100%;
+  object-fit: cover;
+  height: 100%;
+}
+
+.search-option-entity-card .title {
+  font-weight: 700;
+  font-size: 16px;
+  color: #222732;
+}
+
+.search-option-entity-card .description {
+  font-weight: 400;
+  font-size: 12px;
+  color: #646d7b;
+}
+
+.search-option-entity-card .link-btn-container {
+  border-radius: 4px;
+  padding: 4px 8px;
+  width: auto;
+  color: #0f0e98;
+  background-color: #e3e8ff;
+  border: 0px;
+  margin: 0px;
+}
+
+.search-option-entity-card .link-btn-container:first-child {
+  display: flex;
+  gap: 8px;
+}

src/components/Card/Common/event.css

@@ -4,3 +4,20 @@
   padding-left: 24px;
   padding-right: 24px;
 }
+
+.add-event-section-col .add-event-section-wrapper {
+  padding: 24px;
+  background-color: #ffffff;
+}
+
+.add-event-section-col .add-event-date-wrap {
+  font-weight: 700;
+  font-size: 24px;
+  color: #222732;
+  margin-bottom: 24px;
+}
+.add-event-section-col .title-required:after {
+  margin-left: 4px;
+  content: '*';
+  color: #f43131;
+}

src/components/Card/Common/index.js

@@ -1 +1 @@
-export {default} from "./Event"
+export { default } from './Event';

src/components/Dropdown/Calendar/Calendar.jsx

@@ -8,6 +8,7 @@ import { PathName } from '../../../constants/pathName';
 import { contentLanguageBilingual } from '../../../utils/bilingual';
 import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../../redux/reducer/userSlice';
+import Cookies from 'js-cookie';
 
 function Calendar({ children, allCalendarsData, setPageNumber }) {
   const dispatch = useDispatch();
@@ -46,6 +47,7 @@ function Calendar({ children, allCalendarsData, setPageNumber }) {
   const onClick = ({ key }) => {
     navigate(`${PathName.Dashboard}/${key}${PathName.Events}`);
     dispatch(setSelectedCalendar(String(key)));
+    Cookies.set('calendarId', key);
     setPageNumber(1);
     sessionStorage.removeItem('page');
     sessionStorage.removeItem('query');

src/components/Error/Error.jsx

@@ -0,0 +1,81 @@
+import { useNavigate, useRouteError } from 'react-router-dom';
+import { ReactComponent as GeneralErrors } from '../../assets/images/general-error.svg';
+import { ReactComponent as Error404 } from '../../assets/images/404-error.svg';
+import './error.css';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearErrors, getErrorDetails } from '../../redux/reducer/ErrorSlice';
+import { useEffect } from 'react';
+
+function ErrorAlert(props) {
+  const { errorType = 'general' } = props;
+
+  const errorDetails = useSelector(getErrorDetails);
+
+  const error = useRouteError();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  let image, message, heading;
+
+  useEffect(() => {
+    // effect to trigger api reload when browser back button is pressed
+    const handlePopstate = () => {
+      dispatch(clearErrors());
+    };
+    window.addEventListener('popstate', handlePopstate);
+    return () => {
+      window.removeEventListener('popstate', handlePopstate);
+    };
+  }, [dispatch]);
+
+  if (errorType === 'serverDown') {
+    image = <GeneralErrors />;
+    heading = t('errorPage.serverDown');
+  } else if (errorType === 'failedAPI' && errorDetails?.isError) {
+    image = <GeneralErrors />;
+    heading = t('errorPage.heading');
+    message = errorDetails?.message;
+  }
+  if (errorType === 'general' && !errorDetails.isError) {
+    image = <GeneralErrors />;
+    heading = t('errorPage.heading');
+    message = error?.message;
+  } else if (errorType === 'pageNotFound') {
+    image = <Error404 />;
+    message = t('errorPage.notFoundMessage');
+    heading = t('errorPage.heading');
+  }
+
+  console.error(message, new Date().toISOString());
+
+  return (
+    <div className="error-page">
+      <div className="content">
+        <div className="image-container">{image}</div>
+        <section>
+          <h1>{heading}</h1>
+          {errorType !== 'serverDown' && (
+            <>
+              <p className="error-message">{message}</p>
+              <p className="error-time">{new Date().toISOString()}</p>
+              <div className="btn-container">
+                <Button
+                  onClick={() => {
+                    navigate(-2);
+                    dispatch(clearErrors());
+                  }}>
+                  {t('errorPage.buttonText')}
+                </Button>
+              </div>
+            </>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default ErrorAlert;

src/components/Error/error.css

@@ -0,0 +1,67 @@
+.error-page {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--primary-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.error-page .content {
+  min-width: 500px;
+  max-width: 700px;
+  max-height: 750px;
+  width: 40%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.error-page .image-container {
+  height: 40%;
+}
+
+.error-page .image-container > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.error-page h1 {
+  color: var(--content-neutral-primary, #222732);
+  text-align: center;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+}
+
+.error-page .error-message,
+.error-page .error-time {
+  color: var(--content-neutral-secondary, #646d7b);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.error-page .btn-container {
+  display: grid;
+  place-content: center;
+}
+
+.error-page .btn-container .ant-btn {
+  border-radius: 4px;
+  background: var(--content-action-default, #1b3de6);
+  color: var(--primary-white);
+  font-weight: 600;
+  text-transform: capitalize;
+  border: none;
+  font-size: 16px;
+  padding: 8px 16px;
+  display: grid;
+  place-content: center;
+}