#95 Second round of updates

marzeelabs · Dec 13, 2018 · 68e6208 · 68e6208
1 parent c45f7ec
commit 68e6208
Show file tree

Hide file tree

Showing 36 changed files with 566 additions and 212 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
     - If after running the above command it complains that *xcode alone is not sufficient on sierra*, try running `xcode-select --install`. Note that **macOS Sierra 10.12.6 or higher and XCode 9.2 are required.**
 
 
-1. [hugo](https://gohugo.io/) v0.47.1 - builds the structure of the website based on the content setup, although we're phasing it out in favor of a fully JS/React solution. Any version over 0.27.1 should still work though.
+1. [hugo](https://gohugo.io/) v0.52.0 - builds the structure of the website based on the content setup, although we're phasing it out in favor of a fully JS/React solution. Any version over 0.27.1 should still work though.
 
     - Install:
       ```sh
@@ -30,7 +30,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
       brew update && brew upgrade hugo
       ```
 
-2. [yarn](https://yarnpkg.com/) v1.10.0 - package/dependency manager. Any version of yarn above 0.27.5 should still work though.
+2. [yarn](https://yarnpkg.com/) v1.12.3 - package/dependency manager. Any version of yarn above 0.27.5 should still work though.
 
     - Install:
       ```sh
@@ -46,7 +46,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
       ```
     - Switch between yarn versions (global change):
       ```sh
-      brew switch yarn 1.10.0
+      brew switch yarn 1.12.3
       ```
 
 3. [nvm](https://github.com/creationix/nvm) v0.33.11 - (not used by Netlify), very useful to manage your locale Node.js versions.
@@ -61,7 +61,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
       source ~/.bash_profile
       ```
 
-4. [Node.js](https://nodejs.org/en/) v8.11.3 LTS (lts/carbon) - our JavaScript runtime, we need it, for everything. Any Node v8.x.x or even v6.x.x (lts/boron) should still work though.
+4. [Node.js](https://nodejs.org/en/) v8.12.0 LTS (lts/carbon) - our JavaScript runtime, we need it, for everything. Any Node v8.x.x or even v6.x.x (lts/boron) should still work though.
 
     - Install or update:
       ```sh

diff --git a/components/partials/EndFooter.jsx b/components/partials/EndFooter.jsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import BesugoComponent from 'Besugo';
+import ReactHtmlParser from 'react-html-parser';
+
 import SocialIcons from 'partials/SocialIcons';
 
+const cns = 'footer';
+
 export default class EndFooter extends BesugoComponent {
   static config = {
     tag: 'EndFooter',
@@ -26,10 +30,13 @@ export default class EndFooter extends BesugoComponent {
         label: link.getAttribute('label'),
         url: link.getAttribute('url'),
       }));
+
+    const copyright = xplaceholder.getChildren('Copyright');
+    props.copyright = JSON.parse(copyright[0].text());
   }
 
   getData() {
-    return Object.assign({
+    const data = Object.assign({
       copyright: '\xA9 2018 Marzee Labs.',
       links: [
         {
@@ -46,16 +53,22 @@ export default class EndFooter extends BesugoComponent {
         },
       ],
     }, this.props);
+
+    // "Copyright" comes pre-built with HTML markup already.
+    // We need to parse it so that it doesn't show up as simple text
+    data.copyright = ReactHtmlParser(data.copyright);
+
+    return data;
   }
 
   renderBlock() {
     const data = this.getData();
 
     return (
-      <footer className="footer">
-        <ul className="footer__menu">
+      <footer className={ `${cns}` }>
+        <ul className={ `${cns}__menu` }>
           { data.links.map(link => (
-            <li className="footer__menu-item" key={ `link-${link.label}` }>
+            <li className={ `${cns}__menu-item` } key={ `link-${link.label}` }>
               <a href={ link.url }>
                 { link.label }
               </a>
@@ -65,15 +78,15 @@ export default class EndFooter extends BesugoComponent {
 
         <SocialIcons section="footer" { ...data } />
 
-        <div className="footer__copyright">
-          <a href={ data.homelink } className="footer__copyright-logo">
+        <div className={ `${cns}__copyright` }>
+          <a href={ data.homelink } className={ `${cns}__copyright-logo` }>
             <svg>
               <use xlinkHref="#logo-main" />
             </svg>
           </a>
-          <p>
+          <div className={ `${cns}__copyright-text` }>
             { data.copyright }
-          </p>
+          </div>
         </div>
 
       </footer>

diff --git a/components/partials/LocaleSwitcher.jsx b/components/partials/LocaleSwitcher.jsx
@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+
+const cns = 'locale-switcher';
+
+export default class LocaleSwitcher extends PureComponent {
+  render() {
+    const {
+      locale,
+      localeSwitches,
+    } = this.props;
+
+    return !localeSwitches.length ? null : (
+      <li className={ `${cns}` }>
+        { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
+        <a>{ locale.toUpperCase() }</a>
+
+        <ul className={ `${cns}__list` }>
+          { localeSwitches.map(localeSwitch => (
+            <li
+              className={ `${cns}__locale` }
+              key={ `locale-switcher-${localeSwitch.locale}` }
+            >
+              <a
+                className={ `${cns}__locale-link` }
+                href={ localeSwitch.url }
+              >
+                { localeSwitch.locale.toUpperCase() }
+              </a>
+            </li>
+          )) }
+        </ul>
+      </li>
+    );
+  }
+}
diff --git a/components/partials/Reservation/DatePicker.jsx b/components/partials/Reservation/DatePicker.jsx
@@ -48,7 +48,7 @@ export default class DatePicker extends Component {
     // important, it will be replaced when the page is loaded.
     if (isMounted) {
       const date = new Date();
-      const maxdate = (new Date());
+      const maxdate = new Date();
       maxdate.setFullYear(date.getFullYear() + 1);
 
       config.activeStartDate = date;

diff --git a/components/partials/Reservation/Finished.jsx b/components/partials/Reservation/Finished.jsx
@@ -3,20 +3,41 @@ import React, { PureComponent } from 'react';
 const cns = 'reservation-finished';
 
 export default class ReservationFinished extends PureComponent {
-  componentDidUpdate() {
-    const { state } = this.props;
-    if (state.index > state.lastIndex) {
-      console.log(state);
-    }
-  }
-
   render() {
     const {
       strings,
       state,
+      email,
     } = this.props;
 
-    const { mode } = state;
+    const {
+      mode,
+      finished,
+      failed,
+    } = state;
+
+    const title = [];
+    const message = [];
+
+    if (failed) {
+      title.push(strings.finished.failed);
+      message.push(strings.finished.messageFailed);
+      message.push(<a href={ `mailto:${email}` } key="text-email">{ email }</a>);
+    }
+    else if (finished) {
+      // eslint-disable-next-line prefer-destructuring
+      title.push(strings.finished.title);
+
+      if (mode === 'visit') {
+        message.push(strings.finished.messageVisit);
+      }
+      else {
+        message.push(strings.finished.messageBooking);
+      }
+    }
+    else {
+      title.push(strings.finished.sending);
+    }
 
     return (
       <div className={ `${cns}__container reservation__panel` }>
@@ -26,14 +47,19 @@ export default class ReservationFinished extends PureComponent {
           </svg>
         </div>
         <div className={ `${cns}__title` }>
-          { strings.finished.title }
-        </div>
-        <div className={ `${cns}__message` }>
-          { mode === 'visit'
-            ? strings.finished.messageVisit
-            : strings.finished.messageBooking
-          }
+          { title }
         </div>
+
+        { !message.length ? null : (
+          <div className={ `${cns}__message` }>
+            { message.map((text, i) => (
+              /* eslint-disable-next-line react/no-array-index-key */
+              <p key={ `text-${i}` }>
+                { text }
+              </p>
+            )) }
+          </div>
+        ) }
       </div>
     );
   }

diff --git a/components/partials/Reservation/Guide.jsx b/components/partials/Reservation/Guide.jsx
@@ -68,6 +68,53 @@ const isWeekend = (dates) => {
 const cns = 'reservation-guide';
 
 export default class ReservationGuide extends PureComponent {
+  isEverything() {
+    const { state } = this.props;
+
+    const {
+      dates,
+      mode,
+      options,
+      people,
+    } = state;
+
+    if (!dates) {
+      return false;
+    }
+
+    const days = [
+      dates[0].toLocaleDateString ? dates[0].toLocaleDateString() : dates[0].toString(),
+      dates[1].toLocaleDateString ? dates[1].toLocaleDateString() : dates[1].toString(),
+    ];
+
+    const today = new Date();
+    const apocalypse = new Date();
+    apocalypse.setFullYear(apocalypse.getFullYear() + 1);
+
+    const limits = [
+      today.toLocaleDateString ? today.toLocaleDateString() : today.toString(),
+      apocalypse.toLocaleDateString ? apocalypse.toLocaleDateString() : apocalypse.toString(),
+    ];
+
+    if (days[0] !== limits[0] || days[1] !== limits[1]) {
+      return false;
+    }
+
+    if (mode !== 'booking') {
+      return false;
+    }
+
+    if (Object.values(options).some(value => !value)) {
+      return false;
+    }
+
+    if (people !== 4 && people !== '4') {
+      return false;
+    }
+
+    return true;
+  }
+
   render() {
     const {
       strings,
@@ -163,7 +210,7 @@ export default class ReservationGuide extends PureComponent {
 
     return (
       <div className={ `${cns}__content` }>
-        { guide.length && (
+        { !guide.length ? null : (
           <div className={ `${cns}__guide` }>
             { guide.map(line => (
               <p className={ `${cns}__guide-line` } key={ `guide-line-${line.key}` }>
@@ -196,6 +243,12 @@ export default class ReservationGuide extends PureComponent {
             </ul>
           </div>
         ) }
+
+        { this.isEverything() && (
+          <div className={ `${cns}__fries` }>
+            { strings.status.fries }
+          </div>
+        ) }
       </div>
     );
   }

diff --git a/components/partials/Reservation/Info.jsx b/components/partials/Reservation/Info.jsx
@@ -57,7 +57,7 @@ export default class Info extends PureComponent {
             { strings.info.notes }
           </div>
           <textarea
-            name="notes"
+            name="message"
             className="reservation__info-notes__input"
             disabled={ slideIndex !== index }
             cols="44"