diff --git a/src/components/DayPicker/README.md b/src/components/DayPicker/README.md index ca1fe495..26c92c64 100644 --- a/src/components/DayPicker/README.md +++ b/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." /> diff --git a/src/components/DayPicker/components/Footer.js b/src/components/DayPicker/components/Footer.js index 805ffe89..9bfe289e 100644 --- a/src/components/DayPicker/components/Footer.js +++ b/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 = ({ )} - {bottomFooterDisclaimer && + {endDateData && + endDateData.price && priceInPoints && endDateData.price.isClassic ? (
- + - {bottomFooterDisclaimer} + + + {endDateData.currencySymbol} + {endDateData.price.taxValue} + ^
) : null} @@ -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: '' diff --git a/src/components/DayPicker/helpers/index.js b/src/components/DayPicker/helpers/index.js index 41f4101a..8c490568 100644 --- a/src/components/DayPicker/helpers/index.js +++ b/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; diff --git a/src/components/DayPicker/index.js b/src/components/DayPicker/index.js index b577dc45..605f1b87 100644 --- a/src/components/DayPicker/index.js +++ b/src/components/DayPicker/index.js @@ -195,6 +195,7 @@ class DayPicker extends Component { ); @@ -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; diff --git a/src/components/DisclaimerMessages/__tests__/__snapshots__/DisclaimerMessages.spec.js.snap b/src/components/DisclaimerMessages/__tests__/__snapshots__/DisclaimerMessages.spec.js.snap index e7d16ecd..4f952c4e 100644 --- a/src/components/DisclaimerMessages/__tests__/__snapshots__/DisclaimerMessages.spec.js.snap +++ b/src/components/DisclaimerMessages/__tests__/__snapshots__/DisclaimerMessages.spec.js.snap @@ -6,14 +6,17 @@ exports[`DisclaimerMessages Disclaimer Message renders correctly 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; text-align: left; font-family: "Ciutadella",sans-serif; color: #323232; @@ -24,7 +27,7 @@ exports[`DisclaimerMessages Disclaimer Message renders correctly 1`] = ` -moz-letter-spacing: 0.17px; -ms-letter-spacing: 0.17px; letter-spacing: 0.17px; - padding: 15px 15px; + padding: 15px 15px 0; pointer-events: initial; } @@ -36,13 +39,17 @@ exports[`DisclaimerMessages Disclaimer Message renders correctly 1`] = ` -moz-letter-spacing: normal; -ms-letter-spacing: normal; letter-spacing: normal; - padding: 0px 15px; + padding: 0 15px; text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } .emotion-0 { - width: 750px; + max-width: 750px; } .emotion-0 a { @@ -54,7 +61,12 @@ exports[`DisclaimerMessages Disclaimer Message renders correctly 1`] = ` text-decoration: underline; } +@media only screen and (min-width:768px) { + +} + { @@ -10,7 +11,7 @@ class DisclaimerMessages extends Component { }; render() { - const { style } = this.props; + const { style, classicDisclaimerMessage } = this.props; return (
+ {classicDisclaimerMessage && ( +
+ + {classicDisclaimerMessage} +
+ )}
); } @@ -58,12 +84,14 @@ class DisclaimerMessages extends Component { DisclaimerMessages.propTypes = { disclaimerMessage: PropTypes.string, - style: PropTypes.shape + style: PropTypes.shape, + classicDisclaimerMessage: PropTypes.string }; DisclaimerMessages.defaultProps = { disclaimerMessage: '', - style: {} + style: {}, + classicDisclaimerMessage: '' }; export default DisclaimerMessages;