Develop

.env.production

@@ -14,4 +14,4 @@ REACT_APP_FEATURE_FLAG_IMAGE_CROP=true
 REACT_APP_ENV="production"
 REACT_APP_INVITE_URL=" https://cms.footlight.io/join?invitationId="
 REACT_APP_ACCEPT_URL=" https://cms.footlight.io/accept?invitationId="
-REACT_APP_CALENDAR_WIDGET_BASE_URL="https://s3.ca-central-1.amazonaws.com/cms-widget.footlight.io/index.html"
+REACT_APP_CALENDAR_WIDGET_BASE_URL="https://listing-widget.footlight.io"

src/components/ImageUpload/ImageUpload.jsx

@@ -6,6 +6,7 @@ import Outlined from '../Button/Outlined';
 import { useTranslation } from 'react-i18next';
 import ImageCrop from '../ImageCrop';
 import { useOutletContext } from 'react-router-dom';
+import { getWidthFromAspectRatio } from '../../utils/getWidthFromAspectRatio';
 
 function ImageUpload(props) {
   const {
@@ -48,6 +49,14 @@ function ImageUpload(props) {
     },
   });
 
+  let aspectRatio;
+  let width;
+
+  if (!isCalendarLogo && currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio) {
+    aspectRatio = currentCalendarData.imageConfig[0]?.large.aspectRatio;
+    width = getWidthFromAspectRatio(aspectRatio, 48);
+  }
+
   const normFile = (e) => {
     if (Array.isArray(e)) {
       return e;
@@ -139,11 +148,10 @@ function ImageUpload(props) {
                   <img
                     className="image-thumbnail"
                     style={{
-                      aspectRatio: !isCalendarLogo
-                        ? currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio.replace(/:/g, '/')
-                        : '',
+                      width: width ? `${width}px` : 'auto',
+                      minWidth: width ? `${width}px` : 'none',
                     }}
-                    src={file?.url ?? file?.thumbUrl}
+                    src={imageUrl || (file?.url ?? file?.thumbUrl)}
                   />
                   <a
                     className="image-name"

src/components/ImageUpload/imageUpload.css

@@ -22,11 +22,32 @@
   gap: 8px;
 }
 
+.image-footer .image-contents {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 85%;
+}
+
+.image-footer .image-thumbnail {
+  width: auto;
+  min-width: none;
+}
+
+.image-footer .image-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+  margin-left: 10px;
+}
+
 .image-footer .image-actions {
   cursor: pointer;
 }
 .image-footer .image-name {
-  white-space: nowrap;
+  /* white-space: nowrap; */
   cursor: pointer;
 }
 .image-footer .image-thumbnail {

src/index.css

@@ -80,3 +80,24 @@ body.inheritCursors * {
     justify-content: center;
   }
 }
+
+@media screen and (max-width: 575px) {
+  .ant-input,
+  .ant-input-number,
+  .ant-select,
+  .ant-cascader,
+  .ant-time-picker,
+  .ant-calendar,
+  .ant-slider,
+  .ant-switch,
+  .ant-radio-button,
+  .ant-checkbox,
+  textarea[class^='ant-'],
+  input[class^='ant-'],
+  .text-editor .ql-container {
+    font-size: 16px !important;
+  }
+  .ant-form-item-label > label {
+    font-size: 16px !important;
+  }
+}

src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx

@@ -920,7 +920,7 @@ function CreateNewPlace() {
                 id: place?.id,
                 name: place?.name,
                 image: place?.image,
-                uri: place?.derivedFrom?.uri,
+                uri: artsDataLinkChecker(place?.sameAs),
               };
             });
             setSelectedContainsPlaces(
@@ -1004,7 +1004,7 @@ function CreateNewPlace() {
               id: place?.id,
               name: place?.name,
               image: place?.image,
-              uri: place?.derivedFrom?.uri,
+              uri: artsDataLinkChecker(place?.sameAs),
             };
           });
           setSelectedContainsPlaces(

src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx

@@ -173,7 +173,7 @@ function PlaceReadOnly() {
             id: place?.id,
             name: place?.name,
             image: place?.image,
-            uri: place?.derivedFrom?.uri,
+            uri: artsDataLinkChecker(place?.sameAs),
           };
         });
         setSelectedContainsPlaces(

src/pages/Dashboard/Settings/WidgetSettings/WidgetSettings.jsx

@@ -45,7 +45,6 @@ const WidgetSettings = () => {
   const regexForHexCode = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
 
   const calendarContentLanguage = currentCalendarData?.contentLanguage;
-  const { eventDetailsUrlTemplate = '', listEventsUrlTemplate = '' } = currentCalendarData?.widgetSettings || {};
   const calendarSlug = currentCalendarData?.slug;
   const calendarName = currentCalendarData?.name[user?.interfaceLanguage?.toLowerCase()];
   const calendarLogoUri = currentCalendarData?.logo?.original?.uri || '';
@@ -166,8 +165,6 @@ const WidgetSettings = () => {
       urlCopy.searchParams.append('calendar', calendarSlug);
       urlCopy.searchParams.append('calendarName', calendarName);
       urlCopy.searchParams.append('logo', calendarLogoUri);
-      urlCopy.searchParams.append('eventUrl', eventDetailsUrlTemplate);
-      urlCopy.searchParams.append('searchEventsUrl', listEventsUrlTemplate);
       urlCopy.searchParams.append('searchEventsFilters', searchEventsFilters);
       urlCopy.searchParams.append('locale', locale?.key.toLowerCase());
 
@@ -180,8 +177,6 @@ const WidgetSettings = () => {
       urlCopyMobile.searchParams.append('calendar', calendarSlug);
       urlCopyMobile.searchParams.append('calendarName', calendarName);
       urlCopyMobile.searchParams.append('logo', calendarLogoUri);
-      urlCopyMobile.searchParams.append('eventUrl', eventDetailsUrlTemplate);
-      urlCopyMobile.searchParams.append('searchEventsUrl', listEventsUrlTemplate);
       urlCopyMobile.searchParams.append('searchEventsFilters', searchEventsFilters);
       urlCopyMobile.searchParams.append('locale', locale?.key.toLowerCase());
       urlCopyMobile.searchParams.append('height', '600');
@@ -331,8 +326,6 @@ const WidgetSettings = () => {
     const limit = form.getFieldValue('limit') ?? 9;
     const locale = form.getFieldValue('locale') ?? languageOptions[0].value;
 
-    urlCopy.searchParams.append('eventUrl', eventDetailsUrlTemplate);
-    urlCopy.searchParams.append('searchEventsUrl', listEventsUrlTemplate);
     urlCopy.searchParams.append('logo', calendarLogoUri);
     urlCopy.searchParams.append('locale', onLanguageSelect(locale)?.key.toLowerCase());
     urlCopy.searchParams.append('limit', limit);
@@ -342,8 +335,6 @@ const WidgetSettings = () => {
     urlCopy.searchParams.append('height', height);
     setUrl(urlCopy);
 
-    urlCopyMobile.searchParams.append('eventUrl', eventDetailsUrlTemplate);
-    urlCopyMobile.searchParams.append('searchEventsUrl', listEventsUrlTemplate);
     urlCopyMobile.searchParams.append('logo', calendarLogoUri);
     urlCopyMobile.searchParams.append('locale', onLanguageSelect(locale)?.key.toLowerCase());
     urlCopyMobile.searchParams.append('limit', limit);

src/utils/getWidthFromAspectRatio.js

@@ -0,0 +1,4 @@
+export const getWidthFromAspectRatio = (aspectRatio = '1:1', fixedHeight) => {
+  const [width, height] = aspectRatio.split(':').map(Number);
+  return (fixedHeight * width) / height;
+};