Advertisement
Guest User

Untitled

a guest
Dec 13th, 2018
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react';
  2. import { List, Map } from 'immutable';
  3. import Grid from 'material-ui/Grid';
  4. import Typography from 'material-ui/Typography';
  5. import { I18n, TranslationFunction } from 'react-i18next';
  6.  
  7. import { ExperienceVersion, Landmark, Language } from '@shared/types';
  8. import { environmentVariables, Variables } from '@base/environment-variables';
  9. import { ListExperiencesItemComponent } from './list-experiences-item-component';
  10.  
  11. const styles = {
  12.   padding: {
  13.     padding: 10
  14.   }
  15. };
  16.  
  17. interface Props {
  18.   filteredExperienceVersions: List<ExperienceVersion>;
  19.   landmarks: Map<string, Landmark>;
  20.   i18nKey: string;
  21. }
  22.  
  23. export const HighlightedExperiencesComponent = ({filteredExperienceVersions, landmarks, i18nKey}: Props) => (
  24.   <I18n>
  25.     {(t: TranslationFunction, i18nParams: any) => (
  26.       <Grid item={true} xs={12} lg={10}>
  27.         <Grid container={true} spacing={0} style={styles.padding}>
  28.           <Grid item={true} xs={12}>
  29.             <Typography variant="headline">
  30.               {t(i18nKey)}
  31.             </Typography>
  32.           </Grid>
  33.         </Grid>
  34.         <Grid container={true} spacing={16} style={styles.padding}>
  35.           {filteredExperienceVersions.keySeq().map((xpvId: any) => {
  36.             const xpv = filteredExperienceVersions.get(xpvId);
  37.             return (
  38.               <Grid key={xpvId} item={true} xs={12} sm={4} md={3} xl={2}>
  39.                 <ListExperiencesItemComponent
  40.                   link={`/public/experiences/${xpv.slug.getTranslation(Language.FR)}`}
  41.                   title={
  42.                     xpv.title.getTranslation(
  43.                       Language.fromISOCode(i18nParams.i18n.language.substring(0, 2)),
  44.                       xpv.defaultLanguage
  45.                     )
  46.                   }
  47.                   imgUrl={
  48.                     environmentVariables(Variables.PICTURE_BASE_URL)
  49.                     + 'c_fill,g_auto,h_206,w_275/v1/'
  50.                     + xpv.hostId
  51.                     + '/'
  52.                     + xpv.pictureUrls.first()
  53.                   }
  54.                   price={t(
  55.                     'guest-ui.pages.list-experiences-item.text',
  56.                     {
  57.                       price: xpv.pricing.standardPrice().toString()
  58.                     })
  59.                   }
  60.                   unavailabilityReason={xpv.unavailabilityReason}
  61.                   address={
  62.                     !!landmarks.get(xpv.landmarkId)
  63.                       ? landmarks.get(xpv.landmarkId).address.toLocalityAndAreaLevel1()
  64.                       : ''
  65.                   }
  66.                 />
  67.               </Grid>
  68.             );
  69.           })}
  70.         </Grid>
  71.       </Grid>
  72.     )}
  73.   </I18n>
  74. );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement