at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,165 @@
+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { translate } from 'react-i18next';
+import { Nav, Button, NavItem, NavLink } from 'reactstrap';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import city from '../../../images/city3.jpg';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { reduxActions } from '../../../redux/utils/connect';
+import tourPages from './WebTourSteps';
+
+import { useHistory } from 'react-router';
+import { planRoutes } from '../Account/Plans/UserPlans';
+
+function UserSettingsMenu(props) {
+  const { push } = useHistory();
+
+  function hideMenu() {
+    props.toggleMenu();
+    props.actions.setEnableMobileMenuSmall(false);
+  }
+
+  function showUserSettings() {
+    hideMenu();
+    props.actions.showUserSettingsPopup();
+  }
+
+  function onLogout() {
+    hideMenu();
+    props.actions.logout();
+  }
+
+  function tourGuide(path) {
+    const win = window.open(`${path}?webtour=true`, '_blank');
+    win.focus();
+
+    // props.actions.toggleWebTour(); for dev
+  }
+
+  function gotToActivePlan() {
+    hideMenu();
+    push(`/app/plans/${planRoutes.current}`);
+  }
+
+  const { t } = props;
+
+  return (
+    <React.Fragment>
+      <div className="dropdown-menu-header">
+        <div className="dropdown-menu-header-inner bg-info">
+          <div
+            className="menu-header-image opacity-2"
+            style={{
+              backgroundImage: 'url(' + city + ')'
+            }}
+          />
+          <div className="menu-header-content text-left">
+            <div className="widget-content p-0">
+              <div className="widget-content-wrapper">
+                <div className="widget-content-left mr-3">
+                  <div className="user-profile">
+                    <FontAwesomeIcon
+                      className="user-profile-icon"
+                      icon={faUser}
+                    />
+                  </div>
+                </div>
+                <div className="widget-content-left">
+                  <div className="widget-heading">
+                    {props.userFirstName + ' ' + props.userLastName}{' '}
+                  </div>
+                </div>
+                <div className="widget-content-right ml-auto mr-2">
+                  <Button
+                    className="btn-pill btn-shadow btn-shine"
+                    color="focus"
+                    onClick={onLogout}
+                  >
+                    {t('userSettings.signOut')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* <div className="scroll-area-xs"> */}
+      <div>
+        <PerfectScrollbar>
+          <Nav vertical>
+            <NavItem>
+              <NavLink
+                tag={Button}
+                type="button"
+                color="link"
+                className="font-size-md w-100"
+                onClick={gotToActivePlan}
+              >
+                {t('plans.activePlanDetails')}
+              </NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink
+                tag={Button}
+                type="button"
+                color="link"
+                className="font-size-md w-100"
+                onClick={showUserSettings}
+              >
+                {t('userSettings.changePassword')}
+              </NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink
+                className="font-size-md w-100"
+                href="https://www.socialhose.io/en/user-guide"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {t('userSettings.userGuide')}
+              </NavLink>
+            </NavItem>
+            <NavItem style={{ textAlign: 'start' }}>
+              <div className="mt-2 mb-3 mx-3 px-1">
+                <p className="text-muted font-size-md mb-2">{t('userSettings.guidedTourTooltip')}</p>
+                <div className="d-flex flex-row flex-wrap pl-3">
+                  {tourPages.map((tour) => (
+                    <Button
+                      key={tour.name}
+                      className="btn-icon-vertical btn-transition btn-transition-alt pt-2 pb-2 mr-2"
+                      outline
+                      color="primary"
+                      onClick={() => tourGuide(tour.to)}
+                    >
+                      <i className={`${tour.icon} btn-icon-wrapper mb-2`} />
+                      {t(`userSettings.${tour.translateKey}`)}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </NavItem>
+          </Nav>
+        </PerfectScrollbar>
+      </div>
+    </React.Fragment>
+  );
+}
+
+UserSettingsMenu.propTypes = {
+  toggleMenu: PropTypes.func.isRequired,
+  userFirstName: PropTypes.string.isRequired,
+  userLastName: PropTypes.string.isRequired,
+  actions: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired
+};
+
+const applyDecorators = compose(
+  reduxActions(),
+  translate(['common'], { wait: true })
+);
+
+export default React.memo(applyDecorators(UserSettingsMenu));