Embedded map settings changes

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Enable custom styles [#1348](https://github.com/open-apparel-registry/open-apparel-registry/pull/1348)
 - Add contributor embed level field [#1349](https://github.com/open-apparel-registry/open-apparel-registry/pull/1349)
 - Add full-width embedded map support [#1352](https://github.com/open-apparel-registry/open-apparel-registry/pull/1352)
+- Embedded map settings changes [#1353](https://github.com/open-apparel-registry/open-apparel-registry/pull/1353)
 
 ### Changed
 

src/app/src/components/EmbeddedMapConfig.jsx

@@ -5,11 +5,14 @@ import { func, shape, string, bool } from 'prop-types';
 
 import { userPropType } from '../util/propTypes';
 import { getEmbeddedMapSrc } from '../util/util';
+import { EmbeddedMapInfoLink } from '../util/constants';
+
 import AppGrid from './AppGrid';
 import EmbeddedMapFieldsConfig from './EmbeddedMapFieldsConfig';
 import EmbeddedMapThemeConfig from './EmbeddedMapThemeConfig';
 import EmbeddedMapSizeConfig from './EmbeddedMapSizeConfig';
 import EmbeddedMapCode from './EmbeddedMapCode';
+import EmbeddedMapUnauthorized from './EmbeddedMapUnauthorized';
 
 const styles = {
     container: {
@@ -74,6 +77,8 @@ function EmbeddedMapConfig({
     errors,
     timestamp,
 }) {
+    if (!user.embed_level) return <EmbeddedMapUnauthorized />;
+
     const updateEmbedConfig = field => value =>
         setEmbedConfig(config => ({
             ...config,
@@ -90,9 +95,38 @@ function EmbeddedMapConfig({
 
     return (
         <AppGrid style={styles.container} title="">
-            <Typography>
-                Generate a custom OAR map to embed in your website. The map will
-                include all facilities you have contributed.
+            <Typography paragraph>
+                Generate a customized OAR Embedded Map for your website.
+            </Typography>
+            <Typography paragraph>
+                To begin,{' '}
+                <a href="https://openapparel.org/contribute">
+                    contribute your supplier data
+                </a>{' '}
+                (via upload or API) to the OAR with all of the data fields you
+                wish to have displayed on your map using the template supplied
+                to you by the OAR Team.{' '}
+                <strong>
+                    This list must include any additional data points you would
+                    like to display on your customized map, such as facility
+                    type, number of workers etc.
+                </strong>{' '}
+                Those fields will then populate below. The Embedded Map will
+                display all facilities included in your lists.
+            </Typography>
+            <Typography paragraph>
+                Adjust the below settings to your liking, such as the ordering
+                of the data points. You can turn individual data points on and
+                off as you wish.
+            </Typography>
+            <Typography paragraph>
+                Once complete, copy the Embed Code to add to your website.
+            </Typography>
+            <Typography paragraph style={{ width: '100%' }}>
+                <strong>Have questions?</strong> Check out the FAQs on our{' '}
+                <a href={EmbeddedMapInfoLink}>Embedded Map info page</a> or
+                email{' '}
+                <a href="mailto:info@openapparel.org">info@openapparel.org</a>.
             </Typography>
             <Grid item xs={6}>
                 {user.embed_level === 3 ? (

src/app/src/components/EmbeddedMapFieldsConfig.jsx

@@ -107,8 +107,10 @@ function EmbeddedMapFieldsConfig({ fields, setFields, classes, errors }) {
                 Include these fields
             </Typography>
             <Typography>
-                Choose which fields to display – and what to call them. Facility
-                name, address, and country will always be included.
+                Choose which fields to display on your map (the number of fields
+                you are able to display corresponds to your Embedded Map
+                package). Facility name, address, and OAR ID will always be
+                included.
             </Typography>
             {errors?.embed_fields && (
                 <Typography style={{ color: 'red' }}>

src/app/src/components/EmbeddedMapSizeConfig.jsx

@@ -62,6 +62,12 @@ function EmbeddedMapSizeConfig({
     return (
         <div style={styles.section}>
             <Typography style={styles.sectionHeader}>Size</Typography>
+            <Typography>
+                Please select the desired dimensions of the embedded map for
+                your website. Checking the 100% box will ensure that the map
+                fills to whatever width is available on your website, with the
+                height automatically adjusting from there.
+            </Typography>
             {errors?.width && (
                 <Typography style={{ color: 'red' }}>
                     Error: {errors.width.join(', ')}

src/app/src/components/EmbeddedMapThemeConfig.jsx

@@ -70,6 +70,10 @@ function EmbeddedMapThemeConfig({
     return (
         <div style={styles.section}>
             <Typography style={styles.sectionHeader}>Theme</Typography>
+            <Typography>
+                Availability of theme customization will depend on your Embedded
+                Map package.{' '}
+            </Typography>
             <div style={styles.subsection}>
                 <Typography style={styles.subsectionHeader}>Color</Typography>
                 {embedLevel === 1 ? (
@@ -137,8 +141,7 @@ function EmbeddedMapThemeConfig({
                         Font
                     </Typography>
                     <Typography>
-                        Optional. If no font selected, OAR website font will be
-                        used.
+                        If no font is selected, the OAR font will be used.
                     </Typography>
                     {errors?.font && (
                         <Typography style={{ color: 'red' }}>

src/app/src/components/EmbeddedMapUnauthorized.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { EmbeddedMapInfoLink } from '../util/constants';
+import AppGrid from './AppGrid';
+
+const styles = {
+    container: {
+        marginBottom: '200px',
+    },
+};
+
+function EmbeddedMapUnauthorized() {
+    return (
+        <AppGrid style={styles.container} title="">
+            <Typography paragraph>
+                Looking to display your supplier data on your website?
+            </Typography>
+            <Typography paragraph style={{ width: '100%' }}>
+                The Open Apparel registry offers an easy-to-use embedded map
+                option for your website.
+            </Typography>
+            <Typography paragraph>
+                To activate this paid-for feature, check out the{' '}
+                <a href={EmbeddedMapInfoLink}>OAR Embedded Map</a> page on our
+                website for packages and pricing options.
+            </Typography>
+            <Typography paragraph>
+                Once you have activated it, your OAR Embedded Map Settings will
+                appear on this tab.
+            </Typography>
+        </AppGrid>
+    );
+}
+
+export default EmbeddedMapUnauthorized;

src/app/src/util/constants.js

@@ -520,3 +520,5 @@ export const PPE_FIELD_NAMES = Object.freeze([
 
 export const OARFont = 'ff-tisa-sans-web-pro,sans-serif';
 export const OARColor = '#0427a4';
+
+export const EmbeddedMapInfoLink = 'https://info.openapparel.org/embedded-map';

src/app/src/util/embeddedMap.js

@@ -53,7 +53,7 @@ const filterAndFormatNonstandardFields = ({
         .map(field => ({
             columnName: field,
             displayName: field,
-            visible: true,
+            visible: false,
         }));
 
 export const combineEmbedAndNonstandardFields = (