fix(daypicker): add classic disclaimer to the daypicker (#116)

src/components/DayPicker/README.md

@@ -21,9 +21,9 @@ const today = new Date();
       endSelectedLabel="MEL"
       Icon={PlaneIcon}
       onDayClick={(startDate, endDate) => updater({ startDate, endDate })}
-      isDateRange={true}
+      isDateRange={false}
       hasPrice={true}
-      priceInPoints={false}
+      priceInPoints={true}
       preFooterInfo="Lowest economy price per adult in AUD for a return trip."
       disclaimerMessage="Please read and agree to the terms and conditions."
     />

src/components/DayPicker/components/Footer.js

@@ -159,7 +159,6 @@ const actionButtonStyle = {
 const Footer = ({
   bottomFootersummaryLabel,
   preFooterInfo,
-  bottomFooterDisclaimer,
   preFooterDisclaimer,
   actionText,
   showPreFooter,
@@ -260,12 +259,15 @@ const Footer = ({
                     </span>
                   )}
 
-                  {bottomFooterDisclaimer &&
+                  {endDateData &&
+                  endDateData.price &&
                   priceInPoints &&
                   endDateData.price.isClassic ? (
                     <div css={bottonDisclaimerStyle()}>
-                      <span>+</span>
-                      <span>{bottomFooterDisclaimer}</span>
+                      <span>+ </span>
+                      <span>{endDateData.currencySymbol}</span>
+                      <span>{endDateData.price.taxValue}</span>
+                      <span>^</span>
                     </div>
                   ) : null}
                 </div>
@@ -293,7 +295,6 @@ Footer.propTypes = {
   bottomFootersummaryLabel: PropTypes.string,
   preFooterInfo: PropTypes.string,
   preFooterDisclaimer: PropTypes.string,
-  bottomFooterDisclaimer: PropTypes.string,
   actionText: PropTypes.string.isRequired,
   onActionButtonClick: PropTypes.func.isRequired,
   endDateData: PropTypes.shape({
@@ -318,7 +319,6 @@ Footer.defaultProps = {
   bottomFootersummaryLabel: '',
   preFooterInfo: '',
   preFooterDisclaimer: '',
-  bottomFooterDisclaimer: '',
   endDateData: null,
   priceInPoints: false,
   pointsLabel: ''

src/components/DayPicker/helpers/index.js

@@ -27,6 +27,7 @@ export const DAY_CELL_BORDER_WIDTH = 1;
 export const MONTH_CAPTION_HEIGHT_DESKTOP = 78;
 export const DAY_CELL_HEIGHT_DESKTOP = 90;
 export const DISCLAIMER_HEIGHT = 90;
+export const CLASSIC_DISCLAIMER_HEIGHT = 130;
 
 export const isDayBefore = (firstDate, secondDate) => {
   const first = startOfDay(firstDate);
@@ -119,15 +120,26 @@ export function getInitialDateToFocus(today, startDate, disabledBefore) {
   };
 }
 
+export function getHeight(disclaimerMessage, classicDisclaimerMessage) {
+  if (disclaimerMessage && classicDisclaimerMessage) {
+    return CLASSIC_DISCLAIMER_HEIGHT;
+  }
+  if (disclaimerMessage) {
+    return DISCLAIMER_HEIGHT;
+  }
+  return 0;
+}
+
 export function getItemSize(
   index,
   months,
   firstDayOfWeek,
   isDesktopDevice,
-  disclaimerMessage
+  disclaimerMessage,
+  classicDisclaimerMessage
 ) {
   if (index === 0) {
-    return disclaimerMessage ? DISCLAIMER_HEIGHT : 0;
+    return getHeight(disclaimerMessage, classicDisclaimerMessage);
   }
 
   const monthIndex = index - 1;

src/components/DayPicker/index.js

@@ -195,6 +195,7 @@ class DayPicker extends Component {
     <DisclaimerMessages
       disclaimerMessage={this.props.disclaimerMessage}
       style={style}
+      classicDisclaimerMessage={this.props.classicDisclaimerMessage}
     />
   );
 
@@ -329,6 +330,7 @@ class DayPicker extends Component {
       endDateData,
       shouldAddScrollLockClass,
       disclaimerMessage,
+      classicDisclaimerMessage,
       priceInPoints,
       pointsLabel
     } = this.props;
@@ -390,7 +392,8 @@ class DayPicker extends Component {
                         months,
                         firstDayOfWeek,
                         isDesktopDevice,
-                        disclaimerMessage
+                        disclaimerMessage,
+                        classicDisclaimerMessage
                       )
                     }
                     width={width}
@@ -532,7 +535,9 @@ DayPicker.propTypes = {
   /* show points, classic rewards icon and tax value if it's true */
   priceInPoints: PropTypes.bool,
   /* points label in the footer */
-  pointsLabel: PropTypes.string
+  pointsLabel: PropTypes.string,
+  /* Show classic rewards disclaimer message if the priceInpoints is true */
+  classicDisclaimerMessage: PropTypes.string
 };
 
 DayPicker.defaultProps = {
@@ -586,7 +591,8 @@ DayPicker.defaultProps = {
   shouldAddScrollLockClass: false,
   disclaimerMessage: null,
   priceInPoints: false,
-  pointsLabel: 'points'
+  pointsLabel: 'points',
+  classicDisclaimerMessage: 'Classic Flight Reward one way'
 };
 
 export default DayPicker;

src/components/DisclaimerMessages/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
 
 import { fontFamily, mq, colours, layout } from '../../theme/airways';
+import ClassicRewards from '../../icons/ClassicRewards';
 
 class DisclaimerMessages extends Component {
   getHTMLFormat = () => {
@@ -10,60 +11,87 @@ class DisclaimerMessages extends Component {
   };
 
   render() {
-    const { style } = this.props;
+    const { style, classicDisclaimerMessage } = this.props;
 
     return (
       <div
         role="alert"
         style={style}
         css={{
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          alignItems: 'baseline',
+          justifyContent: 'flex-end',
+          flexDirection: 'column',
           textAlign: 'left',
           fontFamily: fontFamily.main,
           color: colours.darkerGrey,
           background: colours.disabledGrey,
           fontSize: '12px',
           lineHeight: '1.25',
           letterSpacing: '0.17px',
-          padding: `15px ${layout.gutter}`,
+          padding: `15px ${layout.gutter} 0`,
           pointerEvents: 'initial',
           [mq.medium]: {
             fontSize: '14px',
             lineHeight: '1.43',
             letterSpacing: 'normal',
-            padding: `0px ${layout.gutter}`,
-            textAlign: 'center'
+            padding: `0 ${layout.gutter}`,
+            textAlign: 'center',
+            alignItems: 'center'
           }
         }}
       >
         <div
           css={{
-            width: '750px',
+            maxWidth: '750px',
             '& a': {
               color: colours.primary
             },
             '& a:hover': {
               textDecoration: 'underline'
-            }
+            },
+            [mq.medium]: {}
           }}
           /* eslint-disable react/no-danger */
           dangerouslySetInnerHTML={this.getHTMLFormat()}
         />
+        {classicDisclaimerMessage && (
+          <div
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingTop: '16px',
+              [mq.medium]: {
+                paddingTop: '20px'
+              }
+            }}
+          >
+            <ClassicRewards
+              css={{
+                fill: colours.primary,
+                height: '20px',
+                width: '20px',
+                marginRight: '10px'
+              }}
+            />
+            <span css={{ paddingTop: '3px' }}>{classicDisclaimerMessage}</span>
+          </div>
+        )}
       </div>
     );
   }
 }
 
 DisclaimerMessages.propTypes = {
   disclaimerMessage: PropTypes.string,
-  style: PropTypes.shape
+  style: PropTypes.shape,
+  classicDisclaimerMessage: PropTypes.string
 };
 
 DisclaimerMessages.defaultProps = {
   disclaimerMessage: '',
-  style: {}
+  style: {},
+  classicDisclaimerMessage: ''
 };
 
 export default DisclaimerMessages;