Ask for copyright info on upload

src/assets/css/extras.css

@@ -5,6 +5,11 @@
   --app-theme-orange-lighter: #fba930;
   --app-theme-error: #d44b4b;
 }
+
+
+.form-gen-inner-wrapper{ 
+  padding:0px 30px;
+}
 .rich-text-container p, .rich-text-container ul, .rich-text-container ol {
   margin: 1em !important;
 }
@@ -2631,6 +2636,9 @@
 
 /* ------------------------ MOBILE PHONE AREA ------------------------- */
 @media only screen and (max-width: 767px) {
+  .form-gen-inner-wrapper{ 
+    padding: 0px 15px;
+  }
   .new-sign-in {
     padding: 10px;
     font-size: 13px;
@@ -3899,6 +3907,7 @@
   width: var(--modal-width-size);
 }
 .me-modal-title {
+  font-weight: bold;
   text-align: left !important;
 }
 

src/components/Constants.js

@@ -1,13 +1,32 @@
-const CONST = {
-
-}
-CONST['LIMIT'] = 140
-CONST['BIG_LIMIT'] = 400
+const CONST = {};
+CONST["LIMIT"] = 140;
+CONST["BIG_LIMIT"] = 400;
 
-
-export const TESTIMONIAL = "Testimonial"
-export const ACTION = "Action"
+export const TESTIMONIAL = "Testimonial";
+export const ACTION = "Action";
 export const VENDOR = "Service Provider";
-export const EVENT = "Event"
+export const EVENT = "Event";
+
+export default CONST;
 
-export default CONST;
+export const COPYRIGHT_OPTIONS = {
+  YES: {
+    value: true,
+    key: "YES",
+    text: "Yes. I took the photo or made the image, or was given permission by the person who made the image",
+    notes:
+      "Took the photo or made the image, or was given permission by the person who made the image",
+  },
+  YES_CHECKED: {
+    value: true,
+    key: "YES_CHECKED",
+    text: "Yes. I have checked that the image is nto copyright protected.",
+    notes: "Checked that the image is not copyright protected",
+  },
+  NO: {
+    value: false,
+    key: "NO",
+    text: "No. The image may be protected by copyright, and I don't have permission.",
+    notes: "Image may be protected by copyright, and I don't have permission",
+  },
+};

src/components/Pages/ActionsPage/OneActionPage.js

@@ -43,12 +43,17 @@ import {
 } from "./ActionStateConstants";
 import Seo from "../../Shared/Seo";
 import ProductTour, { ACTIONS, STATUS } from "react-joyride";
-import { handleTourCallback, smartString } from "../../Utils";
+import {
+  handleTourCallback,
+  smartString,
+  fetchCopyrightData,
+} from "../../Utils";
 import { isMobile } from "react-device-detect";
 import { ACTION_TO_AUTO_START } from "./ActionCard";
 import MEButton from "../Widgets/MEButton";
 import RibbonBanner from "../../Shared/RibbonBanner";
 import { ACTION, TESTIMONIAL } from "../../Constants";
+import MEImage from "../../Shared/MEImage";
 
 /**
  * This page displays a single action and the cart of actions that have been added to todo and have been completed
@@ -476,7 +481,10 @@ class OneActionPage extends React.Component {
         <StoryForm
           ModalType={ACTION}
           close={() => this.props.toggleModal({ show: false })}
-          draftData={toEdit}
+          draftData={{
+            ...(toEdit || {}),
+            ...fetchCopyrightData(toEdit?.image?.info),
+          }}
           TriggerSuccessNotification={() => ({})}
           updateItemInRedux={this.props.updateActionsInRedux}
           reduxItems={this.props.actions}
@@ -726,8 +734,9 @@ class OneActionPage extends React.Component {
               {/* action image */}
               <div className="col-lg-6 col-md-12 mob-reset-padding">
                 <div className="img-box action-pic-fix">
-                  <img
+                  <MEImage
                     src={action.image ? action.image.url : null}
+                    image={action?.image}
                     alt=""
                     data-imagezoom="true"
                     className="img-responsive z-depth-float me-anime-open-in"

src/components/Pages/ActionsPage/StoryForm.js

@@ -9,7 +9,7 @@ import {
   celebrateWithConfetti,
   reduxLoadTestimonials,
 } from "../../../redux/actions/pageActions";
-import MEButton from "../Widgets/MEButton";
+// import MEButton from "../Widgets/MEButton";
 import { ACTION, EVENT, TESTIMONIAL, VENDOR } from "../../Constants";
 
 /********************************************************************/
@@ -553,7 +553,17 @@ class StoryForm extends React.Component {
         delete body.image;
       }
     }
+
+    const compulsoryFields = [
+      "copyright",
+      "copyright_att",
+      "guardian_info",
+      "underAge",
+      "permission_key",
+      "permission_notes",
+    ];
     let names = this.getFieldNames(body, formJson);
