All files / src/templates/Product/parts/ProductAddress ProductAddress.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useState } from 'react';
import { ProductMap, ProductMapPopup } from '../../../../components';
import { Button } from 'ag-ems-ui-library';
import { useTranslation } from 'react-i18next';
 
const styles = require('./ProductAddress.module.css');
 
export const ProductAddress: FC<{
  product: any;
}> = ({ product }) => {
  const { t } = useTranslation();
 
  const [showMap, setShowMap] = useState(false);
 
  return <div className={styles.Address}>
    <div className={styles.AddressMap}>
      <ProductMap product={product} onClick={() => setShowMap(true)} />
      <ProductMapPopup product={product} isOpen={showMap} onClose={() => setShowMap(false)} />
    </div>
    <div className={styles.AddressText}>
      {product.productType === 'bicycle'
        ? <>
          <h3>{product.vendor.name}</h3>
          <pre>{product.vendor.address}</pre>
          {product.vendor.phone && <p>Tel.: <a href={`tel:${product.vendor.phone}`}>{product.vendor.phone}</a></p>}
          {product.vendor.email && <p>Mail: <a href={`mailto:${product.vendor.email}`}>{product.vendor.email}</a></p>}
          <div className={styles.AddressTime}>
            {product.vendor.worktime.map(line =>
              <div className={styles.AddressTimeLine}>
                <span>{line.worktime_line.day}</span>
                <pre>{line.worktime_line.time}</pre>
              </div>
            )}
          </div>
        </>
        : <>
          <h3>{product.name}</h3>
          <p>{product.product_attributes.find(p => p.key === 'address')?.value}</p>
        </>}
      <Button
        value={t('showOnMap')}
        sizing="xs"
        variant="ghost"
        rounded={true}
        onClick={() => setShowMap(true)}
      />
    </div>
  </div>;
};