bulma-dashboard-theme-worona/src/dashboard/elements/MobilePreview/index.jsx

Theme for the Worona Dashboard.

/* eslint-disable max-len, no-undef */
import React from 'react';
import { connect } from 'react-redux';
import * as deps from '../../deps';

const MobilePreview = ({ site: { id }, appUrl, type }) => {
  const isPre =
    window.location.host.startsWith('predashboard') || window.location.host.startsWith('localhost');
  return (
    <div className="is-hidden-touch column is-4 has-text-centered" style={{ minWidth: '355px' }}>
      <svg
        width="355px"
        height="671px"
        viewBox="0 0 355 671"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
      >
        <title>iPhone 6</title>
        <desc>Wireframe</desc>
        <defs>
          <path
            d="M198.731096,670.845484 L321.840741,670.845484 C339.46461,670.845484 353.751579,657.605288 353.751579,641.263323 L353.751579,29.5821609 C353.751579,13.2443846 339.468313,0 321.840741,0 L34.1592587,0 C16.5353897,0 2.24842105,13.2401962 2.24842105,29.5821609 L2.24842105,641.263323 C2.24842105,657.6011 16.5316871,670.845484 34.1592587,670.845484 L58.8123965,670.845484 L58.8123984,670.845484 C60.8652147,668.979284 65.6544735,667.670553 71.2351249,667.670553 C76.8157762,667.670553 81.605035,668.979284 83.6578532,670.845484 L158.851678,670.845484 C159.751242,669.364984 161.463043,668.365349 163.426805,668.365349 L194.15617,668.365349 C196.119682,668.365349 197.831445,669.365137 198.731092,670.845483 L198.731096,670.845484 Z"
            id="path-1"
          />
          <mask
            id="mask-2"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={0}
            y={0}
            width="351.503158"
            height="670.845484"
            fill="white"
          >
            <use xlinkHref="#path-1" />
          </mask>
          <ellipse id="path-3" cx="178.374737" cy="627.789149" rx="24.7326316" ry="22.9170818" />
          <mask
            id="mask-4"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={0}
            y={0}
            width="49.4652632"
            height="45.8341635"
            fill="white"
          >
            <use xlinkHref="#path-3" />
          </mask>
          <ellipse id="path-5" cx="121.789474" cy="44.098021" rx="5.62105263" ry="5.20842767" />
          <mask
            id="mask-6"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={0}
            y={0}
            width="11.2421053"
            height="10.4168553"
            fill="white"
          >
            <use xlinkHref="#path-5" />
          </mask>
          <ellipse id="path-7" cx="177.79176" cy="24.1016295" rx="4.12210526" ry="3.81951363" />
          <mask
            id="mask-8"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={0}
            y={0}
            width="8.24421053"
            height="7.63902725"
            fill="white"
          >
            <use xlinkHref="#path-7" />
          </mask>
          <rect
            id="path-9"
            x="149.510883"
            y="40.1416877"
            width="56.2105263"
            height="7.02173212"
            rx="3.51086606"
          />
          <mask
            id="mask-10"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={-2}
            y={-2}
            width="60.2105263"
            height="11.0217321"
          >
            <rect x="147.510883" y="38.1416877" width="60.2105263" height="11.0217321" fill="white" />
            <use xlinkHref="#path-9" fill="black" />
          </mask>
          <mask
            id="mask-12"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={-2}
            y={-2}
            width="60.2105263"
            height="11.0217321"
          >
            <rect x="147.510883" y="38.1416877" width="60.2105263" height="11.0217321" fill="white" />
            <use xlinkHref="#path-9" fill="black" />
          </mask>
          <rect
            id="path-13"
            x="14.3012912"
            y="72.0571211"
            width="326.886657"
            height="511.043412"
            rx={1}
          />
          <mask
            id="mask-14"
            maskContentUnits="userSpaceOnUse"
            maskUnits="objectBoundingBox"
            x={-2}
            y={-2}
            width="330.886657"
            height="515.043412"
          >
            <rect x="12.3012912" y="70.0571211" width="330.886657" height="515.043412" fill="white" />
            <use xlinkHref="#path-13" fill="black" />
          </mask>
        </defs>
        <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
          <g id="iPhone-6" transform="translate(1.000000, 0.000000)">
            <g id="Device">
              <g id="Body" stroke="#3A95FF" fill="#FFFFFF">
                <rect
                  id="Vibrate"
                  strokeWidth={2}
                  x={0}
                  y="84.7237568"
                  width="5.24631579"
                  height="27.0838239"
                  rx="2.62315789"
                />
                <rect
                  id="Vol-Up"
                  strokeWidth={2}
                  x={0}
                  y="142.36369"
                  width="5.24631579"
                  height="50.6953627"
                  rx="2.62315789"
                />
                <path
                  d="M2.62315789,203.475908 L2.62315789,203.475908 C1.17442779,203.475908 0,204.654411 0,206.094759 L0,251.552419 C0,252.998771 1.17347632,254.17127 2.62315789,254.17127 L2.62315789,254.17127 L2.62315789,254.17127 C4.071888,254.17127 5.24631579,252.992768 5.24631579,251.552419 L5.24631579,206.094759 C5.24631579,204.648407 4.07283947,203.475908 2.62315789,203.475908 L2.62315789,203.475908 Z"
                  id="Vol-Down"
                  strokeWidth={2}
                />
                <use mask="url(#mask-2)" strokeWidth={4} xlinkHref="#path-1" />
              </g>
              <use
                id="Home-Button"
                stroke="#3A95FF"
                mask="url(#mask-4)"
                strokeWidth={4}
                xlinkHref="#path-3"
              />
              <use
                id="Front-Cam"
                stroke="#3A95FF"
                mask="url(#mask-6)"
                strokeWidth={4}
                xlinkHref="#path-5"
              />
              <use
                id="Sensor"
                stroke="#3A95FF"
                mask="url(#mask-8)"
                strokeWidth={4}
                xlinkHref="#path-7"
              />
              <mask id="mask-11" fill="white">
                <use xlinkHref="#path-9" />
              </mask>
              <g id="Speaker" stroke="#3A95FF" mask="url(#mask-10)" strokeWidth={4}>
                <use mask="url(#mask-12)" xlinkHref="#path-9" />
              </g>
            </g>
            <use
              id="Screen-Edge"
              stroke="#3A95FF"
              mask="url(#mask-14)"
              strokeWidth={4}
              xlinkHref="#path-13"
            />
          </g>
        </g>
        <foreignObject x="15" y="72" width="327" height="511">
          <iframe
            src={`https://${appUrl}/?siteId=${id}&preview=true&env=${isPre ? 'pre' : 'prod'}`}
            style={{ width: '327px', height: '511px' }}
          />
        </foreignObject>
      </svg>
      {type === 'pwa' && (
        <div
          className="notification is-warning"
          style={{
            maxWidth: '270px',
            margin: 'auto',
            marginTop: '15px',
          }}
        >
          The <strong>progressive web app</strong> is aggressively cached and can take up to 15
          minutes to update.

        </div>
      )}
      {type === 'pwa' && (
        <div
          className="notification is-primary"
          style={{
            maxWidth: '270px',
            margin: 'auto',
            marginTop: '15px',
          }}
        >
          {`https://ssr.wp-pwa.com/?siteId=${id}&env=${isPre ? 'pre' : 'prod'}`}
        </div>
      )}
    </div>
  );
}
MobilePreview.propTypes = {
  site: React.PropTypes.shape({
    id: React.PropTypes.string.isRequired,
  }).isRequired,
  appUrl: React.PropTypes.string.isRequired,
  type: React.PropTypes.string,
};

export const getAppUrl = ({ type }) => {
  const isPre =
    window.location.host.startsWith('predashboard') || window.location.host.startsWith('localhost');
  const isPwa = type === 'pwa';
  return isPwa ? `${isPre ? 'pre' : ''}origin.wp-pwa.com` : `${isPre ? 'pre' : ''}app.worona.org`;
};

const mapStateToProps = state => ({
  site: deps.selectors.getSelectedSite(state),
  appUrl: getAppUrl({ type: deps.selectors.getSelectedSite(state).type }),
  type: deps.selectors.getSelectedSite(state).type || 'app',
});

export default connect(mapStateToProps)(MobilePreview);