diff --git a/docs/404.html b/docs/404.html index 225dcecfc040..ccbbded12cae 100644 --- a/docs/404.html +++ b/docs/404.html @@ -3,7 +3,7 @@ lhn_content: '404' ---
- + Hmm it's not here...
That page is nowhere to be found.
diff --git a/docs/README.md b/docs/README.md index 30b83dc6e406..c583fd94eb81 100644 --- a/docs/README.md +++ b/docs/README.md @@ -70,7 +70,7 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
-
SmartScan
+

SmartScan

@@ -79,7 +79,7 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
-
Another Article
+

Another Article

@@ -121,7 +121,7 @@ In order to add a new Card button in the respective hub page ([send-money/index. ```html
-
SmartScan
+

SmartScan

- -
- -
+ + {% include floating-concierge-button.html id="floating-concierge-button-lhn" %}
@@ -73,9 +73,15 @@

- + +
+

Didn't find what you were looking for?

+

Concierge is here to answer all your questions.

+
+
+ +
+
{% endif %} diff --git a/docs/_sass/_breakpoints.scss b/docs/_sass/_breakpoints.scss new file mode 100644 index 000000000000..26440ef197b8 --- /dev/null +++ b/docs/_sass/_breakpoints.scss @@ -0,0 +1,9 @@ +$breakpoint-tablet: 800px; +$breakpoint-desktop: 1120px; +$breakpoint-wide: 1600px; + +@mixin breakpoint($breakpoint) { + @media screen and (min-width: $breakpoint) { + @content + } +} diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index bf4e46b61e7b..1b046f3c6e64 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -4,5 +4,6 @@ $color-dark: #0B1B34; $color-gray1: #FAFAFA; $color-gray2: #ECECEC; $color-gray3: #C6C9CA; -$color-white: #FFFFFF; $color-green: #07d973; +$color-pink: #F68DFE; +$color-white: #FFFFFF; diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index f3f9eea2c19e..95a68ce345e1 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -1,5 +1,7 @@ +@import 'breakpoints'; @import 'colors'; @import 'fonts'; +@import 'mixins'; * { margin: 0; @@ -85,6 +87,10 @@ a { &:hover { color: $color-blueHover; } + + img { + display: block; + } } h1, @@ -130,6 +136,29 @@ textarea { color: $color-dark; } +button { + border-radius: 12px; + padding: 12px; + font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-size: 15px; + font-weight: bold; + + &.success { + background-color: $color-green; + color: $color-white; + width: 100%; + + &:hover { + background-color: desaturate($color-green, 15%); + cursor: pointer; + } + + @include breakpoint($breakpoint-tablet) { + width: auto; + } + } +} + #logo { width: 240px; padding: 80px; @@ -140,26 +169,25 @@ textarea { } #lhn { - width: 420px; - height: 100%; position: fixed; background-color: $color-gray1; box-sizing: border-box; border-right-color: $color-gray2; border-right-width: 1px; border-style: solid; + width: 100%; + height: auto; + &.expanded { + height: 100%; + } - @media screen and (max-width: 1024px) { + @include breakpoint($breakpoint-tablet) { width: 320px; + height: 100%; } - @media screen and (max-width: 800px) { - width: 100%; - height: auto; - - &.expanded { - height: 100%; - } + @include breakpoint($breakpoint-desktop) { + width: 420px; } ul, @@ -169,10 +197,6 @@ textarea { #lhn-content { - height: calc(100% - 150px); - padding-right: 24px; - padding-bottom: 44px; - padding-left: 44px; overflow: auto; -ms-overflow-style: none; /* IE and Edge */ @@ -187,16 +211,18 @@ textarea { display: block; } - @media screen and (max-width: 800px) { - height: calc(100% - 100px); - padding-right: 24px; - padding-bottom: 24px; - padding-left: 24px; - display: none; + display: none; + height: calc(100% - 100px); + padding: 0 24px 24px 24px; - &.expanded { - display: block; - } + @include breakpoint($breakpoint-tablet) { + display: block; + height: calc(100% - 150px); + padding: 0 44px 44px 44px; + } + + &.expanded { + display: block; } .article-toc { @@ -205,30 +231,32 @@ textarea { } .lhn-header { - padding: 44px; - - @media screen and (max-width: 800px) { - padding: 24px; + padding: 24px; + @include breakpoint($breakpoint-tablet) { + padding: 44px; } #header-button { position: absolute; - display: none; - - @media screen and (max-width: 800px) { - display: block; + display: block; + @include breakpoint($breakpoint-tablet) { + display: none; } } .logo { - width: 210px; - - @media screen and (max-width: 800px) { - width: 160px; - align-content: center; - display: block; - margin-left: auto; - margin-right: auto; + width: 160px; + align-content: center; + display: block; + margin-left: auto; + margin-right: auto; + + @include breakpoint($breakpoint-tablet) { + width: 210px; + align-content: normal; + display: flex; + margin-left: 0; + margin-right: 0; } } } @@ -252,31 +280,27 @@ textarea { } #content-area { + margin-left: 0; + padding: 80px 24px 24px 24px; - /* Same as the width of the lhn */ - margin-left: 420px; - padding: 52px 68px; - box-sizing: border-box; + @include breakpoint($breakpoint-tablet) { + margin-left: 320px; + } + + @include breakpoint($breakpoint-desktop) { + /* Same as the width of the lhn */ + margin-left: 420px; + padding: 52px 68px; + box-sizing: border-box; + } - @media screen and (min-width: 1600px) { + @include breakpoint($breakpoint-wide) { /* Center content area for bigger screens */ margin-left: calc(420px + (100vw - 1000px - 420px)/2); padding: 52px 0; max-width: 1000px; } - @media screen and (max-width: 1024px) { - margin-left: 320px; - } - - @media screen and (max-width: 800px) { - margin-left: 0; - padding-top: 80px; - padding-left: 24px; - padding-right: 24px; - padding-bottom: 24px; - } - ul, ol { margin-left: 24px; @@ -340,43 +364,37 @@ textarea { column-gap: 4%; padding-bottom: 20px; - @media screen and (min-width: 800px) { + @include breakpoint($breakpoint-desktop) { grid-template-columns: 48% 48%; } } .card { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; border-radius: 16px; - border: 1px solid $color-gray2; padding: 28px; font-weight: bold; cursor: pointer; - $border-amount-darken: 15%; color: $color-dark; - &:hover { - border-color: darken($color-gray2, $border-amount-darken); - color: $color-dark; - } + @include card-border($color-gray2, 1px); &.send-money { - border-color: $color-blue; - border-width: 1.5px; - - &:hover { - border-color: darken($color-blue, $border-amount-darken); - } + @include card-border($color-blue); } &.request-money { - border-color: $color-green; - border-width: 1.5px; + @include card-border($color-green); + } - &:hover { - border-color: darken($color-green, $border-amount-darken); - } + &.get-help { + @include card-border($color-pink); + } + + .row { + display: flex; + flex-basis:100%; } .left-icon { @@ -395,6 +413,18 @@ textarea { padding-left: 16px; } + .submit-button { + display: flex; + align-items: center; + margin-top: 16px; + padding-left: 0; + + @include breakpoint($breakpoint-desktop) { + margin-top: 0; + padding-left: 16px; + } + } + .body { display: flex; flex-wrap: nowrap; @@ -402,8 +432,14 @@ textarea { flex-grow: 2; } - .description { - margin-top: 16px; + h3.title { + padding: 0; + margin: 0; + } + + p.description { + padding: 0; + margin: 16px 0 0 0; font-weight: normal; } } @@ -420,11 +456,11 @@ textarea { .homepage { h1 { + margin-top: 0; padding-bottom: 20px; - - @media screen and (max-width: 800px) { - margin-top: 0; - padding-top: 8px; + padding-top: 8px; + @include breakpoint($breakpoint-tablet) { + padding-top: 0px; } } h2 { @@ -439,30 +475,28 @@ textarea { } .centered-content { - width: 500px; height: 240px; text-align: center; font-size: larger; position: absolute; - top: calc((100vh - 240px)/2); - right: calc((100vw - 500px)/2); + top: calc((100vh - 240px) / 2); - &.with-lhn { - right: calc((100vw - 420px - 500px)/2); + width: 380px; + right: calc((100vw - 380px) / 2); + @include breakpoint($breakpoint-tablet) { + width: 500px; + right: calc((100vw - 500px) / 2); } - @media screen and (max-width: 1024px) { - &.with-lhn { - right: calc((100vw - 320px - 500px)/2); - } - } + &.with-lhn { + right: calc((100vw - 380px) / 2); - @media screen and (max-width: 800px) { - width: 380px; - right: calc((100vw - 380px)/2); + @include breakpoint($breakpoint-tablet) { + right: calc((100vw - 320px - 500px ) / 2); + } - &.with-lhn { - right: calc((100vw - 380px)/2); + @include breakpoint($breakpoint-desktop) { + right: calc((100vw - 420px - 500px) / 2); } } @@ -474,11 +508,41 @@ textarea { font-size: 20px; } - #icon { + .icon { width: 76px; padding: 28px; display: block; margin-left: auto; margin-right: auto; } -} \ No newline at end of file +} + +#floating-concierge-button-global { + position: fixed; + display: block; + @include breakpoint($breakpoint-tablet) { + display: none; + } +} + +#floating-concierge-button-lhn { + position: absolute; + display: none; + @include breakpoint($breakpoint-tablet) { + display: block; + } +} + +.floating-concierge-button { + bottom: 2rem; + right: 2rem; + + img { + width: 4rem; + height: 4rem; + + &:hover { + filter: saturate(2); + } + } +} diff --git a/docs/_sass/_mixins.scss b/docs/_sass/_mixins.scss new file mode 100644 index 000000000000..018ed4a96e63 --- /dev/null +++ b/docs/_sass/_mixins.scss @@ -0,0 +1,9 @@ +@mixin card-border($border-color, $border-width: 1.5px) { + border-color: $border-color; + border-width: $border-width; + border-style: solid; + + &.hover { + border-color: darken($border-color, 15%); + } +} diff --git a/docs/hubs/request-money.html b/docs/hubs/request-money.html index b242268e8d13..6eff0606150b 100644 --- a/docs/hubs/request-money.html +++ b/docs/hubs/request-money.html @@ -26,7 +26,7 @@

-
SmartScan
+

SmartScan

diff --git a/docs/index.html b/docs/index.html index 507f1bebf181..7d501dcccd8e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,7 @@ diff --git a/docs/main.html b/docs/main.html index cc552844bfa1..f76f218b4c1e 100644 --- a/docs/main.html +++ b/docs/main.html @@ -20,22 +20,26 @@

diff --git a/src/ROUTES.js b/src/ROUTES.js index 0900bf9a2f9e..0cd8b4164a8e 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -42,6 +42,10 @@ export default { REPORT, REPORT_WITH_ID: 'r/:reportID', getReportRoute: reportID => `r/${reportID}`, + + /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */ + CONCIERGE: 'concierge', + IOU_REQUEST, IOU_BILL, IOU_SEND, diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 79868dbe51e3..202ea37c7f58 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -37,6 +37,7 @@ import defaultScreenOptions from './defaultScreenOptions'; import * as App from '../../actions/App'; import * as Session from '../../actions/Session'; import LogOutPreviousUserPage from '../../../pages/LogOutPreviousUserPage'; +import ConciergePage from '../../../pages/ConciergePage'; let currentUserEmail; Onyx.connect({ @@ -219,6 +220,11 @@ class AuthScreens extends React.Component { options={defaultScreenOptions} component={LogOutPreviousUserPage} /> + {/* These are the various modal routes */} {/* Note: Each modal must have it's own stack navigator since we want to be able to navigate to any diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js index e072e72b4c57..4bfa5265fb01 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.js +++ b/src/libs/Navigation/AppNavigator/PublicScreens.js @@ -4,6 +4,7 @@ import SignInPage from '../../../pages/signin/SignInPage'; import SetPasswordPage from '../../../pages/SetPasswordPage'; import ValidateLoginPage from '../../../pages/ValidateLoginPage'; import LogInWithShortLivedTokenPage from '../../../pages/LogInWithShortLivedTokenPage'; +import ConciergePage from '../../../pages/ConciergePage'; import SCREENS from '../../../SCREENS'; import defaultScreenOptions from './defaultScreenOptions'; @@ -31,6 +32,11 @@ const PublicScreens = () => ( options={defaultScreenOptions} component={SetPasswordPage} /> + ); diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 63d286580c84..23cfa9ea349c 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -28,6 +28,7 @@ export default { SetPassword: ROUTES.SET_PASSWORD_WITH_VALIDATE_CODE, ValidateLogin: ROUTES.VALIDATE_LOGIN, [SCREENS.TRANSITION_FROM_OLD_DOT]: ROUTES.TRANSITION_FROM_OLD_DOT, + Concierge: ROUTES.CONCIERGE, // Modal Screens Settings: { diff --git a/src/pages/ConciergePage.js b/src/pages/ConciergePage.js new file mode 100644 index 000000000000..efde8c1db55c --- /dev/null +++ b/src/pages/ConciergePage.js @@ -0,0 +1,44 @@ +import _ from 'underscore'; +import React from 'react'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import CONST from '../CONST'; +import ONYXKEYS from '../ONYXKEYS'; +import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; +import Navigation from '../libs/Navigation/Navigation'; +import * as Report from '../libs/actions/Report'; + +const propTypes = { + /** Session info for the currently logged in user. */ + session: PropTypes.shape({ + /** Currently logged in user authToken */ + authToken: PropTypes.string, + + /** Currently logged in user email */ + email: PropTypes.string, + }).isRequired, +}; + +/* + * This is a "utility page", that does this: + * - If the user is authenticated, find their concierge chat and re-route to it + * - Else re-route to the login page + */ +const ConciergePage = (props) => { + if (_.has(props.session, 'authToken')) { + Report.fetchOrCreateChatReport([props.session.email, CONST.EMAIL.CONCIERGE]); + } else { + Navigation.navigate(); + } + + return ; +}; + +ConciergePage.propTypes = propTypes; +ConciergePage.displayName = 'ConciergePage'; + +export default withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, +})(ConciergePage);