maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-27 19:42:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Unify listing info sub titles

Browse source
This commit is contained in:
Hannu Lyytikainen 2018-12-11 11:43:26 +02:00
parent 5fe0ac3d47
commit a0d1984103
6 changed files with 58 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/TransactionPanel/TransactionPanel.css
View file

@ -214,13 +214,12 @@
.detailCardSubtitle {
@apply --marketplaceH5FontStyles;
color: var(--matterColorAnti);
margin-top: 0;
margin-bottom: 0;
@media (--viewportLarge) {
margin-top: 1px;
margin-top: 9px;
margin-bottom: 0;
}
}

8
src/components/TransactionPanel/TransactionPanel.helpers.js
View file

@ -154,7 +154,7 @@ const createListingLink = (listing, label, searchParams = {}, className = '') =>
// Functional component as a helper to build detail card headings
export const DetailCardHeadingsMaybe = props => {
const { authorDisplayName, transaction, transactionRole, listing, listingTitle } = props;
const { transaction, transactionRole, listing, listingTitle, subTitle } = props;
const isCustomer = transactionRole === 'customer';
const canShowDetailCardHeadings = isCustomer && !txIsEnquired(transaction);
@ -162,9 +162,7 @@ export const DetailCardHeadingsMaybe = props => {
return canShowDetailCardHeadings ? (
<div className={css.detailCardHeadings}>
<h2 className={css.detailCardTitle}>{listingTitle}</h2>
<p className={css.detailCardSubtitle}>
<FormattedMessage id="TransactionPanel.hostedBy" values={{ name: authorDisplayName }} />
</p>
<p className={css.detailCardSubtitle}>{subTitle}</p>
<AddressLinkMaybe
transaction={transaction}
transactionRole={transactionRole}
@ -182,6 +180,7 @@ export const BookingPanelMaybe = props => {
transactionRole,
listing,
listingTitle,
subTitle,
provider,
onManageDisableScrolling,
timeSlots,
@ -200,6 +199,7 @@ export const BookingPanelMaybe = props => {
listing={listing}
handleBookingSubmit={() => console.log('submit')}
title={listingTitle}
subTitle={subTitle}
authorDisplayName={authorDisplayName}
onManageDisableScrolling={onManageDisableScrolling}
timeSlots={timeSlots}

21
src/components/TransactionPanel/TransactionPanel.js
View file

@ -2,11 +2,13 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
import classNames from 'classnames';
import { txIsRequested, propTypes } from '../../util/types';
import { txIsRequested, LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
import { ensureListing, ensureTransaction, ensureUser } from '../../util/data';
import { isMobileSafari } from '../../util/userAgent';
import { formatMoney } from '../../util/currency';
import { AvatarMedium, AvatarLarge, ResponsiveImage, ReviewModal } from '../../components';
import { SendMessageForm } from '../../forms';
import config from '../../config';
// These are internal components that make this file more readable.
import {
@ -164,6 +166,20 @@ export class TransactionPanelComponent extends Component {
? deletedListingTitle
: currentListing.attributes.title;
const unitType = config.bookingUnitType;
const isNightly = unitType === LINE_ITEM_NIGHT;
const isDaily = unitType === LINE_ITEM_DAY;
const unitTranslationKey = isNightly
? 'TransactionPanel.perNight'
: isDaily
? 'TransactionPanel.perDay'
: 'TransactionPanel.perUnit';
const price = currentListing.attributes.price;
const formattedPrice = formatMoney(intl, price);
const bookingSubTitle = `${formattedPrice} ${intl.formatMessage({ id: unitTranslationKey })}`;
const firstImage =
currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
@ -300,11 +316,11 @@ export class TransactionPanelComponent extends Component {
) : null}
<DetailCardHeadingsMaybe
authorDisplayName={authorDisplayName}
transaction={currentTransaction}
transactionRole={transactionRole}
listing={currentListing}
listingTitle={listingTitle}
subTitle={bookingSubTitle}
/>
<BookingPanelMaybe
authorDisplayName={authorDisplayName}
@ -312,6 +328,7 @@ export class TransactionPanelComponent extends Component {
transactionRole={transactionRole}
listing={currentListing}
listingTitle={listingTitle}
subTitle={bookingSubTitle}
provider={currentProvider}
onManageDisableScrolling={onManageDisableScrolling}
timeSlots={timeSlots}

42
src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
View file

@ -850,7 +850,6 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -876,6 +875,7 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -1046,6 +1046,7 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -2167,7 +2168,6 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -2193,6 +2193,7 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -2363,6 +2364,7 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -3484,7 +3486,6 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -3510,6 +3511,7 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -3680,6 +3682,7 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -4801,7 +4804,6 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -4827,6 +4829,7 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -4997,6 +5000,7 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -6118,7 +6122,6 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -6144,6 +6147,7 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -6314,6 +6318,7 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -7435,7 +7440,6 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -7461,6 +7465,7 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -7631,6 +7636,7 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -8752,7 +8758,6 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -8778,6 +8783,7 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -8948,6 +8954,7 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -10069,7 +10076,6 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -10095,6 +10101,7 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -10265,6 +10272,7 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -11386,7 +11394,6 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -11412,6 +11419,7 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -11582,6 +11590,7 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -12703,7 +12712,6 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -12729,6 +12737,7 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -12899,6 +12908,7 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -14020,7 +14030,6 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -14046,6 +14055,7 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -14216,6 +14226,7 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -15337,7 +15348,6 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -15363,6 +15373,7 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -15533,6 +15544,7 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -16654,7 +16666,6 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -16680,6 +16691,7 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -16850,6 +16862,7 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {
@ -17971,7 +17984,6 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
</div>
</div>
<Component
authorDisplayName="provider display name"
listing={
Object {
"attributes": Object {
@ -17997,6 +18009,7 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
}
}
listingTitle="listing1 title"
subTitle="55 TransactionPanel.perNight"
transaction={
Object {
"attributes": Object {
@ -18167,6 +18180,7 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
"type": "user",
}
}
subTitle="55 TransactionPanel.perNight"
timeSlots={null}
transaction={
Object {

4
src/translations/en.json
View file

@ -774,7 +774,6 @@
"TransactionPanel.declineSaleFailed": "Oops, declining failed. Please try again.",
"TransactionPanel.deletedListingOrderTitle": "a listing",
"TransactionPanel.deletedListingTitle": "Deleted listing",
"TransactionPanel.hostedBy": "Hosted by {name}",
"TransactionPanel.initialMessageFailed": "Whoops, failed to send message from checkout.",
"TransactionPanel.messageDeletedListing": "However, the listing is deleted and cannot be viewed anymore.",
"TransactionPanel.messageLoadingFailed": "Something went wrong when loading messages. Please refresh the page and try again.",
@ -787,6 +786,9 @@
"TransactionPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.",
"TransactionPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.",
"TransactionPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
"TransactionPanel.perDay": "per day",
"TransactionPanel.perNight": "per night",
"TransactionPanel.perUnit": "per unit",
"TransactionPanel.requestToBook": "Request to book",
"TransactionPanel.saleAcceptedTitle": "You accepted a request from {customerName} to book {listingLink}.",
"TransactionPanel.saleCancelledTitle": "The booking from {customerName} for {listingLink} has been cancelled.",

4
src/translations/fr.json
View file

@ -774,7 +774,6 @@
"TransactionPanel.declineSaleFailed": "Oups, impossible de refuser. Veuillez essayer de nouveau..",
"TransactionPanel.deletedListingOrderTitle": "une annonce",
"TransactionPanel.deletedListingTitle": "Annonce supprimée",
"TransactionPanel.hostedBy": "Proposé par {name}",
"TransactionPanel.initialMessageFailed": "Oups, impossible d'envoyer le message durant le paiement.",
"TransactionPanel.messageDeletedListing": "Cependant l'annonce est supprimée et ne peux plus être vue.",
"TransactionPanel.messageLoadingFailed": "Quelque chose n'a pas fonctionné lors du chargement des messages. Veuillez rafraichir la page et essayer de nouveau.",
@ -787,6 +786,9 @@
"TransactionPanel.orderPreauthorizedInfo": "{providerName} a reçu un message à propos de votre demande de réservation.",
"TransactionPanel.orderPreauthorizedSubtitle": "Vous avez fait une demande de réservation {listingLink}.",
"TransactionPanel.orderPreauthorizedTitle": "Bravo, {customerName} !",
"TransactionPanel.perDay": "per day",
"TransactionPanel.perNight": "par nuit",
"TransactionPanel.perUnit": "per unit",
"TransactionPanel.requestToBook": "Réserver",
"TransactionPanel.saleAcceptedTitle": "Vous avez accepté la demande de réservation de {customerName} pour {listingLink}.",
"TransactionPanel.saleCancelledTitle": "La réservation de {customerName} pour {listingLink} a été annulée.",