@stokr/components-library 0.5.3 → 0.5.5

package/dist/MainMenu/MainMenu.styles.js

@@ -0,0 +1,361 @@
+/*  */
+import styled, { css } from 'styled-components/macro';
+import rwd from 'styles/rwd';
+export const StyledMainMenu = styled.div`
+  display: none;
+  z-index: 10;
+  background: white;
+
+  ${rwd.Medium`
+    display: block;
+    width: 100%;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    overflow: hidden;
+    margin-top: -1px;
+    border-bottom: 1px solid #e1e1e1;
+    // box-shadow: inset 0 -1px 0 0 #e1e1e1;
+
+    ${props => props.admin && `
+      padding-left: 100px;
+    `}
+  `}
+
+  @media screen and (max-width: 991px) {
+    display: none;
+  }
+`;
+export const MainMenuContainer = styled.div`
+  display: block;
+  background-color: ${props => props.theme.cWhite};
+  border-top: 1px solid #e1e1e1;
+  /* box-shadow: inset 0 -1px 0 0 #e1e1e1; */
+`;
+export const MainMenuOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  ${rwd.Medium`
+    flex-direction: row;
+    height: 92px;
+  `}
+`;
+export const MainMenuOption = styled.div`
+  background-color: white !important;
+  position: relative;
+  display: flex;
+  flex-basis: 33.3333%;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 4px 16px;
+  outline: none;
+  
+  &:hover {
+    color: #0050ca;
+    color:initial;
+  }
+
+  &:first-child:hover {
+    color: initial;
+  }
+
+  ${({
+  isDashboard
+}) => isDashboard && css`
+      border-color: #e1e1e1 !important;
+    `}
+
+  ${({
+  isSettings
+}) => isSettings && css`
+      border: none !important;
+    `}
+
+  & + & {
+    border-top: 1px solid #e1e1e1;
+  }
+
+  ${rwd.Medium`
+    padding: 10px;
+    border-bottom: 1px solid #e1e1e1;
+    margin-bottom: -1px;
+    transition: border-bottom-color .2s;
+
+    & + & {
+      border-top: 0;
+      border-left: 1px solid #e1e1e1;
+
+       ${({
+  isDashboard
+}) => isDashboard && css`
+           border-right: 1px solid #e1e1e1;
+         `}
+    }
+
+    ${props => props.isOpened && `
+      border-bottom-color: transparent;
+    `};
+
+    ${({
+  isVenture
+}) => isVenture && css`
+        flex-basis: 66.6%;
+      `}
+
+      ${props => props.nameOption && `
+    display: flex;
+  `}
+
+  `}
+
+  ${props => props.nameOption && `
+    display: none;
+  `}
+
+  ${rwd.Large`
+    flex-basis: 25%;
+
+     ${({
+  isVenture
+}) => isVenture && css`
+         flex-basis: 37.5%;
+       `}
+
+    ${props => props.nameOption && `
+      display: flex;
+    `};
+  `}
+
+     ${props => props.noBorder && `
+    border: none !important;
+  `}
+
+  ${props => props.button && `
+    cursor: pointer;
+    transition: color .2s;
+    outline: 0;
+    
+    & > span {
+      display: inline-block;
+      vertical-align: middle;
+      text-transform: uppercase;
+      font-size: 11px;
+      line-height: 20px;
+    }
+
+    &:hover {
+      color: ${props.theme.cPrimary};
+    }
+  `}
+
+  span {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  button {
+    color: #ee220d;
+    border-color: #ee220d;
+    background-color: white;
+    
+    &:hover {
+      color: #be1b09;
+      border-color: #be1b09;
+    }
+  }
+`;
+export const UserName = styled.h3`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  text-transform: initial;
+  margin: 0;
+
+  &:hover {
+    color: initial;
+  }
+`;
+export const ExpandArrow = styled.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+})`
+  position: absolute;
+  top: 50%;
+  right: 32px;
+  display: block;
+  margin-top: -8px;
+  transition: 0.3s transform;
+  transform: rotate(0);
+  text-align: center;
+  font-size: 16px;
+  line-height: 16px;
+  height: 16px;
+
+  ${props => props.isOpened && `
+    transform: rotate(180deg);
+  `}
+
+  ${rwd.Medium`
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 20px;
+    margin-top: 0;
+    position: relative;
+    top: 0;
+    right: auto;
+  `}
+`;
+export const Settings = styled.div`
+  overflow: hidden;
+`;
+export const SettingsOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  ${rwd.Medium`
+    flex-wrap: wrap;
+    padding: 27px 64px;
+    flex-direction: row;
+    height: auto;
+  `}
+
+  button {
+    border: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    padding: 0;
+  }
+`;
+export const SettingsOption = styled.button`
+  position: relative;
+  flex-grow: 1;
+  cursor: pointer;
+  transition: font-weight 0.2s;
+  color: ${props => props.theme.cWhite};
+  background-color: ${props => props.theme.cWarning};
+  border-top: 1px solid ${props => props.theme.cWarningDark};
+  outline: 0;
+
+  ${props => props.back && `
+    color: ${props.theme.cBlack};
+    background-color: transparent;
+    border-top: 0;
+    
+    ${props.isActive && `
+      color: ${props.theme.cBlack};
+      background-color: transparent;
+    `}
+
+    ${rwd.Medium`
+      background-color: transparent;
+      
+      ${props.isActive && `
+        background-color: transparent;
+      `}
+    `}
+  `};
+
+  ${rwd.Medium`
+    flex-grow: 0;
+    text-align: left;
+    flex-basis: 33.3333%;
+    color: ${props => props.theme.cBlack};
+    background-color: transparent;
+    border-top: 0;
+  `}
+
+  ${rwd.Large`
+    flex-basis: 25%;
+
+    ${props => props.scrollDown && `
+      flex-basis: 20%;
+    `}
+  `}
+
+  & > span {
+    position: relative;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 20px;
+    text-transform: uppercase;
+    transition: font-weight 0.2s;
+
+    ${rwd.Medium`
+      padding: 7px 0;
+      margin: 3px 0;
+    `}
+  }
+
+  ${props => props.isActive && `
+    background-color: ${props.theme.cPrimary};
+
+    & > span {
+      font-weight: bold;
+    }
+  `}
+
+  ${rwd.Medium`
+    ${props => props.isActive && `   
+      background-color: transparent;
+
+      & > span {
+        &:before {
+          content: '';
+          display: block;
+          height: 4px;
+          width: 100%;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background-color: ${props.theme.cPrimary};
+        }
+      }
+    `}
+  `}
+
+  &:hover {
+    & > span {
+      font-weight: bold;
+    }
+  }
+`;
+export const MainMenuMobileSettings = styled.div`
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 5;
+  position: absolute;
+  top: 64px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 64px);
+  background-color: ${props => props.theme.cWhite};
+  border-top: 1px solid #e1e1e1;
+  transition: opacity 0.2s, visibility 0.2s;
+
+  ${props => props.isActive && `
+    visibility: visible;
+    opacity: 1;
+  `}
+`;
+export const Notifications = styled.div`
+  position: relative;
+  top: -1px;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  background-color: #ee220d;
+  border-radius: 50%;
+
+  @media screen and (max-width: 991px) {
+    display: none;
+  }
+`;

package/dist/MatomoConnect/Matomo.js

@@ -0,0 +1,221 @@
+import axios from 'axios';
+import Auth from 'components/AuthConnect/Auth';
+export class Matomo {
+  // MATOMO_API_URL = 'https://crafton.matomo.cloud'
+  // MATOMO_API_URL = 'https://stokr-analytics.matomo.cloud';
+  // MATOMO_SITE_ID = 2
+  // MATOMO_AUTH_TOKEN = '8061ac4647615be41dcfa087cfdc157b'
+  // MATOMO_AUTH_TOKEN = 'b3746314f2556a3ea5110113d310c11f';
+
+  MATOMO_API_URL = 'https://stokr.matomo.cloud';
+  MATOMO_AUTH_TOKEN = 'c3989ca407e65354764eb16bfc0def79';
+  MATOMO_DEFAULT_PARAMS = {
+    module: 'API',
+    format: 'json',
+    token_auth: this.MATOMO_AUTH_TOKEN,
+    idSite: null
+  };
+
+  // Receive the class method and its arguments
+  // Set site ID if not defined
+  // Call the method with its arguments
+  init(callback, ...rest) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        if (!this.MATOMO_DEFAULT_PARAMS.idSite) {
+          await this.setSiteId();
+        }
+        const result = await callback.bind(this)(...rest);
+        resolve(result);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+  setSiteId = async () => {
+    return new Promise((resolve, reject) => {
+      return setTimeout(async () => {
+        const project = await Auth.setProject();
+        this.MATOMO_DEFAULT_PARAMS.idSite = project.matomoSiteId;
+        resolve();
+      }, 0);
+    });
+  };
+
+  /**
+   * Get real time counters
+   * @param lastMinutes
+   */
+  async LiveGetCounters(lastMinutes, column) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'Live.getCounters',
+          lastMinutes: lastMinutes,
+          showColumns: column
+        }
+      }).then(response => {
+        resolve(parseInt(response.data[0][column]));
+      }).catch(error => resolve(0));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get visits summary for date range
+   * @param range
+   */
+  async GetVisitsSummary(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'VisitsSummary.get',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve({}));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary per country
+   * @param range
+   */
+  async GetCountrySummary(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'UserCountry.getCountry',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve([]));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for social networks
+   * @param range
+   */
+  async GetSocialSummary(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'Referrers.getSocials',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve([]));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for os families
+   * @param range
+   */
+  async GetDeviceOsFamilies(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'DevicesDetection.getOsFamilies',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve([]));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for browsers
+   * @param range
+   */
+  async GetDeviceBrowsers(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'DevicesDetection.getBrowsers',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve([]));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for browsers
+   * @param range
+   */
+  async GetDeviceModels(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'DevicesDetection.getModel',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve([]));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get visit times per local time
+   * @param range
+   */
+  async GetVisitTimePerLocalTime(period, date) {
+    const response = await new Promise(resolve => {
+      delete axios.defaults.headers.common['Authorization'];
+      axios.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'VisitTime.getVisitInformationPerLocalTime ',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(error => resolve({}));
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+}
+export default Matomo;