diff --git a/CHANGELOG.md b/CHANGELOG.md index c77f38193..ab476e7f3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/app/src/components/EmbeddedMapConfig.jsx b/src/app/src/components/EmbeddedMapConfig.jsx index d03e4d5c5..f16ed51d9 100644 --- a/src/app/src/components/EmbeddedMapConfig.jsx +++ b/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 ; + const updateEmbedConfig = field => value => setEmbedConfig(config => ({ ...config, @@ -90,9 +95,38 @@ function EmbeddedMapConfig({ return ( - - Generate a custom OAR map to embed in your website. The map will - include all facilities you have contributed. + + Generate a customized OAR Embedded Map for your website. + + + To begin,{' '} + + contribute your supplier data + {' '} + (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.{' '} + + 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. + {' '} + Those fields will then populate below. The Embedded Map will + display all facilities included in your lists. + + + 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. + + + Once complete, copy the Embed Code to add to your website. + + + Have questions? Check out the FAQs on our{' '} + Embedded Map info page or + email{' '} + info@openapparel.org. {user.embed_level === 3 ? ( diff --git a/src/app/src/components/EmbeddedMapFieldsConfig.jsx b/src/app/src/components/EmbeddedMapFieldsConfig.jsx index d378b5680..5f36874cf 100644 --- a/src/app/src/components/EmbeddedMapFieldsConfig.jsx +++ b/src/app/src/components/EmbeddedMapFieldsConfig.jsx @@ -107,8 +107,10 @@ function EmbeddedMapFieldsConfig({ fields, setFields, classes, errors }) { Include these fields - 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. {errors?.embed_fields && ( diff --git a/src/app/src/components/EmbeddedMapSizeConfig.jsx b/src/app/src/components/EmbeddedMapSizeConfig.jsx index 6436b34b2..8c9add147 100644 --- a/src/app/src/components/EmbeddedMapSizeConfig.jsx +++ b/src/app/src/components/EmbeddedMapSizeConfig.jsx @@ -62,6 +62,12 @@ function EmbeddedMapSizeConfig({ return (
Size + + 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. + {errors?.width && ( Error: {errors.width.join(', ')} diff --git a/src/app/src/components/EmbeddedMapThemeConfig.jsx b/src/app/src/components/EmbeddedMapThemeConfig.jsx index 582b103ef..765c8055a 100644 --- a/src/app/src/components/EmbeddedMapThemeConfig.jsx +++ b/src/app/src/components/EmbeddedMapThemeConfig.jsx @@ -70,6 +70,10 @@ function EmbeddedMapThemeConfig({ return (
Theme + + Availability of theme customization will depend on your Embedded + Map package.{' '} +
Color {embedLevel === 1 ? ( @@ -137,8 +141,7 @@ function EmbeddedMapThemeConfig({ Font - Optional. If no font selected, OAR website font will be - used. + If no font is selected, the OAR font will be used. {errors?.font && ( diff --git a/src/app/src/components/EmbeddedMapUnauthorized.jsx b/src/app/src/components/EmbeddedMapUnauthorized.jsx new file mode 100644 index 000000000..fabf4eecd --- /dev/null +++ b/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 ( + + + Looking to display your supplier data on your website? + + + The Open Apparel registry offers an easy-to-use embedded map + option for your website. + + + To activate this paid-for feature, check out the{' '} + OAR Embedded Map page on our + website for packages and pricing options. + + + Once you have activated it, your OAR Embedded Map Settings will + appear on this tab. + + + ); +} + +export default EmbeddedMapUnauthorized; diff --git a/src/app/src/util/constants.js b/src/app/src/util/constants.js index 615c78d0a..826a2e368 100644 --- a/src/app/src/util/constants.js +++ b/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'; diff --git a/src/app/src/util/embeddedMap.js b/src/app/src/util/embeddedMap.js index c2d976dcc..432ec349a 100644 --- a/src/app/src/util/embeddedMap.js +++ b/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 = (