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;