+    names = [...names, ...compulsoryFields];
     delete body?.ImgToDel;
     let newBody = commonKeys({ ...body }, names);
 
@@ -569,6 +579,7 @@ class StoryForm extends React.Component {
       );
     if (this.state.vid !== "other" && this.state.vendor !== "")
       this.setState({ vendor: "" });
+
     return (
       <MEFormGenerator
         TriggerModal={(bool) => this.props.TriggerModal(bool)}
@@ -580,39 +591,28 @@ class StoryForm extends React.Component {
         onSubmit={this.onSubmit}
         info={this.state.formNotification}
         onMount={(reset) => this.setState({ formReset: reset })}
+        elevate={false}
+        animate={false}
         moreActions={
           <>
-            <MEButton
-              style={{
-                background: "rgb(209 70 70)",
-                color: "white",
-                borderColor: "rgb(209 70 70)",
-              }}
-              className="touchable-opacity"
-              type="button"
+            <button
+              className="touchable-opacity me-flat-btn"
+              style={{ background: "antiquewhite", color: "black" }}
               onClick={() => {
-                this.props.close && this.props.close();
-              }}
-              containerStyle={{
-                padding: "10px 12px",
-                fontSize: 18,
+                this.state.formReset && this.state.formReset();
               }}
             >
-              Cancel
-            </MEButton>
-            <MEButton
-              variation="accent"
-              type="button"
+              Clear
+            </button>
+            <button
+              className="touchable-opacity me-flat-btn"
+              style={{ background: "maroon", color: "white" }}
               onClick={() => {
-                this.state.formReset && this.state.formReset();
-              }}
-              containerStyle={{
-                padding: "10px 12px",
-                fontSize: 18,
+                this.props.close && this.props.close();
               }}
             >
-              Clear
-            </MEButton>
+              Cancel
+            </button>
           </>
         }
       />
@@ -672,6 +672,7 @@ class StoryForm extends React.Component {
     if (!data || data.isNotComplete) {
       return;
     }
+
     var Url = URLS[this.props.ModalType];
     const communityID = community ? { community_id: community.id } : {};
     const userEmail = user ? { user_email: user.email } : {};
@@ -791,6 +792,7 @@ class StoryForm extends React.Component {
         text: "We are sending now...",
       },
     });
+
     apiCall(Url, body).then((json) => {
       let name = ModalType?.toLowerCase() + "_id";
       if (json && json.success) {

src/components/Pages/EventsPage/OneEventPage.js

@@ -11,6 +11,7 @@ import {
   locationFormatJSX,
   smartString,
   parseJSON,
+  fetchCopyrightData,
 } from "../../Utils";
 import ShareButtons from "../../Shared/ShareButtons";
 import Seo from "../../Shared/Seo";
@@ -31,6 +32,7 @@ import StoryForm from "../ActionsPage/StoryForm";
 import ICSEventCreator from "./ICSEventCreator";
 import AddToGoogleCalendar from "./AddToGoogleCalendar";
 import RibbonBanner from "../../Shared/RibbonBanner";
+import MEImage from "../../Shared/MEImage";
 // import METooltip from "../../Shared/METooltip";
 class OneEventPage extends React.Component {
   constructor(props) {
@@ -50,6 +52,7 @@ class OneEventPage extends React.Component {
       const json = await apiCall("events.info", { event_id: id });
       if (json.success) {
         this.setState({ event: json.data });
+        console.log("I brought event", json);
       } else {
         this.setState({ error: json.error });
       }
@@ -85,6 +88,7 @@ class OneEventPage extends React.Component {
       ...(parseJSON(event?.location) || {}),
       end_date_and_time: event?.end_date_and_time?.slice(0, 16),
       start_date_and_time: event?.start_date_and_time?.slice(0, 16),
+      ...fetchCopyrightData(event?.image?.info),
     };
     this.props.toggleModal({
       show: true,
@@ -280,7 +284,7 @@ class OneEventPage extends React.Component {
   renderEventLocation = (event) => {
     return (
       <>
-        {(event?.is_published && event?.external_link) && (
+        {event?.is_published && event?.external_link && (
           <MEButton
             onClick={(e) => {
               e.preventDefault();
@@ -358,7 +362,7 @@ class OneEventPage extends React.Component {
           <div className="single-event sec-padd" style={{ borderWidth: 0 }}>
             <div className="row">
               <div className="col-12 col-lg-4" style={{ marginBottom: 15 }}>
-                <img
+                <MEImage
                   style={{
                     width: "100%",
                     maxHeight: "250px",
@@ -367,6 +371,7 @@ class OneEventPage extends React.Component {
                   }}
                   className="test-event-image"
                   src={event.image ? event.image.url : notFound}
+                  image={event?.image}
                   alt=""
                 />
                 {!event?.is_published && <RibbonBanner />}

src/components/Pages/FeatureFlags/Feature.js

@@ -1,9 +1,12 @@
 import { useSelector } from "react-redux";
+import { IS_LOCAL } from "../../../config";
 
 export default function Feature({ name, fallback, children }) {
   const flags = useSelector((state) => state.page.community.feature_flags);
   const flag = (flags || []).find((f) => f?.key === name);
-
+
+  // Unless we are specifically testing feature flags, its better if every feature is available when we are local mode
+  if (IS_LOCAL) return children;
   if (flag) return children;
   if (fallback) return fallback;
   return null;

src/components/Pages/ServicesPage/OneServicePage.js

@@ -6,13 +6,21 @@ import notFound from "./green-mat.jpg";
 import MESectionWrapper from "../Widgets/MESectionWrapper";
 import ErrorPage from "../Errors/ErrorPage";
 import MECard from "../Widgets/MECard";
-import { extractTextFromHTML, getHumanFriendlyDate } from "../../Utils";
+import {
+  extractTextFromHTML,
+  getHumanFriendlyDate,
+  fetchCopyrightData,
+} from "../../Utils";
 import Seo from "../../Shared/Seo";
 import MEButton from "../Widgets/MEButton";
 import { VENDOR } from "../../Constants";
-import { reduxLoadServiceProviders, reduxToggleUniversalModal } from "../../../redux/actions/pageActions";
+import {
+  reduxLoadServiceProviders,
+  reduxToggleUniversalModal,
+} from "../../../redux/actions/pageActions";
 import StoryForm from "../ActionsPage/StoryForm";
 import RibbonBanner from "../../Shared/RibbonBanner";
+import MEImage from "../../Shared/MEImage";
 
 class OneServicePage extends React.Component {
   constructor(props) {
@@ -33,6 +41,7 @@ class OneServicePage extends React.Component {
       image: vendor?.logo,
       key_contact_email: vendor?.key_contact?.email,
       key_contact_name: vendor?.key_contact?.name,
+      ...fetchCopyrightData(vendor?.logo?.info),
     };
     this.props.toggleModal({
       show: true,
@@ -166,7 +175,7 @@ class OneServicePage extends React.Component {
             <div className="row">
               {/* ------------------------------------------------ VENDOR DETAILS --------------------------------- */}
               <div className="col-md-4 col-lg-4 col-sm-6 col-12">
-                <img
+                <MEImage
                   className="w-100 me-anime-open-in"
                   style={{
                     marginBottom: 6,
@@ -175,6 +184,7 @@ class OneServicePage extends React.Component {
                     objectFit: "contain",
                   }}
                   src={vendor.logo ? vendor.logo.url : notFound}
+                  image={vendor?.logo}
                   alt={vendor.name}
                 />
                 {!vendor?.is_published && <RibbonBanner />}
@@ -436,8 +446,7 @@ const mapStoreToProps = (store) => {
   };
 };
 const mapDispatchToProps = {
-    toggleModal: reduxToggleUniversalModal,
-    updateVendorsInRedux: reduxLoadServiceProviders,
-
-  };
+  toggleModal: reduxToggleUniversalModal,
+  updateVendorsInRedux: reduxLoadServiceProviders,
+};
 export default connect(mapStoreToProps, mapDispatchToProps)(OneServicePage);

src/components/Pages/ServicesPage/ServicesPage.js

@@ -16,6 +16,7 @@ import {
   processFiltersAndUpdateURL,
   recreateFiltersForState,
   searchIsActiveFindContent,
+  fetchCopyrightData
 } from "../../Utils";
 import { NONE } from "../Widgets/MELightDropDown";
 import HorizontalFilterBox from "../EventsPage/HorizontalFilterBox";
@@ -267,6 +268,7 @@ class ServicesPage extends React.Component {
       image: vendor?.logo,
       key_contact_email: vendor?.key_contact?.email,
       key_contact_name: vendor?.key_contact?.name,
+      ...fetchCopyrightData(vendor?.logo?.info)
     };
     this.props.toggleModal({
       show: true,

src/components/Pages/StoriesPage/OneTestimonialPage.js

@@ -18,6 +18,7 @@ import { TESTIMONIAL } from "../../Constants";
 import { reduxLoadTestimonials, reduxToggleUniversalModal } from "../../../redux/actions/pageActions";
 import StoryForm from "../ActionsPage/StoryForm";
 import RibbonBanner from "../../Shared/RibbonBanner";
+import MEImage from "../../Shared/MEImage";
 
 class OneTestimonialPage extends React.Component {
   constructor(props) {
@@ -275,7 +276,7 @@ class OneTestimonialPage extends React.Component {
                   className="img-box"
                   style={{ height: 200, borderRadius: 10 }}
                 >
-                  <img
+                  <MEImage
                     style={{
                       width: "100%",
                       height: "100%",
@@ -284,6 +285,7 @@ class OneTestimonialPage extends React.Component {
                     }}
                     className="z-depth-1 me-anime-open-in"
                     src={story && story.file ? story.file.url : notFound}
+                    image = {story?.file}
                     alt=""
                   />
                 </div>