chore: IE11 support

bigcommerce · Jan 17, 2020 · 8c91dce · 8c91dce
1 parent 75b15b5
commit 8c91dce
Show file tree

Hide file tree

Showing 13 changed files with 132,241 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "prepublishOnly": "yarn run clean && yarn run build",
     "postpublish": "yarn build-storybook && yarn deploy-storybook -- --existing-output-dir=storybook-static",
     "dev": "concurrently 'yarn build-standalone --watch' 'yarn start-storybook -s ./ -p 9009'",
+    "dev:standalone": "concurrently 'yarn build-standalone --watch'",
     "build-commonjs": "tsc --outDir commonjs --module CommonJS --inlineSourceMap",
     "build-esm": "tsc --module es2015 --outDir esm --inlineSourceMap",
     "build-standalone": "webpack",
@@ -37,6 +38,7 @@
     "@bigcommerce/big-design": "^0.14.0",
     "@segment/top-domain": "^3.0.0",
     "emotion": "^9.1.2",
+    "es6-promise-promise": "^1.0.0",
     "isomorphic-fetch": "^2.2.1",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.5",

diff --git a/src/consent-manager-builder/index.tsx b/src/consent-manager-builder/index.tsx
@@ -106,9 +106,12 @@ export default class ConsentManagerBuilder extends Component<Props, State> {
     const { isLoading, destinations, preferences, newDestinations, isConsentRequired } = this.state
 
     if (isLoading) {
+      console.log('loading')
       return null
     }
 
+    console.log('done')
+
     return children({
       destinations,
       customCategories,
@@ -156,10 +159,17 @@ export default class ConsentManagerBuilder extends Component<Props, State> {
     if (mapCustomPreferences) {
       preferences = customPreferences || initialPreferences || {}
 
-      const hasInitialPreferenceToTrue = Object.values(initialPreferences || {}).some(Boolean)
-      const emptyCustomPreferecences = Object.values(customPreferences || {}).every(
-        v => v === null || v === undefined
-      )
+      let definedObject = function(obj: object | undefined) {
+        return obj == undefined ? {} : obj
+      }
+
+      const hasInitialPreferenceToTrue = Object.keys(definedObject(initialPreferences))
+        .map(e => definedObject(initialPreferences)[e])
+        .some(Boolean)
+
+      const emptyCustomPreferecences = Object.keys(definedObject(customPreferences))
+        .map(e => definedObject(customPreferences)[e])
+        .every(v => v === null || v === undefined)
 
       if (hasInitialPreferenceToTrue && emptyCustomPreferecences) {
         const mapped = mapCustomPreferences(destinations, preferences)

diff --git a/src/consent-manager/banner.tsx b/src/consent-manager/banner.tsx
@@ -2,19 +2,21 @@ import React, { PureComponent } from 'react'
 import styled from 'react-emotion'
 import fontStyles from './font-styles'
 
+import { Button } from './buttons'
+
 const Root = styled<{ backgroundColor: string; textColor: string }, 'div'>('div')`
   ${fontStyles};
   position: relative;
-  padding: 8px;
-  padding-right: 40px;
+  padding: 14px;
   background: ${props => props.backgroundColor};
   color: ${props => props.textColor};
-  text-align: center;
+  text-align: left;
   font-size: 12px;
   line-height: 1.3;
 `
 
 const Content = styled('div')`
+  margin-top: 16px;
   a,
   button {
     display: inline;
@@ -29,33 +31,40 @@ const Content = styled('div')`
 `
 
 const P = styled('p')`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
   margin: 0;
-  &:not(:last-child) {
-    margin-bottom: 6px;
-  }
+`
+const ButtonContainer = styled('div')`
+  display: 'flex';
+  flexdirection: 'row';
+  justifycontent: 'flex-end';
+  flexwrap: 'nowrap';
+  margin: 0;
+  margin-top: 16px;
 `
 
-const CloseButton = styled('button')`
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 8px;
-  border: none;
+const SettingsButton = styled(Button)`
   background: none;
-  color: inherit;
-  font: inherit;
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
+  color: #ffffff;
+  border: 1px solid #ffffff;
+  box-sizing: border-box;
+
+  @media only screen and (min-width: 719px) {
+    margin-left: 8px;
+  }
+`
+
+const AcceptButton = styled(Button)`
+  margin-left: 8px;
 `
 
 interface Props {
   innerRef: (node: HTMLElement | null) => void
-  onClose: () => void
   onChangePreferences: () => void
+  onAcceptAll: () => void
   content: React.ReactNode
-  subContent: React.ReactNode
   backgroundColor: string
   textColor: string
 }
@@ -66,28 +75,34 @@ export default class Banner extends PureComponent<Props> {
   render() {
     const {
       innerRef,
-      onClose,
       onChangePreferences,
+      onAcceptAll,
       content,
-      subContent,
       backgroundColor,
       textColor
     } = this.props
 
     return (
       <Root innerRef={innerRef} backgroundColor={backgroundColor} textColor={textColor}>
-        <Content>
-          <P>{content}</P>
-          <P>
-            <button type="button" onClick={onChangePreferences}>
-              {subContent}
-            </button>
-          </P>
-        </Content>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            alignItems: 'baseline',
+            marginTop: '-16px'
+          }}
+        >
+          <Content>
+            <P>{content}</P>
+          </Content>
 
-        <CloseButton type="button" title="Close" aria-label="Close" onClick={onClose}>
-          ✕
-        </CloseButton>
+          <ButtonContainer>
+            <SettingsButton onClick={onChangePreferences}>Settings</SettingsButton>
+            <AcceptButton onClick={onAcceptAll}>Accept All Cookies</AcceptButton>
+          </ButtonContainer>
+        </div>
       </Root>
     )
   }

diff --git a/src/consent-manager/buttons.tsx b/src/consent-manager/buttons.tsx
@@ -14,6 +14,27 @@ const baseStyles = css`
   transition: box-shadow 80ms ease-in-out;
 `
 
+export const Button = styled('button')`
+  background: #ffffff;
+  height: 36px;
+  color: #454545;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  align-items: center;
+  appearance: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  font-size: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+`
+
 export const DefaultButton = styled('button')`
   ${baseStyles};
   margin-right: 8px;

diff --git a/src/consent-manager/cancel-dialog.tsx b/src/consent-manager/cancel-dialog.tsx
@@ -1,6 +1,19 @@
 import React, { PureComponent } from 'react'
 import Dialog from './dialog'
-import { Button } from '@bigcommerce/big-design'
+import styled from 'react-emotion'
+import { Button } from './buttons'
+
+const BackButton = styled(Button)`
+  background: none;
+  color: #454545;
+  border: none;
+`
+
+const CloseButton = styled(Button)`
+  background: #454545;
+  color: #ffffff;
+  margin-left: 8px;
+`
 
 interface Props {
   innerRef: (node: HTMLElement) => void
@@ -18,10 +31,8 @@ export default class CancelDialog extends PureComponent<Props> {
 
     const buttons = (
       <div>
-        <Button variant="subtle" onClick={onBack}>
-          Back to Preferences
-        </Button>
-        <Button variant="primary">Close</Button>
+        <BackButton onClick={onBack}>Back to Preferences</BackButton>
+        <CloseButton>Close</CloseButton>
       </div>
     )
 

diff --git a/src/consent-manager/container.tsx b/src/consent-manager/container.tsx
@@ -59,7 +59,7 @@ function normalizeDestinations(destinations: Destination[]) {
 
 const Container: React.FC<ContainerProps> = props => {
   const [isDialogOpen, toggleDialog] = React.useState(false)
-  const [showBanner, toggleBanner] = React.useState(true)
+  // const [showBanner, toggleBanner] = React.useState(true)
   const [isCancelling, toggleCancel] = React.useState(false)
 
   let banner = React.useRef<HTMLElement>(null)
@@ -108,24 +108,24 @@ const Container: React.FC<ContainerProps> = props => {
     }
   })
 
-  const onClose = () => {
-    if (props.closeBehavior === undefined || props.closeBehavior === CloseBehavior.DISMISS) {
-      return toggleBanner(false)
-    }
-
-    if (props.closeBehavior === CloseBehavior.ACCEPT) {
-      return props.saveConsent()
-    }
-
-    if (props.closeBehavior === CloseBehavior.DENY) {
-      props.setPreferences({
-        advertising: false,
-        functional: false,
-        marketingAndAnalytics: false
-      })
-      return props.saveConsent()
-    }
-  }
+  // const onClose = () => {
+  //   if (props.closeBehavior === undefined || props.closeBehavior === CloseBehavior.DISMISS) {
+  //     return toggleBanner(false)
+  //   }
+
+  //   if (props.closeBehavior === CloseBehavior.ACCEPT) {
+  //     return props.saveConsent()
+  //   }
+
+  //   if (props.closeBehavior === CloseBehavior.DENY) {
+  //     props.setPreferences({
+  //       advertising: false,
+  //       functional: false,
+  //       marketingAndAnalytics: false
+  //     })
+  //     return props.saveConsent()
+  //   }
+  // }
 
   const handleCategoryChange = (category: string, value: boolean) => {
     props.setPreferences({
@@ -158,15 +158,18 @@ const Container: React.FC<ContainerProps> = props => {
     props.resetPreferences()
   }
 
+  const handleAcceptAll = () => {
+    props.saveConsent()
+  }
+
   return (
     <div>
-      {showBanner && props.isConsentRequired && props.newDestinations.length >= 0 && (
+      {props.isConsentRequired && props.newDestinations.length >= 0 && (
         <Banner
           innerRef={current => (banner = { current })}
-          onClose={onClose}
           onChangePreferences={() => toggleDialog(true)}
+          onAcceptAll={() => handleAcceptAll()}
           content={props.bannerContent}
-          subContent={props.bannerSubContent}
           textColor={props.bannerTextColor}
           backgroundColor={props.bannerBackgroundColor}
         />

diff --git a/src/consent-manager/index.tsx b/src/consent-manager/index.tsx
@@ -3,7 +3,6 @@ import ConsentManagerBuilder from '../consent-manager-builder'
 import Container from './container'
 import { ADVERTISING_CATEGORIES, FUNCTIONAL_CATEGORIES } from './categories'
 import { CategoryPreferences, Destination, ConsentManagerProps } from '../types'
-import { GlobalStyles } from '@bigcommerce/big-design'
 
 const zeroValuePreferences: CategoryPreferences = {
   marketingAndAnalytics: null,
@@ -94,9 +93,7 @@ export default class ConsentManager extends PureComponent<ConsentManagerProps, {
               preferencesDialogContent={preferencesDialogContent}
               cancelDialogTitle={cancelDialogTitle}
               cancelDialogContent={cancelDialogContent}
-            >
-              <GlobalStyles />
-            </Container>
+            ></Container>
           )
         }}
       </ConsentManagerBuilder>