├── .github
    └── dependabot.yml
├── .gitignore
├── .npmrc
├── LICENSE.md
├── README.md
├── api
    ├── sendSms.js
    └── userGeo.js
├── gridsome.config.js
├── gridsome.server.js
├── package.json
├── patches
    ├── @kriya__gridsome@0.9.1.patch
    └── gridsome-plugin-tailwindcss@4.1.1.patch
├── pnpm-lock.yaml
├── src
    ├── App.vue
    ├── assets
    │   └── img
    │   │   └── cart.png
    ├── components
    │   ├── FetchShops.vue
    │   ├── HeroFeatures.vue
    │   ├── HeroForm.vue
    │   ├── HeroMap.vue
    │   ├── HeroSearch.vue
    │   ├── ShopCard.vue
    │   ├── ShopCardAlt.vue
    │   ├── ShopCollection.vue
    │   ├── Shops.vue
    │   ├── ShopsBookTime.vue
    │   ├── ShopsMap.vue
    │   ├── UserAuthForm.vue
    │   ├── UserAuthModal.vue
    │   ├── base
    │   │   ├── BaseButton.vue
    │   │   ├── BaseCard.vue
    │   │   ├── BaseContainer.vue
    │   │   ├── BaseForm.vue
    │   │   ├── BaseFormControl.vue
    │   │   ├── BaseFormFieldset.vue
    │   │   ├── BaseInput.vue
    │   │   ├── BaseModal.vue
    │   │   ├── BasePager.vue
    │   │   ├── BaseSection.vue
    │   │   └── BaseSectionHeader.vue
    │   ├── icon
    │   │   ├── LocationPin.vue
    │   │   └── ShoppingCart.vue
    │   └── site
    │   │   ├── SiteFooter.vue
    │   │   ├── SiteNavigation.vue
    │   │   ├── SiteNavigationLang.vue
    │   │   ├── SiteNavigationSearch.vue
    │   │   └── SiteNavigationUser.vue
    ├── favicon.png
    ├── firebase.js
    ├── layouts
    │   └── Default.vue
    ├── locales
    │   ├── en.json
    │   └── es.json
    ├── main.js
    ├── mixins
    │   ├── Alert.js
    │   ├── SiteSEO.js
    │   └── Transitions.js
    ├── pages
    │   ├── About.vue
    │   ├── Index.vue
    │   ├── Shops.vue
    │   └── user
    │   │   └── Settings.vue
    ├── store
    │   └── index.js
    └── templates
    │   └── README.md
├── static
    └── img
    │   ├── banner.png
    │   └── touchicon.png
└── tailwind.config.js


/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | - package-ecosystem: npm
 4 |   directory: "/"
 5 |   schedule:
 6 |     interval: daily
 7 |     time: "10:00"
 8 |     timezone: Europe/Madrid
 9 |   open-pull-requests-limit: 10
10 |   ignore:
11 |   - dependency-name: firebase
12 |     versions:
13 |     - 8.2.10
14 |     - 8.2.5
15 |     - 8.3.0
16 |     - 8.3.2
17 |     - 8.3.3
18 |   - dependency-name: y18n
19 |     versions:
20 |     - 4.0.1
21 |     - 4.0.2
22 |   - dependency-name: libphonenumber-js
23 |     versions:
24 |     - 1.9.12
25 |     - 1.9.15
26 |   - dependency-name: vue-toast-notification
27 |     versions:
28 |     - 0.6.1
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.log
 2 | .cache
 3 | .DS_Store
 4 | src/.temp
 5 | node_modules
 6 | dist
 7 | .env
 8 | .env.*
 9 | 
10 | .now
11 | now.json
12 | # Local Netlify folder
13 | .netlify
14 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Nestor Vera
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Trovado
 2 | A safer way to shop during quarantine
 3 | 
 4 | ## Instructions
 5 | 
 6 | ### 1. Install Gridsome CLI tool if you don't have
 7 | 
 8 | `npm install --global @gridsome/cli`
 9 | 
10 | ### 2. Create a Gridsome project
11 | 
12 | 1. `gridsome create my-gridsome-site` to install default starter
13 | 2. `cd my-gridsome-site` to open the folder
14 | 3. `gridsome develop` to start a local dev server at `http://localhost:8080`
15 | 4. Happy coding 🎉🙌
16 | 


--------------------------------------------------------------------------------
/api/sendSms.js:
--------------------------------------------------------------------------------
 1 | // Download the helper library from https://www.twilio.com/docs/node/install
 2 | // Your Account Sid and Auth Token from twilio.com/console
 3 | // DANGER! This is insecure. See http://twil.io/secure
 4 | 
 5 | const client = require('twilio')(process.env.TWILIO_SID, process.env.TWILIO_TOKEN)
 6 | 
 7 | module.exports = async (req, res) => {
 8 |   // const verification = client.verify.services('VA4e40249804661e51caf7b7c608a4b81b')
 9 |   //   .verifications
10 |   //   .create({to: '+34665886414', channel: 'sms'})
11 |   //   .then((verification) => verification)
12 | 
13 |   try {
14 |     // TODO: Prevent usage from outside the website
15 |     const lookup = await client.lookups.phoneNumbers(req.query.to).fetch()
16 |     const message = await client.messages.create({
17 |       body: req.query.body || 'Placeholder message body',
18 |       from: '+12182428999', to: lookup.phoneNumber,
19 |     }).then((message) => message)
20 | 
21 |     return res.json({ lookup, message })
22 | 
23 |   } catch {
24 |     return res.json('Make sure the number included its country code')
25 |   }
26 | 
27 |   // return res.json({
28 |   //   lookup,
29 |   //   // message,
30 |   //   // verification,
31 |   // })
32 | }
33 | 


--------------------------------------------------------------------------------
/api/userGeo.js:
--------------------------------------------------------------------------------
 1 | const fetch = require('node-fetch')
 2 | 
 3 | module.exports = async (req, res) => {
 4 |   const clientIp = req.headers['x-forwarded-for']
 5 |   const endpoints = (process.env.NODE_ENV === 'development' ? [
 6 |     `https://ipapi.co/json`,
 7 |     `https://geolocation-db.com/json`,
 8 |     `https://ipinfo.io/json?token=${process.env.IPINFO_TOKEN}`,
 9 |     `http://api.ipstack.com/check?access_key=${process.env.IPSTACK_KEY}`,
10 |   ] : [
11 |     `https://ipapi.co/${clientIp}/json`,
12 |     `https://geolocation-db.com/json/${clientIp}`,
13 |     `https://ipinfo.io/${clientIp}?token=${process.env.IPINFO_TOKEN}`,
14 |     `http://api.ipstack.com/${clientIp}?access_key=${process.env.IPSTACK_KEY}`,
15 |   ]).map((endpoint) => fetch(endpoint)
16 |     .then((response) => response.json())
17 |   )
18 | 
19 |   const relevant =['city', 'postal', 'latitude', 'longitude', 'loc', 'zip']
20 |   const keepRelevant = (res) => Object.entries(res).filter(([key]) => relevant.includes(key))
21 |   const normalize = (res, ...keys) => res.map((entries) => Object.entries(renameKey(Object.fromEntries(entries), ...keys)))
22 |   const renameKey = (obj, oldK, newK, newObj = (oldV, newV) => ({ [newK]: oldV || newV })) => {
23 |     const yo = { ...obj, ...newObj(obj[oldK], obj[newK]) }
24 |     delete yo[oldK]
25 |     return yo
26 |   }
27 | 
28 |   const resolved = await Promise.all(endpoints)
29 |     .then((response) => Object.values(response).map(keepRelevant))
30 |     .then((response) => normalize(response, 'zip', 'postal'))
31 |     .then((response) => normalize(response, 'loc', '', (oldV, newV) => {
32 |       const coords = (oldV || newV || '').split(',').map((val) => Number(val))
33 |       return coords.length > 1 ? { latitude: coords[0], longitude: coords[1] } : {}
34 |     }))
35 |     .then((response) => response.map((entries) => Object.fromEntries(entries.sort())))
36 |     // TODO: Remove redundant info -> Reduce
37 |     .catch((error) => console.error(error))
38 | 
39 |   return res.json(resolved)
40 | }
41 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | // This is where project configuration and plugin options are located.
 2 | // Learn more: https://gridsome.org/docs/config
 3 | 
 4 | // Changes here require a server restart.
 5 | // To restart press CTRL + C in terminal and run `gridsome develop`
 6 | 
 7 | module.exports = {
 8 |   siteName: 'Trovado',
 9 |   siteDescription: 'A safer way to shop during the quarantine.',
10 |   siteUrl: process.env.NOW_URL || 'https://trovado.now.sh',
11 | 
12 |   plugins: [
13 |     {
14 |       use: "gridsome-plugin-i18n",
15 |       options: {
16 |         locales: ['en', 'es'],
17 |         fallbackLocale: 'en',
18 |         messages: process.env.NODE_ENV === 'production' && {
19 |           en: require('./src/locales/en.json'),
20 |           es: require('./src/locales/es.json'),
21 |         },
22 |       },
23 |     },
24 | 
25 |     {
26 |       use: 'gridsome-plugin-tailwindcss',
27 |       options: {
28 |         purgeConfig: {
29 |           whitelistPatternsChildren: [
30 |             /mapbox/,
31 |             /mapboxgl/,
32 |             /notices/,
33 |           ],
34 |         },
35 |       },
36 |     },
37 |     {
38 |       use: '@kriya/gridsome-plugin-google-analytics',
39 |       options: { id: process.env.GOOGLE_ANALYTICS_ID },
40 |     },
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/gridsome.server.js:
--------------------------------------------------------------------------------
 1 | // Server API makes it possible to hook into various parts of Gridsome
 2 | // on server-side and add custom data to the GraphQL data layer.
 3 | // Learn more: https://gridsome.org/docs/server-api/
 4 | 
 5 | // Changes here require a server restart.
 6 | // To restart press CTRL + C in terminal and run `gridsome develop`
 7 | 
 8 | module.exports = function (api) {
 9 |   api.loadSource(({ addCollection }) => {
10 |     // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
11 |   })
12 | 
13 |   api.createPages(({ createPage }) => {
14 |     // Use the Pages API here: https://gridsome.org/docs/pages-api/
15 |   })
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "charcuterio",
 3 |   "private": true,
 4 |   "packageManager": "pnpm@9.15.0",
 5 |   "scripts": {
 6 |     "build": "gridsome build",
 7 |     "develop": "gridsome develop",
 8 |     "explore": "gridsome explore"
 9 |   },
10 |   "resolutions": {
11 |     "autoprefixer": "10.4.5"
12 |   },
13 |   "dependencies": {
14 |     "@kriya/gridsome": "0.9.1",
15 |     "@kriya/gridsome-plugin-google-analytics": "0.1.2",
16 |     "@mapbox/mapbox-gl-geocoder": "5.0.1",
17 |     "@studiometa/vue-mapbox-gl": "1.4.7",
18 |     "@turf/distance": "6.5.0",
19 |     "deepmerge": "4.3.1",
20 |     "firebase": "8.10.0",
21 |     "graphql": "14.4.2",
22 |     "gridsome-plugin-i18n": "1.6.0",
23 |     "libphonenumber-js": "1.11.16",
24 |     "mapbox-gl": "1.13.3",
25 |     "node-fetch": "2.6.7",
26 |     "portal-vue": "2.1.7",
27 |     "sharp": "0.25.4",
28 |     "twilio": "5.4.0",
29 |     "v-scroll-lock": "1.3.1",
30 |     "vue-click-outside": "1.1.0",
31 |     "vue-feather-icons": "5.1.0",
32 |     "vue-meeting-selector": "1.1.3",
33 |     "vue-router": "3.6.5",
34 |     "vue-tippy": "4.16.1",
35 |     "vue-toast-notification": "0.6.3",
36 |     "vue-typer": "1.2.0",
37 |     "vuefire": "2.2.5",
38 |     "vuex": "3.6.2",
39 |     "vuexfire": "3.2.5"
40 |   },
41 |   "devDependencies": {
42 |     "@hacknug/tailwindcss-alpha": "1.0.1",
43 |     "@tailwindcss/ui": "0.7.2",
44 |     "electron": "33.0.2",
45 |     "gridsome-plugin-tailwindcss": "4.1.1",
46 |     "tailwindcss-aspect-ratio": "3.0.0",
47 |     "tailwindcss-children": "2.1.0",
48 |     "tailwindcss-filters": "3.0.0",
49 |     "tailwindcss-spinner": "1.2.0"
50 |   },
51 |   "pnpm": {
52 |     "patchedDependencies": {
53 |       "gridsome-plugin-tailwindcss@4.1.1": "patches/gridsome-plugin-tailwindcss@4.1.1.patch",
54 |       "@kriya/gridsome@0.9.1": "patches/@kriya__gridsome@0.9.1.patch"
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/patches/@kriya__gridsome@0.9.1.patch:
--------------------------------------------------------------------------------
 1 | diff --git a/.DS_Store b/.DS_Store
 2 | new file mode 100644
 3 | index 0000000000000000000000000000000000000000..f9f60d0a8f94f19a9f55d4bcbfeaf7866207ada5
 4 | --- /dev/null
 5 | +++ b/.DS_Store
 6 | @@ -0,0 +1 @@
 7 | +
Bud1%
libdsclbool


clbool


 
@
�





 
@
�






 
@
�






 
@E%
DSDB

`
�




 
@
�






 
@
�






 
@
 8 | \ No newline at end of file
 9 | diff --git a/lib/.DS_Store b/lib/.DS_Store
10 | new file mode 100644
11 | index 0000000000000000000000000000000000000000..a7b0016a4594b5d087a79d40ca36089aba2f55b5
12 | --- /dev/null
13 | +++ b/lib/.DS_Store
14 | @@ -0,0 +1 @@
15 | +
Bud1�

insdsclbo
pluginsdsclbool


 
@
�





 
@
�






 
@
�






 
@E�
DSDB
 `
�




 
@
�






 
@
�






 
@
16 | \ No newline at end of file
17 | diff --git a/lib/plugins/.DS_Store b/lib/plugins/.DS_Store
18 | new file mode 100644
19 | index 0000000000000000000000000000000000000000..7fb9f8edaaf892012acc6c9c0be0ed3344debf69
20 | --- /dev/null
21 | +++ b/lib/plugins/.DS_Store
22 | @@ -0,0 +1 @@
23 | +
Bud1�

compon
vue-componentsdsclbool


 
@
�





 
@
�






 
@
�






 
@E�
DSDB
 `
�




 
@
�






 
@
�






 
@
24 | \ No newline at end of file
25 | diff --git a/lib/plugins/vue-components/.DS_Store b/lib/plugins/vue-components/.DS_Store
26 | new file mode 100644
27 | index 0000000000000000000000000000000000000000..f9f60d0a8f94f19a9f55d4bcbfeaf7866207ada5
28 | --- /dev/null
29 | +++ b/lib/plugins/vue-components/.DS_Store
30 | @@ -0,0 +1 @@
31 | +
Bud1%
libdsclbool


clbool


 
@
�





 
@
�






 
@
�






 
@E%
DSDB

`
�




 
@
�






 
@
�






 
@
32 | \ No newline at end of file
33 | diff --git a/lib/plugins/vue-components/lib/validate.js b/lib/plugins/vue-components/lib/validate.js
34 | index bc3444b1a2623260077a251ae1022ac97bac3490..083e87478f1d06070037f0eb083b94189df3cf10 100644
35 | --- a/lib/plugins/vue-components/lib/validate.js
36 | +++ b/lib/plugins/vue-components/lib/validate.js
37 | @@ -4,5 +4,8 @@ module.exports = (schema, doc, rules = specifiedRules) => {
38 |    if (typeof doc === 'string') {
39 |      doc = parse(doc)
40 |    }
41 | +
42 | +  rules = rules.filter(Boolean)
43 | +
44 |    return validate(schema, doc, rules)
45 |  }
46 | 


--------------------------------------------------------------------------------
/patches/gridsome-plugin-tailwindcss@4.1.1.patch:
--------------------------------------------------------------------------------
 1 | diff --git a/CHANGELOG.md b/CHANGELOG.md
 2 | deleted file mode 100644
 3 | index 81af4156ad06d6d31979287d779d29c957f05dc6..0000000000000000000000000000000000000000
 4 | diff --git a/gridsome.server.js b/gridsome.server.js
 5 | index 6fab2456bca61f1ec497b3b7fd75c66c4290e294..0022f16f7f1bd6df590528384ae1a263ac20c40c 100644
 6 | --- a/gridsome.server.js
 7 | +++ b/gridsome.server.js
 8 | @@ -18,15 +18,15 @@ function TailwindPlugin(api, options) {
 9 |          .use("postcss-loader")
10 |          .tap((options) => {
11 |            if (shouldTimeTravel) {
12 | -            options.plugins.unshift(
13 | +            options.postcssOptions.plugins.unshift(
14 |                require("postcss-preset-env")(presetEnvConfig)
15 |              );
16 |            }
17 |  
18 | -          options.plugins.unshift(tailwind);
19 | +          options.postcssOptions.plugins.unshift(tailwind);
20 |  
21 |            if (shouldImport) {
22 | -            options.plugins.unshift(require("postcss-import")());
23 | +            options.postcssOptions.plugins.unshift(require("postcss-import")());
24 |            }
25 |  
26 |            return options;
27 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col min-h-screen font-sans antialiased text-gray-900 bg-gray-100">
 3 |     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 4 | 
 5 |     <header class="sticky inset-x-0 top-0 z-30">
 6 |       <SiteNavigation :siteName="$static.metadata.siteName" />
 7 |     </header>
 8 | 
 9 |     <router-view />
10 | 
11 |     <footer class="w-full mt-auto">
12 |       <SiteFooter :siteName="$static.metadata.siteName" />
13 |     </footer>
14 | 
15 |     <portal-target name="modal" />
16 | 
17 |   </div>
18 | </template>
19 | 
20 | <static-query>
21 |   query {
22 |     metadata {
23 |       siteName
24 |       siteDescription
25 |     }
26 |   }
27 | </static-query>
28 | 
29 | <script>
30 | import { mapActions } from 'vuex'
31 | 
32 | import SiteNavigation from '~/components/site/SiteNavigation'
33 | import SiteFooter from '~/components/site/SiteFooter'
34 | 
35 | const { auth } = process.isClient ? require('~/firebase') : import('~/firebase')
36 | 
37 | export default {
38 |   components: { SiteNavigation, SiteFooter },
39 |   metaInfo () {
40 |     const metaInfo = { meta: [] }
41 |     const { siteName, siteDescription } = this.$static.metadata
42 | 
43 |     if (siteName) {
44 |       metaInfo.title = siteName
45 |     }
46 | 
47 |     if (siteDescription) {
48 |       metaInfo.meta.push({
49 |         key: 'description',
50 |         name: 'description',
51 |         content: siteDescription,
52 |       })
53 |     }
54 | 
55 |     return metaInfo
56 |   },
57 |   methods: {
58 |     ...mapActions(['BIND_USER']),
59 |   },
60 |   async mounted () {
61 |     this.$context.locale = navigator.languages.find((lang) => {
62 |       return this.$i18n.availableLocales.includes(lang)
63 |     })
64 | 
65 |     auth.onAuthStateChanged((user) => this.BIND_USER(user))
66 |   },
67 | }
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/assets/img/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hacknug/trovado/af9254b57efde86c11ec9f23fd4c755625ae1d7a/src/assets/img/cart.png


--------------------------------------------------------------------------------
/src/components/FetchShops.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'FetchShops',
 4 |   props: {
 5 |     center: {
 6 |       type: Array,
 7 |       required: false,
 8 |     }
 9 |   },
10 |   data () {
11 |     return {
12 |       features: {},
13 |       loading: true,
14 |       endpoint: 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v8/tilequery',
15 |       blacklist: {
16 |         class: [
17 |           'lodging', 'education', 'food_and_drink', 'public_facilities', 'historic',
18 |           'store_like', 'commercial_services', 'visitor_amenities', 'arts_and_entertainment',
19 |           'motorist', 'park_like', 'sport_and_leisure', 'general', 'building', 'religion',
20 |           'industrial', 'place_like', 'landmark',
21 |         ],
22 |         types: [
23 |           'School', 'Theatre', 'Books', 'Library', 'Park', 'Garden', 'Mobile Phone',
24 |           'Drinking Water', 'Marketplace', 'Monument', 'Memorial', 'Community Centre',
25 |           'Restaurant', 'Fast Food', 'Cafe', 'Bar', 'Brewery', 'Pub', 'Employment Agency',
26 |           'Retail', 'Department Store', 'Confectionery', 'Toys', 'Post Office',
27 |           'Bank', 'Hairdresser', 'Dentist', 'Pet', 'Bicycle', 'Social Facility',
28 |           'Hotel', 'Hostel', 'Laundry', 'Fabric', 'Parking', 'Optician', 'Shoes',
29 |           'Kindergarten', 'Clothes', 'Sports', 'Ice Cream', 'Car Repair', 'Playground',
30 |           'Driving School', 'Company', 'Fuel', 'Financial',
31 |         ],
32 |       },
33 |     }
34 |   },
35 |   computed: {
36 |     queryParams () {
37 |       return new URLSearchParams({
38 |         access_token: process.env.GRIDSOME_MAPBOX_TOKEN,
39 |         radius: 500,
40 |         limit: 50,
41 |         geometry: 'point',
42 |         layers: 'poi_label',
43 |       })
44 |     },
45 |   },
46 |   render () {
47 |     return this.$scopedSlots.default({
48 |       features: this.features,
49 |       loading: this.loading,
50 |     })
51 |   },
52 |   methods: {
53 |     async fetchFeatures () {
54 |       if (this.center && this.center.length) {
55 |         this.loading = true
56 | 
57 |         await fetch(`${this.endpoint}/${this.center.join(',')}.json?${this.queryParams.toString()}`)
58 |           .then((response) => response.json())
59 |           .then((response) => {
60 |             this.response = response.features
61 |               .filter(({ properties }) => !this.blacklist.class.includes(properties.class))
62 |               .filter(({ properties }) => !this.blacklist.types.includes(properties.types))
63 |               .forEach((feature) => feature.properties.name && this.$set(this.features, feature.id, feature))
64 |             this.loading = false
65 |           })
66 |       }
67 |     },
68 |   },
69 |   watch: {
70 |     center: 'fetchFeatures',
71 |   },
72 |   async mounted () {
73 |     this.fetchFeatures()
74 |   },
75 | }
76 | </script>
77 | 


--------------------------------------------------------------------------------
/src/components/HeroFeatures.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="lg:py-24 py-16">
 3 |     <BaseContainer>
 4 |       <div class="lg:text-center relative z-10">
 5 |         <p class="text-base font-semibold leading-6 tracking-wide text-blue-600 uppercase">{{ $t && $t('components.HeroFeatures.intro') }}</p>
 6 |         <h3 class="sm:text-4xl sm:leading-10 mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900">
 7 |           <ClientOnly>
 8 |             A <vue-typer :text="['better', 'safer']" :repeat="0" initialAction="erasing" /> way to shop during quarantine
 9 |           </ClientOnly>
10 |         </h3>
11 |         <p class="lg:mx-auto max-w-2xl mt-4 text-xl leading-7 text-gray-500">{{ $t && $t('components.HeroFeatures.description') }}</p>
12 |       </div>
13 | 
14 |       <div class="lg:mt-16 lg:flex-row flex flex-col items-center mt-10">
15 |         <ul class="md:grid md:grid-cols-2 md:col-gap-8 md:row-gap-10 md:owl:mt-0 owl:mt-10">
16 |           <li v-for="(feature, index) in features" :key="index">
17 |             <div class="flex">
18 |               <div class="flex-shrink-0">
19 |                 <div class="flex items-center justify-center w-12 h-12 text-white bg-blue-600 rounded-md">
20 |                   <component v-if="feature.icon" :is="feature.icon" class="w-6 h-6" />
21 |                 </div>
22 |               </div>
23 |               <div class="ml-4">
24 |                 <h5 class="text-lg font-medium leading-6 text-gray-900">{{ feature.title }}</h5>
25 |                 <p class="mt-2 text-base leading-6 text-gray-500">{{ feature.description }}</p>
26 |               </div>
27 |             </div>
28 |           </li>
29 |         </ul>
30 |       </div>
31 |     </BaseContainer>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import { CalendarIcon, GiftIcon, MapPinIcon, HeartIcon, UsersIcon } from 'vue-feather-icons'
37 | 
38 | import BaseContainer from '~/components/base/BaseContainer'
39 | 
40 | export default {
41 |   name: 'HeroFeatures',
42 |   components: {
43 |     BaseContainer,
44 |     VueTyper: () =>
45 |       import ('vue-typer')
46 |       .then(m => m.VueTyper)
47 |       .catch(),
48 |   },
49 |   data () {
50 |     return {
51 |       features: [
52 |         {
53 |           title: 'Explore your neighbourhood',
54 |           description: 'Find supermarkets and pharmacies near your home that offer the products you need.',
55 |           icon: MapPinIcon,
56 |         },
57 |         {
58 |           title: 'Plan ahead',
59 |           description: 'Let us know the items that you need in and your location. We\'ll take care of the rest.',
60 |           icon: CalendarIcon,
61 |         },
62 |         {
63 |           title: 'Go safely to the supermarket!',
64 |           description: 'We\'ll let you know the best time to go so you can avoid the long lines and empty shelves.',
65 |           icon: HeartIcon,
66 |         },
67 |         {
68 |           title: 'Help your community',
69 |           description: 'Update product availability levels from what you’ve seen at your local supermarket.',
70 |           icon: UsersIcon,
71 |         },
72 |         {
73 |           title: 'Unlock shiny rewards',
74 |           description: 'Become a trusted contributor and gain badges by improving the accuracy of your supermarket shelf information.',
75 |           icon: GiftIcon,
76 |         },
77 |       ],
78 |     }
79 |   },
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/components/HeroForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="lg:py-24 py-16 overflow-hidden">
 3 |     <BaseContainer>
 4 |       <svg class="lg:block right-full translate-y-1/4 absolute hidden transform translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
 5 |         <defs>
 6 |           <pattern id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
 7 |             <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
 8 |           </pattern>
 9 |         </defs>
10 |         <rect width="404" height="784" fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
11 |       </svg>
12 | 
13 |       <div class="relative">
14 |         <h3 class="sm:text-4xl sm:leading-10 text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900">
15 |           <ClientOnly>
16 |             A <vue-typer :text="['better', 'safer']" initialAction="erasing" /> way to shop during quarantine
17 |           </ClientOnly>
18 |         </h3>
19 |         <p class="max-w-3xl mx-auto mt-4 text-xl leading-7 text-center text-gray-500">{{ $t && $t('components.HeroForm.description') }}</p>
20 |       </div>
21 | 
22 |       <div class="sm:rounded-lg relative mt-12 overflow-hidden bg-white shadow">
23 |         <div class="aspect-ratio-16/9">
24 |           <iframe
25 |             class="sm:rounded-lg absolute inset-0 w-full h-full"
26 |             src="https://covidhelp.typeform.com/to/yumxab"
27 |           />
28 |         </div>
29 |       </div>
30 | 
31 |     </BaseContainer>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import BaseContainer from '~/components/base/BaseContainer'
37 | 
38 | export default {
39 |   name: 'HeroForm',
40 |   components: {
41 |     BaseContainer,
42 |     VueTyper: () =>
43 |       import ('vue-typer')
44 |       .then(m => m.VueTyper)
45 |       .catch(),
46 |   },
47 | }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/components/HeroMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="lg:py-24 py-16 overflow-hidden">
 3 |     <BaseContainer>
 4 |       <svg class="lg:block left-full -translate-y-1/4 absolute hidden transform -translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
 5 |         <defs>
 6 |           <pattern id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
 7 |             <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
 8 |           </pattern>
 9 |         </defs>
10 |         <rect width="404" height="784" fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
11 |       </svg>
12 | 
13 |       <div class="relative">
14 |         <h3 class="sm:text-4xl sm:leading-10 text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900">
15 |           <ClientOnly>
16 |             A <vue-typer :text="['better', 'safer']" initialAction="erasing" /> way to shop during quarantine
17 |           </ClientOnly>
18 |         </h3>
19 |         <p class="max-w-3xl mx-auto mt-4 text-xl leading-7 text-center text-gray-500">
20 |           We want to reduce people’s exposure to the COVID-19 by letting people know whether the items they’re looking for are available in their nearest supermarket.
21 |         </p>
22 |       </div>
23 | 
24 |       <div class="sm:rounded-lg relative mt-12 overflow-hidden bg-white shadow">
25 |         <div class="aspect-ratio-16/9">
26 |           <ShopsMap :shops="shops" :filteredShops="filteredShops" class="sm:rounded-lg absolute inset-0 w-full h-full" style="position: absolute;" />
27 |         </div>
28 |       </div>
29 | 
30 |     </BaseContainer>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import BaseContainer from '~/components/base/BaseContainer'
36 | import ShopsMap from '~/components/ShopsMap'
37 | 
38 | export default {
39 |   name: 'HeroMap',
40 |   components: {
41 |     BaseContainer,
42 |     ShopsMap,
43 |     VueTyper: () =>
44 |       import ('vue-typer')
45 |       .then(m => m.VueTyper)
46 |       .catch(),
47 |   },
48 |   props: {
49 |     shops: {
50 |       type: Array,
51 |       required: true,
52 |     },
53 |     filteredShops: {
54 |       type: Array,
55 |       required: false,
56 |     },
57 |   },
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/components/HeroSearch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative flex overflow-hidden" style="min-height: 50vh;">
  3 |     <div class="hidden lg:block lg:absolute lg:inset-0">
  4 |       <span class="absolute top-0 transform translate-x-64 -translate-y-8 left-1/2">
  5 |         <svg class="" width="640" height="784" fill="none" viewBox="0 0 640 784">
  6 |           <defs>
  7 |             <pattern id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047" x="118" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
  8 |               <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
  9 |             </pattern>
 10 |           </defs>
 11 |           <rect y="72" width="640" height="640" class="text-gray-50" fill="currentColor" />
 12 |           <rect x="118" width="404" height="784" fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)" />
 13 |         </svg>
 14 |         <figure class="absolute inset-0 flex items-center w-full h-full transform -translate-x-1/4">
 15 |           <ShoppingCart class="w-full" />
 16 |         </figure>
 17 |       </span>
 18 |     </div>
 19 | 
 20 |     <BaseContainer class="w-full h-full py-12 my-auto md:py-16 lg:py-20">
 21 |       <div class="z-0 mb-8 lg:hidden">
 22 |           <figure class="transform translate-x-1/4 translate-y-1/12">
 23 |             <ShoppingCart class="w-auto -mt-20 h-72" />
 24 |           </figure>
 25 |       </div>
 26 | 
 27 |       <div class="relative z-10 flex flex-col justify-center lg:w-1/2 lg:h-full">
 28 | 
 29 |         <ClientOnly>
 30 |           <h2 class="flex flex-col text-3xl font-extrabold leading-9 tracking-tight sm:text-4xl sm:leading-10">
 31 |             <span class="text-gray-900">Need <vue-typer :text="items" :shuffle="true" initialAction="erasing" />?</span>
 32 |             <span class="text-blue-600">{{ $t && $t('components.HeroSearch.title')[1] }}</span>
 33 |             <!-- <span class="text-blue-600">Optimise your supermarket &amp; pharmacy visit during the COVID-19 quarantine.</span> -->
 34 |           </h2>
 35 |         </ClientOnly>
 36 |         <p class="mt-3 text-lg leading-7 text-gray-500">{{ $t && $t('components.HeroSearch.description') }}</p>
 37 | 
 38 |         <form class="flex mt-8 owl:ml-3" @submit.prevent="handleSubmit">
 39 |           <SiteNavigationSearch class="sm:max-w-xs" size="xl" placeholder="Enter your ZIP Code" />
 40 |           <div class="flex-shrink-0">
 41 |             <BaseButton class="shadow" size="xl" type="submit">Search</BaseButton>
 42 |           </div>
 43 |         </form>
 44 | 
 45 |         <transition v-bind="transitions.zoom">
 46 |           <div v-show="suggestions.length" class="mt-8">
 47 |             <dl class="flex flex-wrap text-sm owl:mt-2 owl:mr-2">
 48 |               <dt class="w-full mb-1 text-gray-500">Suggestions</dt>
 49 |               <dd v-for="(suggestion, index) in suggestions" :key="index" class="font-medium leading-5">
 50 |                 <g-link :to="$tp && $tp(`/shops?q=${suggestion}`)"
 51 |                   class="focus:outline-none focus:shadow-outline inline-flex items-center px-2.5 py-0.5 rounded-md bg-gray-100 text-gray-800"
 52 |                 >{{ suggestion }}
 53 |                 </g-link>
 54 |               </dd>
 55 |             </dl>
 56 |           </div>
 57 |         </transition>
 58 | 
 59 |       </div>
 60 |     </BaseContainer>
 61 | 
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import { SearchIcon } from 'vue-feather-icons'
 67 | 
 68 | import { transitions } from '~/mixins/Transitions'
 69 | import BaseContainer from '~/components/base/BaseContainer'
 70 | import BaseButton from '~/components/base/BaseButton'
 71 | import BaseInput from '~/components/base/BaseInput'
 72 | import ShoppingCart from '~/components/icon/ShoppingCart'
 73 | import SiteNavigationSearch from '~/components/site/SiteNavigationSearch'
 74 | 
 75 | export default {
 76 |   name: 'HeroSearch',
 77 |   mixins: [transitions],
 78 |   components: {
 79 |     SearchIcon,
 80 |     BaseContainer, BaseButton, BaseInput,
 81 |     ShoppingCart, SiteNavigationSearch,
 82 |     VueTyper: () =>
 83 |       import ('vue-typer')
 84 |       .then(m => m.VueTyper)
 85 |       .catch(),
 86 |   },
 87 |   data () {
 88 |     return {
 89 |       searchTerm: '',
 90 |       items: ['toilet paper', 'pasta', 'yeast', 'bread', 'rice', 'flour', 'hand sanitiser', 'cleaning products'],
 91 |       cities: new Set(),
 92 |       positions: new Set(),
 93 |       zipcodes: new Set(),
 94 |     }
 95 |   },
 96 |   computed: {
 97 |     suggestions () {
 98 |       return [ ...this.cities, ...this.zipcodes, ...this.positions ]
 99 |     },
100 |   },
101 |   methods: {
102 |     handleSubmit (event) {
103 |       // TODO: Save query in userData
104 |       this.$router.push({
105 |         path: 'shops',
106 |         query: { q: this.searchTerm },
107 |       })
108 |     },
109 |   },
110 |   mounted () {
111 |     fetch('/api/userGeo')
112 |       .then((response) => response.json())
113 |       .then((data) => data.forEach((res) => {
114 |         if (res.city)
115 |           this.cities = new Set(this.cities.add(res.city))
116 |         if (res.postal)
117 |           this.zipcodes = new Set(this.zipcodes.add(res.postal))
118 |         // if (res.longitude && res.latitude)
119 |         //   this.positions = new Set(this.positions.add(`${res.longitude},${res.latitude}`))
120 |       }))
121 |   },
122 | }
123 | </script>
124 | 


--------------------------------------------------------------------------------
/src/components/ShopCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative z-0 flex flex-col self-start overflow-hidden leading-5 bg-white rounded-lg shadow-lg">
  3 | 
  4 |     <div @click="open = !open" class="sm:flex-row flex flex-col items-start justify-between flex-1 p-4">
  5 | 
  6 |       <div class="relative flex-1 w-full max-w-full">
  7 |         <header class="owl:ml-2 flex w-full max-w-full">
  8 |           <div class="flex flex-col-reverse flex-1 truncate">
  9 |             <h3 class="text-xl font-semibold leading-7 text-gray-900 truncate">{{ shop.properties.name }}</h3>
 10 |             <p :class="className.label">{{ shop.properties.type }}</p>
 11 |           </div>
 12 |           <div class="owl:ml-1 flex-none">
 13 |             <BaseButton v-tippy content="Show in map" @click.native.stop="$emit('flyTo', shop.geometry.coordinates)" variant="secondary" size="xs">
 14 |               <MapPinIcon class="group-hover:opacity-100 w-4 h-4 opacity-50 stroke-current" />
 15 |             </BaseButton>
 16 |             <BaseButton v-tippy content="Add to favorites" @click.native.stop="handleEdit('favourites', shop)" variant="secondary" size="xs">
 17 |               <BookmarkIcon class="w-4 h-4 stroke-current" :class="[isFavourite ? 'opacity-75 text-red-700 fill-current' : 'group-hover:opacity-100 opacity-50']" />
 18 |             </BaseButton>
 19 |           </div>
 20 |         </header>
 21 | 
 22 |         <div class="flex items-end justify-between w-full mt-4">
 23 |           <dl class="text-sm">
 24 |             <div class="owl:mt-1 flex flex-col">
 25 |               <dt class="owl:ml-1 flex items-center text-gray-400">
 26 |                 <BarChart2Icon class="w-5 h-5" />
 27 |                 <span>Stock Levels:</span>
 28 |               </dt>
 29 |               <dd class="font-medium">
 30 |                 <button
 31 |                   class="owl:ml-1 inline-flex items-center px-2.5 py-0.5 rounded-md font-medium leading-5 focus:outline-none focus:shadow-outline-blue"
 32 |                   :class="classNames[averageStock]"
 33 |                   aria-label="See Details"
 34 |                   ><span>{{ averageStock }}</span>
 35 |                   <ChevronDownIcon class="w-5 h-5" :class="[open && 'transform rotate-180']" />
 36 |                 </button>
 37 |               </dd>
 38 |             </div>
 39 |           </dl>
 40 | 
 41 |           <BaseButton @click.native.stop="!user ? SET_AUTH_INTENT('Sign Up') : $emit('bookTime', shop)" variant="secondary" size="sm">
 42 |             <template slot="icon"><CalendarIcon class="w-5 h-5 text-blue-600 stroke-current" /></template> Save your Timeslot
 43 |           </BaseButton>
 44 | 
 45 |         </div>
 46 |       </div>
 47 | 
 48 |     </div>
 49 | 
 50 |     <div v-if="open" class="bg-gray-50 sm:px-6 owl:mt-8 flex flex-col px-4 py-6 border-t-2 border-gray-100">
 51 | 
 52 |       <p class="w-full"><small class="text-lg">Updated yesterday by
 53 |         <span class="bg-gray-300-25 hover:bg-gray-100 focus:bg-gray-100 px-2 py-1 rounded">
 54 |           <code class="font-mono">concerned_citizen</code>
 55 |         </span>
 56 |       </small></p>
 57 | 
 58 |       <div class="w-full">
 59 |         <dl class="grid grid-cols-1 row-gap-1 col-gap-12">
 60 |           <div class="owl:ml-2 flex justify-between text-sm" v-for="({ availability, product }, key) in (newStock || currentStock)" :key="key">
 61 |             <dt class="owl:ml-1 flex items-center text-gray-500">{{ product }}</dt>
 62 |             <dd :class="classNames[availability]" class="owl:ml-1 flex items-center leading-none text-right">
 63 |               <button :class="[ ...className.button, availability === min && 'opacity-50 cursor-not-allowed']" :disabled="availability === min"
 64 |                 @click="changeStockLevel(key, -1)"><MinusIcon class="w-4 h-4 text-gray-300" /></button>
 65 |               <span class="w-24 px-2 py-1 text-right bg-white border border-gray-200 rounded">{{ availability }}</span>
 66 |               <button :class="[ ...className.button, availability === max && 'opacity-50 cursor-not-allowed']" :disabled="availability === max"
 67 |                 @click="changeStockLevel(key, +1)"><PlusIcon class="w-4 h-4 text-gray-300" /></button>
 68 |             </dd>
 69 |           </div>
 70 |         </dl>
 71 |       </div>
 72 | 
 73 |       <div class="owl:mt-2 pt-6 text-center border-t border-gray-200">
 74 |         <span class="text-sm text-blue-500">Have you been here recently?</span>
 75 |         <div class="owl:ml-2 flex justify-center">
 76 |           <BaseButton v-if="edit" @click.native="newStock = null; edit = false" variant="secondary" size="md">Cancel</BaseButton>
 77 |           <BaseButton v-if="edit" @click.native="updateStock" variant="primary" size="md">Update</BaseButton>
 78 |           <BaseButton v-if="!edit" @click.native="newStock = currentStock; edit = true" variant="secondary" size="md">Update Stock
 79 |             <template slot="icon">
 80 |               <EditIcon class="w-5 h-5 text-gray-400 stroke-current" />
 81 |             </template>
 82 |           </BaseButton>
 83 |         </div>
 84 |       </div>
 85 | 
 86 |     </div>
 87 | 
 88 |   </div>
 89 | </template>
 90 | 
 91 | <script>
 92 | import deepmerge from 'deepmerge'
 93 | import { mapState, mapMutations, mapActions } from 'vuex'
 94 | import { BarChart2Icon, BookmarkIcon, CalendarIcon, ChevronDownIcon, EditIcon, MapPinIcon, MinusIcon, PlusIcon } from 'vue-feather-icons'
 95 | 
 96 | import BaseButton from '~/components/base/BaseButton'
 97 | 
 98 | const { db } = process.isClient ? require('~/firebase') : import('~/firebase')
 99 | const places = db && db.collection('places')
100 | 
101 | export default {
102 |   name: 'ShopCard',
103 |   components: {
104 |     BaseButton,
105 |     BarChart2Icon,
106 |     BookmarkIcon,
107 |     CalendarIcon,
108 |     ChevronDownIcon,
109 |     EditIcon,
110 |     MapPinIcon,
111 |     MinusIcon,
112 |     PlusIcon,
113 |   },
114 |   props: {
115 |     id: {
116 |       type: String,
117 |       required: true,
118 |     },
119 |     shop: {
120 |       type: Object,
121 |       required: true,
122 |     },
123 |   },
124 |   firestore () {
125 |     return {
126 |       place: places.doc(this.id),
127 |     }
128 |   },
129 |   data () {
130 |     return {
131 |       open: false,
132 |       edit: false,
133 |       place:  null,
134 |       newStock: null,
135 |       sum: null,
136 | 
137 |       recipe: {
138 |         stocks: [ 'no info', 'sold out', '1-10 qty', '10-30 qty', '+30 qty' ],
139 |         items: [
140 |           'Fruit', 'Vegetables', 'Rice', 'Pasta', 'Bread', 'Flour', 'Yeast',
141 |           'Toilet Paper', 'Hand Sanitiser', 'Cleaning Products',
142 |         ],
143 |       },
144 |     }
145 |   },
146 |   computed: {
147 |     ...mapState(['user', 'userData']),
148 | 
149 |     min () {
150 |       return [...this.recipe.stocks].shift()
151 |     },
152 |     max () {
153 |       return [...this.recipe.stocks].pop()
154 |     },
155 | 
156 |     averageStock () {
157 |       const labels = ['None', 'Low', 'Medium', 'High']
158 |       const stocks = [ 'sold out', '1-10 qty', '10-30 qty', '+30 qty' ]
159 |       const remoteAverage = Object.entries(this.remoteStock)
160 |         .filter(([, { availability }]) => availability !== 'no info')
161 |       const labelIndex = Math.ceil(remoteAverage.map(([, { availability }]) => availability)
162 |         .map((availability) => stocks.indexOf(availability))
163 |         .reduce((acc, val) => acc + val, 0) / remoteAverage.length)
164 | 
165 |       return labels[labelIndex] || 'Unknown'
166 |     },
167 |     remoteStock () {
168 |       return Object.fromEntries(Object.entries(this.place ? this.place.stock : {})
169 |         .sort((a, b) => this.recipe.items.indexOf(a[1].product) - this.recipe.items.indexOf(b[1].product)))
170 |     },
171 |     currentStock () {
172 |       return (this.place && this.place.stock) ? this.remoteStock : this.mockStock
173 |     },
174 | 
175 |     isFavourite () {
176 |       return this.userData && this.userData.favourites && this.userData.favourites[this.shop.id]
177 |     },
178 | 
179 |     className () {
180 |       return {
181 |         label: [
182 |           'inline-flex items-center text-xs font-medium leading-4 uppercase tracking-wider',
183 |           this.shop.properties.class === 'food_and_drink_stores' ? 'text-blue-800'
184 |             : this.shop.properties.class === 'medical' ? 'text-green-800' : 'text-gray-800',
185 |         ],
186 |         button: [
187 |           !this.edit && 'invisible',
188 |           'flex flex-none bg-white border border-gray-200 rounded-full',
189 |           'focus:outline-none focus:shadow-outline-blue',
190 |         ],
191 |       }
192 |     },
193 |     classNames () {
194 |       return {
195 |         'Unknown': 'text-gray-800 bg-gray-100',
196 |         'None': 'text-gray-800 bg-gray-100',
197 |         'Low': 'text-red-800 bg-red-100',
198 |         'Medium': 'text-yellow-800 bg-yellow-100',
199 |         'High': 'text-green-800 bg-green-100',
200 | 
201 |         'no info': 'text-gray-400',
202 |         'sold out': 'text-black-400',
203 |         '1-10 qty': 'text-red-400',
204 |         '10-30 qty': 'text-yellow-400',
205 |         '+30 qty': 'text-green-400',
206 |       }
207 |     },
208 | 
209 |     mockStock () {
210 |       return Object.fromEntries(this.recipe.items.map((item) => {
211 |         return [this.$options.filters.camel(item), {
212 |           product: item,
213 |           availability: this.min,
214 |         }]
215 |       }))
216 |     }
217 |   },
218 |   methods: {
219 |     ...mapMutations(['SET_AUTH_INTENT']),
220 |     ...mapActions(['UPDATE_USER_DOC']),
221 | 
222 |     changeStockLevel (item, increment) {
223 |       const stocks = this.recipe.stocks
224 |       const stock = this.newStock || this.remoteStock
225 |       const getNewLevel = (avail, inc) => stocks[stocks.indexOf(avail) + inc]
226 |       const newLevel = getNewLevel((stock && stock[item]
227 |         ? stock[item].availability : stocks[0]), increment)
228 |         || stocks[0]
229 | 
230 |       this.newStock = deepmerge.all([
231 |         this.mockStock,
232 |         this.newStock || {},
233 |         { [item]: { availability: newLevel } },
234 |       ])
235 |     },
236 | 
237 |     async updateStock () {
238 |       const data = deepmerge(this.place || {}, { ...this.shop, stock: this.newStock })
239 |       this.$firestoreRefs.place[this.place ? 'update' : 'set'](data)
240 |         .then(() => console.log('place updated'))
241 |         .then(() => this.edit = false)
242 |     },
243 |     async handleEdit (type, shop) {
244 |       if (this.user) {
245 |         const data = { ...this.userData }
246 |         if (!data[type]) data[type] = {}
247 | 
248 |         const favs = data[type]
249 |         const index = favs.hasOwnProperty(shop.id)
250 | 
251 |         if (favs.hasOwnProperty(shop.id)) delete favs[shop.id]
252 |         else favs[shop.id] = shop
253 | 
254 |         await this.UPDATE_USER_DOC({ ...data, [type]: favs })
255 |       } else {
256 |         this.SET_AUTH_INTENT('Sign Up')
257 |       }
258 |     },
259 |   },
260 |   watch: {
261 |     id (id) {
262 |       this.$bind('place', places.doc(id))
263 |     },
264 |   },
265 | }
266 | </script>
267 | 


--------------------------------------------------------------------------------
/src/components/ShopCardAlt.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex flex-col self-start overflow-hidden leading-5 rounded-lg shadow-lg">
  3 | 
  4 |     <div class="sm:flex-row sm:p-6 flex flex-col items-start justify-between flex-1 p-4 bg-white">
  5 |       <div class="relative flex-1 w-full">
  6 |         <p class="text-sm font-medium leading-5 text-blue-600">
  7 |           <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-blue-100 text-blue-800 lowercase">Mercadona</span>
  8 |         </p>
  9 |         <span :to="shop.path" class="block mt-2">
 10 |           <h3 class="text-xl font-semibold leading-7 text-gray-900 lowercase truncate">{{ shop.address }}</h3>
 11 |           <p class="mt-1 text-base leading-6 text-gray-500 lowercase truncate">{{ `${ shop.zipcode } ${ shop.state } (${ shop.province })` }}</p>
 12 |         </span>
 13 | 
 14 |         <div class="flex items-end justify-between w-full mt-4">
 15 |           <dl>
 16 |             <div class="owl:ml-2 flex justify-between">
 17 |               <dt class="owl:ml-1 flex items-center text-gray-400">
 18 |                 <BarChart2Icon class="w-5 h-5" />
 19 |                 <span>Stock Levels:</span>
 20 |               </dt>
 21 |               <dd class="font-medium text-green-500">
 22 |                 <button
 23 |                   @click="open = !open"
 24 |                   class="owl:ml-0.5 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium leading-5 focus:outline-none focus:shadow-outline-blue"
 25 |                   :class="classNames[averageLabels[average]]"
 26 |                   aria-label="See Details"
 27 |                   ><span>{{ averageLabels[average] }}</span>
 28 |                   <ChevronDownIcon class="w-5 h-5" />
 29 |                 </button>
 30 |               </dd>
 31 |             </div>
 32 |           </dl>
 33 | 
 34 |           <BaseButton @click.native="addToFavourites(shop)" variant="primary" size="sm" class="md:inline-flex hidden">
 35 |             <template slot="icon"><CalendarIcon class="w-5 h-5 stroke-current" /></template> Save your Timeslot
 36 |           </BaseButton>
 37 |           <BaseButton @click.native="addToFavourites(shop)" variant="primary" size="sm" class="md:hidden">
 38 |             <CalendarIcon class="w-5 h-5 stroke-current" />
 39 |           </BaseButton>
 40 |           <BaseButton @click.native="handleEdit('favourites', shop)" variant="secondary" size="xs" class="absolute top-0 right-0">
 41 |             <!-- <template slot="icon"><BookmarkIcon class="w-4 h-4 stroke-current" /></template> {{ isFavourite ? 'Remove from' : 'Add to' }} Favourites -->
 42 |             <BookmarkIcon class="w-4 h-4 stroke-current" :class="[isFavourite ? 'opacity-75 text-red-700 fill-current' : 'opacity-50']" />
 43 |           </BaseButton>
 44 |         </div>
 45 |       </div>
 46 | 
 47 |     </div>
 48 | 
 49 |     <div v-if="open" class="bg-gray-50 sm:px-6 owl:mt-8 flex flex-col items-center justify-between px-4 py-6 border-t-2 border-gray-100">
 50 | 
 51 |       <div class="mr-auto">
 52 |         <dl class="md:grid-cols-2 grid grid-cols-1 row-gap-2 col-gap-12">
 53 |           <div class="owl:ml-2 flex justify-between" v-for="({ item, stock }, index) in stock" :key="index">
 54 |             <dt class="owl:ml-1 flex items-center text-gray-500">{{ item }}:</dt>
 55 |             <dd :class="classNames[stock]" class="font-medium">{{ stock }}</dd>
 56 |           </div>
 57 |         </dl>
 58 |         <p class="mt-6 text-gray-400">
 59 |           <small>Updated yesterday by
 60 |             <a href="#" class="px-1.5 py-1 text-gray-500 bg-blue-50 hover:text-gray-600 focus:bg-text-600 rounded">
 61 |               <code class="font-mono">concerned_citizen</code>
 62 |             </a>
 63 |           </small>
 64 |         </p>
 65 |       </div>
 66 | 
 67 |       <div class="owl:mt-2 text-center">
 68 |         <span class="text-sm text-blue-500">Have you been here recently?</span>
 69 |         <span class="sm:w-auto flex w-full rounded-md shadow-sm opacity-50 cursor-not-allowed">
 70 |           <button disabled @click="open = false; setTimeout(() => open = true, 1000)" type="button" class="group hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline sm:text-sm sm:leading-5 relative inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm pointer-events-none">
 71 |             Update Stock
 72 |             <span class="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-400">
 73 |               <svg class="w-5 h-5 mr-2 stroke-current" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 74 |                 <path d="M12 6V10" />
 75 |                 <path d="M12 14H12.01" />
 76 |                 <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" />
 77 |               </svg>
 78 |             </span>
 79 |           </button>
 80 |         </span>
 81 |       </div>
 82 | 
 83 |     </div>
 84 | 
 85 |   </div>
 86 | </template>
 87 | 
 88 | <script>
 89 | import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 90 | import { BarChart2Icon, BookmarkIcon, CalendarIcon, ChevronDownIcon } from 'vue-feather-icons'
 91 | 
 92 | import BaseButton from '~/components/base/BaseButton'
 93 | 
 94 | export default {
 95 |   name: 'ShopCardAlt',
 96 |   components: {
 97 |     BarChart2Icon,
 98 |     BookmarkIcon,
 99 |     CalendarIcon,
100 |     ChevronDownIcon,
101 |     BaseButton,
102 |   },
103 |   props: {
104 |     shop: {
105 |       type: Object,
106 |       required: true,
107 |       stock: [],
108 |     },
109 |   },
110 |   data () {
111 |     return {
112 |       open: false,
113 |       stock: [],
114 |       average: null,
115 |       sum: null,
116 | 
117 |       recipe: {
118 |         stocks: ['no info', 'sold out', '1-10 qty', '10-30 qty', '+30 qty'],
119 |         items: [
120 |           'Toilet Paper', 'Hand Sanitiser', 'Fruit', 'Vegetables',
121 |           'Rice', 'Pasta', 'Bread', 'Flour', 'Yeast', 'Cleaning Products',
122 |         ],
123 |       },
124 |     }
125 |   },
126 |   computed: {
127 |     ...mapState(['user', 'userData']),
128 | 
129 |     isFavourite () {
130 |       return this.userData && this.userData.favourites && this.userData.favourites[this.shop.id]
131 |     },
132 | 
133 |     averageLabels () {
134 |       return [ 'Unknown', 'None', 'Low', 'Medium', 'High' ]
135 |     },
136 |     classNames () {
137 |       return {
138 |         'Unknown': 'text-black-800 bg-black-100',
139 |         'None': 'text-gray-800 bg-gray-100',
140 |         'Low': 'text-red-800 bg-red-100',
141 |         'Medium': 'text-yellow-800 bg-yellow-100',
142 |         'High': 'text-green-800 bg-green-100',
143 | 
144 |         'no info': 'text-black-400',
145 |         'sold out': 'text-gray-400',
146 |         '1-10 qty': 'text-red-400',
147 |         '10-30 qty': 'text-yellow-400',
148 |         '+30 qty': 'text-green-400',
149 |       }
150 |     },
151 |   },
152 |   methods: {
153 |     ...mapMutations(['SET_AUTH_INTENT']),
154 |     ...mapActions(['UPDATE_USER_DOC']),
155 | 
156 |     async handleEdit (type, shop) {
157 |       const data = { ...this.userData }
158 |       if (!data[type]) data[type] = {}
159 | 
160 |       const favs = data[type]
161 |       const index = favs.hasOwnProperty(shop.id)
162 | 
163 |       if (favs.hasOwnProperty(shop.id)) delete favs[shop.id]
164 |       else favs[shop.id] = shop
165 | 
166 |       await this.UPDATE_USER_DOC({ ...data, [type]: favs })
167 |     },
168 |   },
169 |   mounted () {
170 |     const random = (max) => Math.floor(Math.random() * max)
171 | 
172 |     this.stock = this.recipe.items.map((item) => {
173 |       return { item, stock: this.recipe.stocks[random(this.recipe.stocks.length)] }
174 |     })
175 |     this.sum = this.stock.reduce((accumulator, { stock }) => {
176 |       return accumulator + this.recipe.stocks.indexOf(stock)
177 |     }, 0)
178 | 
179 |     this.average = Math.round((this.sum + this.stock.length) / this.stock.length)
180 |   }
181 | }
182 | </script>
183 | 


--------------------------------------------------------------------------------
/src/components/ShopCollection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="lg:pt-24 lg:pb-28 relative pt-16 pb-20">
 3 |     <!-- <div class="absolute inset-0">
 4 |       <div class="h-1/3 sm:h-2/3 bg-white"></div>
 5 |     </div> -->
 6 | 
 7 |     <BaseContainer>
 8 |       <div class="text-center">
 9 |         <h2 class="sm:text-4xl sm:leading-10 text-3xl font-extrabold leading-9 tracking-tight text-gray-900">Supermarkets with more stock</h2>
10 |         <!-- <p class="sm:mt-4 max-w-2xl mx-auto mt-3 text-xl leading-7 text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed.</p> -->
11 |       </div>
12 | 
13 |       <div class="lg:grid-cols-2 lg:max-w-none grid max-w-lg gap-5 mx-auto mt-12">
14 |         <ShopCard v-for="{ node } in shops" :key="node.id" :shop="node" />
15 |       </div>
16 |     </BaseContainer>
17 | 
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import BaseContainer from '~/components/base/BaseContainer'
23 | import ShopCard from '~/components/ShopCardAlt'
24 | 
25 | export default {
26 |   name: 'ShopCollection',
27 |   components: { BaseContainer, ShopCard },
28 |   props: {
29 |     shops: {
30 |       type: Array,
31 |       required: true,
32 |     },
33 |   },
34 | }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/components/Shops.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="md:flex-row flex flex-col-reverse flex-1">
  3 | 
  4 |     <div class="owl:mt-5 bg-gray-50 z-10 flex-grow w-full max-w-lg p-5 pt-0 border-r border-gray-100 shadow">
  5 |       <header class="relative sticky top-0 z-10 -mx-5">
  6 |         <div class="bg-gray-50 md:p-5 z-10 flex items-center justify-between px-4 py-3 border-b border-gray-200">
  7 |           <div class="owl:ml-2 flex">
  8 |             <h2 class="sm:text-3xl sm:leading-9 sm:truncate text-2xl font-bold leading-7 text-gray-900">Closest Shops</h2>
  9 |             <p class="sm:text-3xl sm:leading-9 sm:truncate text-2xl font-bold leading-7 text-blue-600" :class="[loading && 'spinner']">{{ Object.keys(filteredShops).length }}</p>
 10 |           </div>
 11 |           <div class="owl:ml-2 flex">
 12 |             <BaseButton @click.native="showFilters = !showFilters" variant="secondary" size="sm">
 13 |               <template slot="icon"><FilterIcon class="w-5 h-5 stroke-current" /></template> Filter Shops
 14 |             </BaseButton>
 15 |           </div>
 16 |         </div>
 17 |         <div v-if="showFilters" class="top-full md:p-5 bg-gray-50 absolute inset-x-0 z-0 w-full px-4 py-3 border-b border-gray-200">
 18 |           <dl class="owl:mt-6">
 19 |             <div class="grid grid-cols-3 gap-2">
 20 |               <dt class="w-full col-span-3">
 21 |                 <div class="text-sm font-medium text-gray-400 uppercase">Type of Store</div>
 22 |               </dt>
 23 |               <dd class="flex items-start w-full col-span-1" v-for="(label, key) in shopTypes" :key="key">
 24 |                 <div class="absolute flex items-center h-5">
 25 |                   <input v-model="shopTypeTerms" :value="key" :id="key" type="checkbox" class="form-checkbox w-4 h-4 text-blue-600 transition duration-150 ease-in-out" />
 26 |                 </div>
 27 |                 <div class="pl-7 text-sm leading-5">
 28 |                   <label :for="key" class="text-gray-600">{{ label }}</label>
 29 |                 </div>
 30 |               </dd>
 31 |             </div>
 32 |             <!-- <div class="grid grid-cols-3 gap-2">
 33 |               <dt class="w-full col-span-3">
 34 |                 <div class="text-sm font-medium text-gray-400 uppercase">Products</div>
 35 |               </dt>
 36 |               <dd class="flex items-start w-full col-span-1" v-for="(item, index) in items" :key="index">
 37 |                 <div class="absolute flex items-center h-5">
 38 |                   <input :id="$options.filters.camel(item)" type="checkbox" class="form-checkbox w-4 h-4 text-blue-600 transition duration-150 ease-in-out" checked />
 39 |                 </div>
 40 |                 <div class="pl-7 text-sm leading-5">
 41 |                   <label :for="$options.filters.camel(item)" class="text-gray-600">{{ item }}</label>
 42 |                 </div>
 43 |               </dd>
 44 |             </div> -->
 45 |           </dl>
 46 |         </div>
 47 |       </header>
 48 |       <div v-if="!shops && loading" class="m-auto text-center">Loading…</div>
 49 |       <div v-else class="owl:mt-5">
 50 |         <ShopCard
 51 |           :key="shop.id"
 52 |           v-for="shop in sortedShops"
 53 |           :id="String(shop.id)"
 54 |           :shop="shop"
 55 |           @flyTo="$refs.map.flyTo($event)"
 56 |           @bookTime="isBooking = $event"
 57 |         />
 58 |       </div>
 59 |     </div>
 60 | 
 61 |     <div class="aspect-ratio-16/9 md:aspect-ratio-none relative sticky top-0 w-full max-h-screen">
 62 |       <div class="md:static absolute inset-0 w-full h-full">
 63 |         <ShopsMap v-if="userLocation" ref="map" :shops="filteredShops" :center="userLocation" @move="changeCenter($event)" />
 64 |       </div>
 65 |     </div>
 66 | 
 67 |     <ClientOnly>
 68 |       <ShopsBookTime :open="isBooking" @close="isBooking = false" />
 69 |     </ClientOnly>
 70 | 
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | import distance from '@turf/distance'
 76 | import { FilterIcon } from 'vue-feather-icons'
 77 | 
 78 | export default {
 79 |   name: 'Shops',
 80 |   components: {
 81 |     FilterIcon,
 82 |     BaseButton: () => import('~/components/base/BaseButton'),
 83 |     ShopCard: () => import('~/components/ShopCard'),
 84 |     ShopsMap: () => import('~/components/ShopsMap'),
 85 |     ShopsBookTime: () => import('~/components/ShopsBookTime'),
 86 |   },
 87 |   props: [
 88 |     'shops',
 89 |     'loading',
 90 |     'userLocation',
 91 |   ],
 92 |   data () {
 93 |     return {
 94 |       isBooking: false,
 95 |       mapCenter: null,
 96 |       showFilters: false,
 97 |       shopTypeTerms: [ 'food_and_drink_stores', 'medical' ],
 98 |       shopTypes: {
 99 |         food_and_drink_stores: 'Food Stores',
100 |         medical: 'Pharmacies',
101 |       },
102 |       // itemTerms: [],
103 |       // items: [
104 |       //     'Fruit', 'Vegetables', 'Rice', 'Pasta', 'Bread', 'Flour', 'Yeast',
105 |       //     'Toilet Paper', 'Hand Sanitiser', 'Cleaning Products',
106 |       // ],
107 |     }
108 |   },
109 |   computed: {
110 |     filteredShops () {
111 |       return Object.values(this.shops)
112 |         .filter((shop) => this.shopTypeTerms.includes(shop.properties.class))
113 |     },
114 |     sortedShops () {
115 |       return this.sortedShopsBy(this.mapCenter || this.userLocation)
116 |     }
117 |   },
118 |   methods: {
119 |     changeCenter (center) {
120 |       this.mapCenter = center
121 |       this.$emit('changeCenter', center)
122 |     },
123 |     sortedShopsBy (center = []) {
124 |       const distanceFromCenter = (coords) => distance(coords, center)
125 |       return this.filteredShops
126 |         .map((shop) => ({ ...shop, distance: distanceFromCenter(shop.geometry.coordinates) }))
127 |         .sort((a, b) => a.distance - b.distance)
128 |     },
129 |   },
130 | }
131 | </script>
132 | 
133 | <style lang="postcss" scoped>
134 |   header,
135 |   .max-h-screen {
136 |     top: 56px;
137 |     @screen md { top: 64px; }
138 |   }
139 | 
140 |   .max-h-screen {
141 |     max-height: calc(100vh - 56px);
142 |     @screen md { height: calc(100vh - 64px); }
143 |   }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/src/components/ShopsBookTime.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <portal to="modal" v-if="open" v-scroll-lock="open">
  3 |     <BaseModal @close="$emit('close')" @prev="$emit('prev')" @next="$emit('next')">
  4 |       <BaseCard class="w-full max-w-3xl overflow-y-auto rounded-lg">
  5 |         <template slot="title">{{ open.properties && open.properties.name || `Save your Timeslot` }}</template>
  6 |         <template slot="description">Shop safer by letting everyone know when you're planning to go.</template>
  7 | 
  8 |         <VueMeetingSelector
  9 |           class="py-12"
 10 |           ref="meetingSelector"
 11 |           v-model="meeting"
 12 |           :date="date"
 13 |           :meetings-days="meetingsDays"
 14 |           :calendar-options="{ limit }"
 15 |           :loading="loading"
 16 |         >
 17 |           <!-- <template #header="{ meetings }">
 18 |             <div class="title">{{ formatingDateTitle(meetings.date) }}</div>
 19 |           </template>
 20 |           <template #meeting="{ meeting }">
 21 |             <div
 22 |               v-if="meeting.date"
 23 |               class="meeting"
 24 |               :class="meetingSelectedClass(meeting)"
 25 |               @click="selectMeeting(meeting)">
 26 |               {{ formatingTime(meeting.date) }}
 27 |             </div>
 28 |             <div v-else class="meeting--empty">
 29 |               &mdash;
 30 |             </div>
 31 |           </template>
 32 | 
 33 |           <template #loading>
 34 |             <div>Loading…</div>
 35 |           </template> -->
 36 | 
 37 |           <template #button-previous>
 38 |             <button @click="prevDate" :class="[(isPrevDisabled || loading) && 'opacity-50 cursor-not-allowed']" :disabled="isPrevDisabled || loading">
 39 |               <ChevronLeftIcon class="bg-gray-50 w-7 h-7 text-gray-400 border-2 border-gray-100 rounded" />
 40 |             </button>
 41 |           </template>
 42 |           <template #button-next>
 43 |             <button @click="nextDate" :class="[(isNextDisabled || loading) && 'opacity-50 cursor-not-allowed']" :disabled="isNextDisabled || loading">
 44 |               <ChevronRightIcon class="bg-gray-50 w-7 h-7 text-gray-400 border-2 border-gray-100 rounded" />
 45 |             </button>
 46 |           </template>
 47 | 
 48 |           <template #button-up="{ isDisabled }">
 49 |             <button @click="up" :class="[isDisabled && 'opacity-50 cursor-not-allowed']" :disabled="isDisabled">
 50 |               <ChevronUpIcon class="bg-gray-50 w-7 h-7 text-gray-400 border-2 border-gray-100 rounded" />
 51 |             </button>
 52 |           </template>
 53 |           <template #button-down="{ isDisabled }">
 54 |             <button @click="down" :class="[isDisabled && 'opacity-50 cursor-not-allowed']" :disabled="isDisabled">
 55 |               <ChevronDownIcon class="bg-gray-50 w-7 h-7 text-gray-400 border-2 border-gray-100 rounded" />
 56 |             </button>
 57 |           </template>
 58 | 
 59 |         </VueMeetingSelector>
 60 | 
 61 |         <footer class="owl:ml-4 sticky bottom-0 flex justify-center p-4 -mx-4 -mb-8 bg-white border-t border-gray-200">
 62 |           <BaseButton @click.native="$emit('close')" size="md" variant="secondary">Cancel</BaseButton>
 63 |           <BaseButton @click.native.prevent="bookTimeSlot" size="md" variant="primary" :isDisabled="!meeting">Book your Timeslot</BaseButton>
 64 |         </footer>
 65 | 
 66 |       </BaseCard>
 67 |     </BaseModal>
 68 |   </portal>
 69 | </template>
 70 | 
 71 | <script>
 72 | import VueMeetingSelector from 'vue-meeting-selector'
 73 | import { ChevronUpIcon, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon } from 'vue-feather-icons'
 74 | 
 75 | import { alert } from '~/mixins/Alert'
 76 | 
 77 | export default {
 78 |   name: 'ShopsBookTime',
 79 |   mixins: [alert],
 80 |   components: {
 81 |     ChevronUpIcon, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon,
 82 |     BaseButton: () => import('~/components/base/BaseButton'),
 83 |     BaseCard: () => import('~/components/base/BaseCard'),
 84 |     BaseModal: () => import('~/components/base/BaseModal'),
 85 |     VueMeetingSelector,
 86 |   },
 87 |   props: {
 88 |     open: {
 89 |       type: [Boolean, Object],
 90 |       required: true,
 91 |     },
 92 |   },
 93 |   data () {
 94 |     return {
 95 |       date: new Date(),
 96 |       meeting: null,
 97 |       meetingsDays: [],
 98 |       loading: true,
 99 | 
100 |       limit: 12,
101 |       daysPerPage: 4,
102 |     }
103 |   },
104 |   computed: {
105 |     isPrevDisabled () {
106 |       const date = new Date(this.date)
107 |       date.setDate(date.getDate() - 1)
108 |       return this.formatingDate(date) < this.formatingDate(new Date())
109 |     },
110 |     isNextDisabled () {
111 |       const date = new Date()
112 |       date.setDate(date.getDate() + this.daysPerPage * 2)
113 |       return this.formatingDate(date) < this.formatingDate(new Date(this.date))
114 |     },
115 |   },
116 |   methods: {
117 |     up () {
118 |       this.$refs.meetingSelector.previousMeetings()
119 |     },
120 |     down () {
121 |       this.$refs.meetingSelector.nextMeetings()
122 |     },
123 |     formatingDate(dateToFormat) {
124 |       const d = new Date(dateToFormat);
125 |       const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
126 |       const month = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
127 |       const year = d.getFullYear();
128 |       return `${year}-${month}-${day}`;
129 |     },
130 | 
131 |     offsetDate (offset = 0) {
132 |       const date = new Date(this.date)
133 |       date.setDate(date.getDate() + offset)
134 |       this.date = date
135 |       return date
136 |     },
137 | 
138 |     getMeetings (date = undefined) {
139 |       return [...Array(this.daysPerPage).keys()].map((offset) => {
140 |         const date = new Date().setDate(this.date.getDate() + offset)
141 |         const slots = [...Array(this.limit * 1).keys()].map((hourOffset) => {
142 |           return { date: new Date(date).setHours(hourOffset + 9, 0) }
143 |         })
144 | 
145 |         return { date, slots }
146 |       })
147 |     },
148 |     nextDate () {
149 |       this.fetchMeetingDays(+this.daysPerPage)
150 |     },
151 |     prevDate () {
152 |       this.fetchMeetingDays(-this.daysPerPage)
153 |     },
154 | 
155 |     async fetchMeetingDays (offset = 0) {
156 |       this.loading = true
157 |       this.meetingsDays = await this.getMeetings(this.offsetDate(offset))
158 |       this.loading = false
159 |     },
160 | 
161 |     bookTimeSlot () {
162 |       const date = new Date(this.meeting.date)
163 |       this.alert(...(this.meeting
164 |         ? ['ok', `${date.toDateString()} @ ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`]
165 |         : ['no', 'Please pick a timeslot']
166 |       ))
167 |       this.$emit('close')
168 |     },
169 |   },
170 |   mounted () {
171 |     this.fetchMeetingDays()
172 |   },
173 | }
174 | </script>
175 | 
176 | <style lang="postcss" scoped>
177 | >>> .tab {
178 |     @apply flex flex-col !important;
179 |     @screen md { @apply flex-row !important; }
180 | 
181 |     & > * + * {
182 |       @apply mt-6 !important;
183 |       @screen md { @apply mt-0 ml-6 !important; }
184 |     }
185 |   }
186 | 
187 | >>> .tab__pagination { @apply flex flex-col !important; }
188 | >>> .tab__pagination > *:nth-child(1) { @apply mb-auto !important; }
189 | >>> .tab__pagination > * + * { @apply mt-2 !important; }
190 | 
191 | >>> .tab__days { @apply flex flex-col p-0 !important; }
192 | >>> .tab__day { @apply flex flex-none flex-row border-b-0 !important; }
193 | >>> .tab__day + .tab__day { @apply mt-6 !important; }
194 | >>> .tab__day > * + * { @apply ml-6 !important; }
195 | >>> .tab__days__day-display { @apply w-1/4 text-left !important; }
196 | >>> .tab__days__meetings {
197 |     @apply grid grid-cols-3 w-3/4 gap-1.5 !important;
198 |     @screen md { @apply grid-cols-6 !important; }
199 |   }
200 | >>> .tab__days__meetings .meeting { @apply w-full !important; }
201 | >>> .tab__days__meetings .meeting__button {
202 |     @apply flex justify-center w-full m-0 py-1 px-3 bg-gray-50-25 border border-solid border-gray-200 font-normal text-center rounded;
203 |     &:matches(.meeting__button--selected) { @apply bg-blue-50-50 border-blue-200 !important; }
204 |     &:matches(:hover, :focus) { @apply bg-blue-50-25 border-blue-100; }
205 | }
206 | </style>
207 | 


--------------------------------------------------------------------------------
/src/components/ShopsMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ClientOnly>
 3 |     <MapboxMap
 4 |       class="w-full h-full"
 5 |       :accessToken="token"
 6 |       :mapStyle="style"
 7 |       :zoom="17"
 8 |       :pitch="0"
 9 |       :center="center"
10 |       @mb-created="handleInstance"
11 |       @mb-moveend="handleMoving"
12 |     >
13 |       <MapboxNavigationControl />
14 | 
15 |       <MapboxMarker v-for="{ id, geometry, properties } in shops" :key="id" :lngLat="geometry.coordinates" popup>
16 |         <template slot="popup"><pre>{{ { id, geometry, properties } }}</pre></template>
17 |         <LocationPin :class="[
18 |           'block',
19 |           properties.class === 'food_and_drink_stores' ? 'text-blue-600'
20 |           : properties.class === 'medical' ? 'text-green-600'
21 |           : 'text-gray-600',
22 |         ]" />
23 |       </MapboxMarker>
24 | 
25 |     </MapboxMap>
26 |   </ClientOnly>
27 | </template>
28 | 
29 | <script>
30 | // TODO: Remove `electron` from dependencies (bug @ `@studiometa/vue-mapbox-gl`)
31 | import 'mapbox-gl/dist/mapbox-gl.css'
32 | import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
33 | 
34 | import LocationPin from '~/components/icon/LocationPin'
35 | 
36 | export default {
37 |   name: 'ShopsMap',
38 |   components: {
39 |     LocationPin,
40 |     ...Object.fromEntries(['MapboxMap', 'MapboxMarker', 'MapboxNavigationControl', 'MapboxLayer']
41 |       .map((entry) => [entry, () => import ('@studiometa/vue-mapbox-gl').then(m => m[entry]).catch()])),
42 |   },
43 |   props: {
44 |     shops: {
45 |       type: [Array, Object],
46 |       required: false,
47 |     },
48 |     center: {
49 |       type: Array,
50 |       required: false,
51 |       default: () => [ 0, 0 ],
52 |     },
53 |   },
54 |   data () {
55 |     return {
56 |       map: null,
57 |       token: process.env.GRIDSOME_MAPBOX_TOKEN,
58 |       style: 'mapbox://styles/hacknug/ck8lvwnj912cf1ilbq2wt1sz6',
59 |     }
60 |   },
61 |   methods: {
62 |     flyTo (center) {
63 |       this.map && this.map.flyTo({ center })
64 |     },
65 | 
66 |     handleInstance (mapboxInstance) {
67 |       this.map = mapboxInstance
68 |     },
69 |     handleMoving () {
70 |       const center = this.map.getCenter()
71 |       this.$emit('move', [center.lng, center.lat])
72 |     },
73 |   },
74 | }
75 | </script>
76 | 
77 | <style lang="postcss">
78 |   .mapboxgl-ctrl-attrib-inner,
79 |   .mapboxgl-ctrl-logo { @apply hidden !important; }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/components/UserAuthForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <BaseForm @submit.native.prevent="$emit($options.filters.camel(event), userDetails)" class="relative">
  3 | 
  4 |     <BaseFormFieldset>
  5 | 
  6 |       <BaseFormControl class="w-full" label="Email">
  7 |         <BaseInput ref="email" v-model="userDetails.email" type="email" autocomplete="email" :isDisabled="!!user" />
  8 |       </BaseFormControl>
  9 | 
 10 |       <BaseFormControl tag="div" class="w-full" label="Password">
 11 |         <BaseInput v-model="userDetails.password" type="password" :autocomplete="event === 'Sign Up' ? 'new-password' : 'current-password'" />
 12 |         <BaseInput v-if="event === 'Sign Up'" v-model="userDetails.passwordConfirm" type="password" autocomplete="new-password" placeholder="Confirm Your Password" />
 13 |       </BaseFormControl>
 14 | 
 15 |       <div class="flex items-center justify-between mt-6">
 16 |         <div class="flex items-center">
 17 |           <input id="remember_me" type="checkbox" class="form-checkbox w-4 h-4 text-blue-600 transition duration-150 ease-in-out" checked />
 18 |           <label for="remember_me" class="block ml-2 text-sm leading-5 text-gray-900">Remember me</label>
 19 |         </div>
 20 | 
 21 |         <div v-if="event === 'Sign In'" class="text-sm leading-5">
 22 |           <button class="hover:text-blue-500 focus:outline-none focus:underline font-medium text-blue-600 transition duration-150 ease-in-out" type="button" @click="$emit('resetPassword', userDetails)">Forgot your password?</button>
 23 |         </div>
 24 |       </div>
 25 | 
 26 |     </BaseFormFieldset>
 27 | 
 28 |     <template slot="submit">
 29 |       <BaseButton class="w-full" type="submit">Submit</BaseButton>
 30 | 
 31 |       <div class="relative">
 32 |         <div class="absolute inset-0 flex items-center">
 33 |           <div class="w-full border-t border-gray-300"></div>
 34 |         </div>
 35 |         <div class="relative flex justify-center text-sm leading-5">
 36 |           <span class="px-2 text-gray-500 bg-white">
 37 |             Or continue with
 38 |           </span>
 39 |         </div>
 40 |       </div>
 41 | 
 42 |       <div class="grid grid-cols-3 gap-3 mt-6 opacity-50 cursor-not-allowed">
 43 |         <div>
 44 |           <span class="inline-flex w-full rounded-md shadow-sm">
 45 |             <button type="button" class="hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md" :class="`pointer-events-none`" disabled>
 46 |               <svg class="h-5" fill="currentColor" viewBox="0 0 20 20">
 47 |                 <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"/>
 48 |               </svg>
 49 |             </button>
 50 |           </span>
 51 |         </div>
 52 | 
 53 |         <div>
 54 |           <span class="inline-flex w-full rounded-md shadow-sm">
 55 |             <button type="button" class="hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md" :class="`pointer-events-none`" disabled>
 56 |               <svg class="h-5" fill="currentColor" viewBox="0 0 20 20">
 57 |                 <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
 58 |               </svg>
 59 |             </button>
 60 |           </span>
 61 |         </div>
 62 | 
 63 |         <div>
 64 |           <span class="inline-flex w-full rounded-md shadow-sm">
 65 |             <button type="button" class="hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md" :class="`pointer-events-none`" disabled>
 66 |               <svg class="h-5" fill="currentColor" viewBox="0 0 20 20">
 67 |                 <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
 68 |               </svg>
 69 |             </button>
 70 |           </span>
 71 |         </div>
 72 |       </div>
 73 | 
 74 |     </template>
 75 | 
 76 |   </BaseForm>
 77 | </template>
 78 | 
 79 | <script>
 80 | import BaseForm from '~/components/base/BaseForm'
 81 | import BaseFormFieldset from '~/components/base/BaseFormFieldset'
 82 | import BaseFormControl from '~/components/base/BaseFormControl'
 83 | import BaseInput from '~/components/base/BaseInput'
 84 | import BaseButton from '~/components/base/BaseButton'
 85 | 
 86 | export default {
 87 |   name: 'UserAuthForm',
 88 |   components: {
 89 |     BaseForm,
 90 |     BaseFormFieldset,
 91 |     BaseFormControl,
 92 |     BaseInput,
 93 |     BaseButton,
 94 |   },
 95 |   props: {
 96 |     user: {
 97 |       validator: (prop) => typeof prop === 'object' || prop === null,
 98 |       required: true,
 99 |     },
100 |     event: {
101 |       type: String,
102 |       required: true,
103 |     },
104 |   },
105 |   data () {
106 |     return {
107 |       userDetails: {
108 |         email: this.user?.email,
109 |         password: null,
110 |         passwordConfirm: null,
111 |       },
112 |     }
113 |   },
114 |   computed: {
115 |     changeForm () {
116 |       return this.event === 'Sign In' ? {
117 |         title: 'Sign Up',
118 |         description: 'Don\'t have an account yet?',
119 |       } : {
120 |         title: 'Sign In',
121 |         description: 'Already have an account?',
122 |       }
123 |     },
124 |   },
125 |   mounted () {
126 |     this.$nextTick(() => {
127 |       this.$refs.email.$el.focus()
128 |     })
129 |   },
130 | }
131 | </script>
132 | 


--------------------------------------------------------------------------------
/src/components/UserAuthModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <portal to="modal" v-if="isVisible" v-scroll-lock="isVisible">
  3 |     <BaseModal @close="$emit('close')" @prev="$emit('prev')" @next="$emit('next')">
  4 |       <BaseCard class="w-full" :class="[isAuthForm ? 'max-w-md' : 'max-w-xl']">
  5 | 
  6 |         <template slot="title">{{ formTitle }}</template>
  7 |         <template slot="description">
  8 |           {{ formDescription }}
  9 |           <button
 10 |             v-if="isAuthForm"
 11 |             type="button"
 12 |             class="hover:text-blue-500 focus:outline-none focus:underline font-medium text-blue-600 transition duration-150 ease-in-out"
 13 |             @click="$emit('changeForm', changeForm)"
 14 |             >{{ changeForm.title }}</button>
 15 |         </template>
 16 | 
 17 |         <UserAuthForm
 18 |           v-if="isAuthForm"
 19 | 
 20 |           :user="user"
 21 |           :event="form"
 22 |           @changeForm="$emit('changeForm', $event)"
 23 |           @signUp="signUpWithEmail($event)"
 24 |           @signIn="signInWithEmail($event)"
 25 |           @signOut="signOut"
 26 |           @resetPassword="resetPassword($event)"
 27 |           @deleteAccount="deleteAccount($event)"
 28 |         />
 29 | 
 30 |         <div v-else>
 31 |           <div class="lg:max-w-none grid max-w-xl gap-5 mx-auto mt-12">
 32 |             <ShopCard v-for="node in userFavourites" :key="node.id" :id="String(node.id)" :shop="node" />
 33 |           </div>
 34 |         </div>
 35 | 
 36 |       </BaseCard>
 37 |     </BaseModal>
 38 |   </portal>
 39 | </template>
 40 | 
 41 | <script>
 42 | import { mapState, mapGetters, mapActions } from 'vuex'
 43 | 
 44 | import { alert } from '~/mixins/Alert'
 45 | 
 46 | import BaseCard from '~/components/base/BaseCard'
 47 | import BaseModal from '~/components/base/BaseModal'
 48 | import UserAuthForm from '~/components/UserAuthForm'
 49 | import ShopCard from '~/components/ShopCard'
 50 | 
 51 | export default {
 52 |   name: 'UserAuthModal',
 53 |   mixins: [alert],
 54 |   components: { BaseCard, BaseModal, UserAuthForm, ShopCard },
 55 |   props: {
 56 |     form: {
 57 |       type: String,
 58 |       required: false,
 59 |       default: 'Sign In',
 60 |     },
 61 |     isVisible: {
 62 |       type: Boolean,
 63 |       required: true,
 64 |     },
 65 |   },
 66 |   computed: {
 67 |     ...mapState(['user']),
 68 |     ...mapGetters(['userFavourites']),
 69 | 
 70 |     isAuthForm () {
 71 |       return this.form.includes('Sign')
 72 |     },
 73 | 
 74 |     formTitle () {
 75 |       return {
 76 |         'Sign In': 'Sign in to your account',
 77 |         'Sign Up': 'Sign up for an account',
 78 |         'Favourites': 'Your Favourites',
 79 |         'Settings': 'Sign up for an account',
 80 |       }[this.form] || this.form
 81 |     },
 82 |     formDescription () {
 83 |       return {
 84 |         'Favourites': 'Manage and browse your favourite shops',
 85 |         'Settings': 'Sign up for an account',
 86 |       }[this.form] || this.changeForm.description
 87 |     },
 88 | 
 89 |     changeForm () {
 90 |       return this.form === 'Sign In' ? {
 91 |         title: 'Sign Up',
 92 |         description: 'Don\'t have an account yet?',
 93 |       } : {
 94 |         title: 'Sign In',
 95 |         description: 'Already have an account?',
 96 |       }
 97 |     },
 98 |   },
 99 |   methods: {
100 |     ...mapActions(['SIGN_UP', 'SIGN_IN', 'RESET_PASSWORD', 'DELETE_ACCOUNT']),
101 | 
102 |     deleteAccount ({ email, password }) {
103 |       if (email && password) {
104 |         this.SIGN_IN({ email, password })
105 |           .then(() => this.DELETE_ACCOUNT())
106 |           .then(() => this.$router.push('/'))
107 |           .then(() => this.toggleForm())
108 |           .then(() => this.alert('yo', 'Account deleted'))
109 |           .catch((error) => this.handleError(error))
110 |       } else {
111 |         this.alert('no', 'Please, enter your password')
112 |       }
113 |     },
114 |     resetPassword ({ email }) {
115 |       this.RESET_PASSWORD(email)
116 |         .then(() => this.toggleForm(true))
117 |         .then(() => this.alert('yo', 'Check your email'))
118 |         .catch((error) => this.handleError(error))
119 |     },
120 |     signInWithEmail ({ email, password }) {
121 |       this.SIGN_IN({ email, password })
122 |         .then(() => this.toggleForm())
123 |         .then(() => this.alert('ok', 'Welcome back'))
124 |         .then(() => this.$emit('close'))
125 |         .catch((error) => this.handleError(error))
126 |     },
127 |     signUpWithEmail ({ email, password, passwordConfirm }) {
128 |       // TODO: Validate `email` and `password`
129 |       if (password && passwordConfirm) {
130 |         if (password === passwordConfirm) {
131 |           this.SIGN_UP({ email, password })
132 |             .then(() => this.toggleForm())
133 |             .then(() => this.alert('ok', 'Welcome'))
134 |             .catch((error) => this.handleError(error))
135 |         } else {
136 |           this.alert('no', 'Passwords don\'t match, sorry')
137 |         }
138 |       } else {
139 |         this.alert('no', 'Please, confirm your password')
140 |       }
141 |     },
142 |     signOut () {
143 |       this.SIGN_OUT()
144 |         .then(() => this.alert('yo', 'See you soon'))
145 |         .catch((error) => this.handleError(error))
146 |     },
147 | 
148 |     handleError (error) {
149 |       this.alert('no', error.message)
150 |     },
151 |     toggleForm (show = false) {
152 |       !show && this.$emit('close')
153 |     },
154 |   },
155 | }
156 | </script>
157 | 


--------------------------------------------------------------------------------
/src/components/base/BaseButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span
 3 |     class="focus:outline-none inline-flex rounded-md shadow-sm"
 4 |     :class="[(isLoading || isDisabled) && 'opacity-50']"
 5 |   >
 6 |     <button
 7 |       :type="type"
 8 |       :disabled="isDisabled"
 9 |       :class="[
10 |         'group',
11 |         'inline-flex justify-center items-center w-full font-medium border',
12 |         'transition ease-in-out duration-150',
13 |         'focus:outline-none focus:shadow-outline-blue',
14 |         size === 'xs' && 'px-2.5 py-1.5 text-xs leading-4 rounded',
15 |         size === 'sm' && 'px-3 py-2 text-sm leading-4 rounded-md',
16 |         size === 'md' && 'px-4 py-2 text-sm leading-5 rounded-md',
17 |         size === 'lg' && 'px-4 py-2 text-base leading-6 rounded-md',
18 |         size === 'xl' && 'px-6 py-3 text-base leading-6 rounded-md',
19 |         variant === 'primary' && 'text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 border-transparent focus:border-blue-700',
20 |         variant === 'secondary' && 'text-gray-700 hover:text-gray-500 active:text-gray-800 bg-white active:bg-gray-50 border-gray-300 focus:border-blue-300',
21 |         (isLoading || isDisabled) && 'cursor-not-allowed',
22 |       ]"
23 |     >
24 |       <span v-if="$slots.icon" class="flex items-center mr-2.5 -ml-0.5">
25 |         <slot name="icon" />
26 |       </span>
27 | 
28 |       <slot />
29 | 
30 |     </button>
31 | 
32 |   </span>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   name: 'BaseButton',
38 |   props: {
39 |     variant: {
40 |       type: String,
41 |       required: false,
42 |       default: 'primary',
43 |     },
44 |     size: {
45 |       type: String,
46 |       required: false,
47 |       default: 'md',
48 |     },
49 |     type: {
50 |       type: String,
51 |       required: false,
52 |       default: 'button',
53 |     },
54 |     isDisabled: {
55 |       type: Boolean,
56 |       required: false,
57 |       default: false,
58 |     },
59 |     isLoading: {
60 |       type: Boolean,
61 |       required: false,
62 |       default: false,
63 |     },
64 |   },
65 | }
66 | </script>
67 | 


--------------------------------------------------------------------------------
/src/components/base/BaseCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sm:mx-auto sm:w-full">
 3 |     <div class="sm:px-10 owl:mt-8 px-4 py-8 bg-white rounded-lg shadow">
 4 | 
 5 |       <header v-if="$slots.title || $slots.description" class="sm:mx-auto sm:w-full sm:max-w-md">
 6 |         <!-- <svg class="w-auto h-16 mx-auto mb-6 text-blue-600" fill="currentColor" viewBox="0 0 35 32" aria-hidden="true">
 7 |           <path d="M15.258 26.865a4.043 4.043 0 01-1.133 2.917A4.006 4.006 0 0111.253 31a3.992 3.992 0 01-2.872-1.218 4.028 4.028 0 01-1.133-2.917c.009-.698.2-1.382.557-1.981.356-.6.863-1.094 1.47-1.433-.024.109.09-.055 0 0l1.86-1.652a8.495 8.495 0 002.304-5.793c0-2.926-1.711-5.901-4.17-7.457.094.055-.036-.094 0 0A3.952 3.952 0 017.8 7.116a3.975 3.975 0 01-.557-1.98 4.042 4.042 0 011.133-2.918A4.006 4.006 0 0111.247 1a3.99 3.99 0 012.872 1.218 4.025 4.025 0 011.133 2.917 8.521 8.521 0 002.347 5.832l.817.8c.326.285.668.551 1.024.798.621.33 1.142.826 1.504 1.431a3.902 3.902 0 01-1.504 5.442c.033-.067-.063.036 0 0a8.968 8.968 0 00-3.024 3.183 9.016 9.016 0 00-1.158 4.244zM19.741 5.123c0 .796.235 1.575.676 2.237a4.01 4.01 0 001.798 1.482 3.99 3.99 0 004.366-.873 4.042 4.042 0 00.869-4.386 4.02 4.02 0 00-1.476-1.806 3.994 3.994 0 00-5.058.501 4.038 4.038 0 00-1.175 2.845zM23.748 22.84c-.792 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.806 4.042 4.042 0 00.869 4.387 3.99 3.99 0 004.366.873A4.01 4.01 0 0027.08 29.1a4.039 4.039 0 00-.5-5.082 4 4 0 00-2.832-1.18zM34 15.994c0-.796-.235-1.574-.675-2.236a4.01 4.01 0 00-1.798-1.483 3.99 3.99 0 00-4.367.873 4.042 4.042 0 00-.869 4.387 4.02 4.02 0 001.476 1.806 3.993 3.993 0 002.226.678 4.003 4.003 0 002.832-1.18A4.04 4.04 0 0034 15.993z"/>
 8 |           <path d="M5.007 11.969c-.793 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.807 4.042 4.042 0 00.869 4.386 4.001 4.001 0 004.366.873 4.011 4.011 0 001.798-1.483 4.038 4.038 0 00-.5-5.08 4.004 4.004 0 00-2.831-1.181z"/>
 9 |         </svg> -->
10 |         <h2 v-if="$slots.title" class="text-3xl font-extrabold leading-9 text-center text-gray-900"><slot name="title" /></h2>
11 |         <p v-if="$slots.description" class="max-w mt-2 text-sm leading-5 text-center text-gray-600"><slot name="description" /></p>
12 |       </header>
13 | 
14 |       <slot />
15 | 
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'BaseCard',
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/components/base/BaseContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sm:px-6 lg:px-8 lg:max-w-screen-xl relative max-w-xl px-4 mx-auto">
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'BaseContainer',
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/components/base/BaseForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form class="owl:mt-8 w-full max-w-md">
 3 | 
 4 |     <slot />
 5 | 
 6 |     <div v-if="$slots.submit" class="owl:mt-6">
 7 |       <slot name="submit" />
 8 |     </div>
 9 | 
10 |   </form>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'BaseForm',
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/components/base/BaseFormControl.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <label class="owl:mt-1">
 3 |     <span class="block text-sm font-medium leading-5 text-gray-700">{{ label }}</span>
 4 |     <slot />
 5 |   </label>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'BaseFormControl',
11 |   props: {
12 |     label: {
13 |       type: String,
14 |       required: true,
15 |     },
16 |   },
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/base/BaseFormFieldset.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <fieldset>
 3 |     <div class="owl:mt-6 flex flex-col">
 4 |       <slot />
 5 |       <span v-if="description" class="text-sm">{{ description }}</span>
 6 |     </div>
 7 |   </fieldset>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'BaseFormFieldset',
13 |   props: {
14 |     description: {
15 |       type: String,
16 |       required: false,
17 |     },
18 |   },
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/base/BaseInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative rounded-md shadow-sm">
  3 | 
  4 |     <div v-if="$slots.icon" :class="className.position" class="left-0">
  5 |       <span :class="className.size"><slot name="icon" /></span>
  6 |     </div>
  7 | 
  8 |     <input
  9 |       ref="input"
 10 |       v-bind="inputProps"
 11 |       @input="$emit('input', $event.target[eventProp])"
 12 |       @focus="$emit('focus', $refs.input)"
 13 |     />
 14 | 
 15 |     <div v-if="type === 'search' && value" :class="className.position" class="right-0">
 16 |       <button @click="clear" :class="className.size" class="hover:text-gray-700 focus:outline-none focus:shadow-outline-blue flex items-center justify-center p-1 -m-1 text-xs leading-none text-gray-500 bg-gray-100 rounded-full pointer-events-auto">✕</button>
 17 |     </div>
 18 | 
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | export default {
 24 |   name: 'BaseInput',
 25 |   inheritAttrs: false,
 26 |   props: {
 27 |     value: {
 28 |       required: true,
 29 |     },
 30 |     type: {
 31 |       type: String,
 32 |       required: false,
 33 |       default: 'text',
 34 |     },
 35 |     placeholder: {
 36 |       type: String,
 37 |       required: false,
 38 |     },
 39 |     isDisabled: {
 40 |       type: Boolean,
 41 |       required: false,
 42 |       default: false,
 43 |     },
 44 |     size: {
 45 |       type: String,
 46 |       required: false,
 47 |       default: 'md',
 48 |     },
 49 |   },
 50 |   computed: {
 51 |     eventProp () {
 52 |       return this.type === 'checkbox' ? 'checked' : 'value'
 53 |     },
 54 |     inputProps () {
 55 |       return {
 56 |         ...this.$attrs,
 57 |         type: this.type,
 58 |         placeholder: this.placeholder || this.defaultPlaceholder,
 59 |         'aria-label': this.placeholder || this.defaultPlaceholder,
 60 |         ...(this.type === 'checkbox' ? { checked: this.value } : { value: this.value }),
 61 |         readonly: this.isDisabled,
 62 |         class: [
 63 |           // TODO: Use `form-input` utilities
 64 |           this.size === 'md' && 'px-3 py-2 text-sm leading-5',
 65 |           this.size === 'md' && this.$slots.icon && 'pl-10 pr-3',
 66 |           // this.size === 'md' && 'form-input sm:leading-5',
 67 |           this.size === 'xl' && 'px-5 py-3 text-base leading-6',
 68 |           this.size === 'xl' && this.$slots.icon && 'pl-14 pr-5',
 69 | 
 70 |           'block w-full text-gray-900 bg-white placeholder-gray-500 focus:placeholder-gray-400',
 71 |           'border border-gray-300 focus:border-blue-300 rounded-inherit',
 72 |           'focus:outline-none focus:shadow-outline-blue transition duration-150 ease-in-out appearance-none',
 73 | 
 74 |           // this.type === 'checkbox' ? 'form-checkbox w-11 h-11' : 'form-input max-w-full',
 75 |           this.isDisabled && 'cursor-not-allowed opacity-50',
 76 |         ],
 77 |       }
 78 |     },
 79 | 
 80 |     className () {
 81 |       return {
 82 |         size: [
 83 |           this.size === 'md' && 'w-5 h-5',
 84 |           this.size === 'xl' && 'w-6 h-6',
 85 |         ],
 86 |         position: [
 87 |           this.size === 'md' && this.$slots.icon && 'px-3',
 88 |           this.size === 'xl' && this.$slots.icon && 'px-5',
 89 |           'absolute inset-y-0 pointer-events-none',
 90 |           'flex items-center text-gray-400',
 91 |           // 'border border-transparent',
 92 |         ],
 93 |       }
 94 |     },
 95 |     defaultPlaceholder () {
 96 |       return this.type === 'email' ? 'stay.safe@home.com'
 97 |         : this.type === 'password' ? 'Type Password' : false
 98 |     },
 99 |   },
100 |   methods: {
101 |     clear () {
102 |       this.$emit('input', '')
103 |       this.$emit('clear', '')
104 |       this.$nextTick(() => {
105 |         this.$refs.input.focus()
106 |       })
107 |     },
108 |   },
109 | }
110 | </script>
111 | 


--------------------------------------------------------------------------------
/src/components/base/BaseModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- <div x-data="{ open: true }" x-show="open" class="sm:inset-0 sm:p-0 sm:flex sm:items-center sm:justify-center fixed inset-x-0 bottom-0 px-4 pb-6">
 3 |     <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity">
 4 |       <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 5 |     </div>
 6 | 
 7 |     <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="sm:max-w-sm sm:w-full sm:p-6 px-4 pt-5 pb-4 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl">
 8 |       <div>
 9 |         <div class="flex items-center justify-center w-12 h-12 mx-auto bg-blue-100 rounded-full">
10 |           <svg class="w-6 h-6 text-blue-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
11 |             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
12 |           </svg>
13 |         </div>
14 |         <div class="sm:mt-5 mt-3 text-center">
15 |           <h3 class="text-lg font-medium leading-6 text-gray-900">
16 |             Payment successful
17 |           </h3>
18 |           <div class="mt-2">
19 |             <p class="text-sm leading-5 text-gray-500">
20 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
21 |             </p>
22 |           </div>
23 |         </div>
24 |       </div>
25 |       <div class="sm:mt-6 mt-5">
26 |         <span class="flex w-full rounded-md shadow-sm">
27 |           <button @click="open = false; setTimeout(() => open = true, 1000)" type="button" class="hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue sm:text-sm sm:leading-5 inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-blue-600 border border-transparent rounded-md shadow-sm">
28 |             Go back to dashboard
29 |           </button>
30 |         </span>
31 |       </div>
32 |     </div>
33 |   </div> -->
34 | 
35 |   <div
36 |     ref="modal"
37 |     tabindex="0"
38 |     class="sm:flex sm:items-center sm:justify-center fixed inset-0 bottom-0 z-50"
39 |     @keydown.esc="$emit('close')"
40 |   >
41 |     <transition v-bind="transitions.fade">
42 |       <div class="absolute inset-0 bg-gray-500 opacity-75" />
43 |     </transition>
44 | 
45 |     <button class="bg-black-75 backdrop-blur absolute inset-0 z-0 w-full h-full" @click="$emit('close')" aria-label="Close Modal" />
46 |     <div class="children:pointer-events-auto owl:mt-4 relative z-10 flex flex-col items-center w-full max-h-full px-4 py-16 m-auto pointer-events-none">
47 |       <slot />
48 |     </div>
49 | 
50 |   </div>
51 | </template>
52 | 
53 | <script>
54 | import { transitions } from '~/mixins/Transitions'
55 | 
56 | export default {
57 |   name: 'BaseModal',
58 |   mixins: [transitions],
59 |   mounted () {
60 |     this.$refs.modal?.focus()
61 |   },
62 | }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/src/components/base/BasePager.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sm:px-0 px-4 border-t border-gray-200">
 3 | 
 4 |     <div class="max-w-7xl flex items-center justify-between mx-auto">
 5 | 
 6 |       <div class="flex flex-1 w-0">
 7 |         <a :href="pageInfo.currentPage - 1" :class="[...className, 'pr-1']">
 8 |           <svg class="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
 9 |             <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"/>
10 |           </svg>
11 |           Previous
12 |         </a>
13 |       </div>
14 | 
15 |       <div class="md:flex hidden">
16 |         <Pager
17 |           :info="pageInfo"
18 |           :showLinks="true"
19 |           :showNavigation="false"
20 |           :linkClass="[...className, 'px-4'].join(' ')"
21 |         />
22 |       </div>
23 | 
24 |       <div class="flex justify-end flex-1 w-0">
25 |         <a :href="pageInfo.currentPage + 1" :class="[...className, 'pl-1']">
26 |           Next
27 |           <svg class="w-5 h-5 ml-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
28 |             <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
29 |           </svg>
30 |         </a>
31 |       </div>
32 | 
33 |     </div>
34 | 
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | import { Pager } from '@kriya/gridsome'
40 | 
41 | export default {
42 |   name: 'BasePager',
43 |   components: { Pager },
44 |   props: {
45 |     pageInfo: {
46 |       type: Object,
47 |       required: true,
48 |     },
49 |   },
50 |   computed: {
51 |     className () {
52 |       return [
53 |         'inline-flex items-center -mt-px pt-4',
54 |         'text-gray-500 hover:text-gray-700 focus:text-gray-700 text-sm leading-5 font-medium',
55 |         'border-t-2 border-transparent hover:border-gray-300 focus:border-gray-400',
56 |         'transition duration-150 ease-in-out',
57 |         'focus:outline-none',
58 |       ]
59 |     },
60 |   },
61 | }
62 | </script>
63 | 
64 | <style lang="postcss" scoped>
65 |   a.active--exact {
66 |     @apply text-blue-600 border-blue-500;
67 |     &:matches(:focus) { @apply outline-none text-blue-800 border-blue-700; }
68 |   }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/components/base/BaseSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <div class="owl:mt-16 container pt-24 pb-32">
 4 | 
 5 |       <BaseSectionHeader v-if="title" :title="title" />
 6 | 
 7 |       <slot />
 8 | 
 9 |       <footer v-if="$slots.footer" class="owl:ml-6 flex justify-center w-full max-w-2xl px-6 mx-auto">
10 |         <slot name="footer" />
11 |       </footer>
12 | 
13 |     </div>
14 |   </section>
15 | </template>
16 | 
17 | <script>
18 | import BaseSectionHeader from '~/components/base/BaseSectionHeader'
19 | 
20 | export default {
21 |   name: 'BaseSection',
22 |   components: { BaseSectionHeader },
23 |   props: {
24 |     title: {
25 |       type: String,
26 |       required: false,
27 |     },
28 |   },
29 | }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/components/base/BaseSectionHeader.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <header class="owl:mt-2">
 3 |     <h1 class="sm:text-3xl sm:leading-9 text-2xl font-extrabold leading-8 text-gray-900">{{ props.title }}</h1>
 4 |     <div v-if="slots.subtitle" class=""><slot name="subtitle" /></div>
 5 |   </header>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'BaseSectionHeader',
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/src/components/icon/LocationPin.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <svg :class="[data.class, data.staticClass]" height="41" width="27" viewBox="0 0 27 41">
 3 |     <g fill-rule="nonzero">
 4 |       <g transform="translate(3.0, 29.0)" fill="#000000">
 5 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse>
 6 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse>
 7 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="9.5" ry="4.77275007"></ellipse>
 8 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="8.5" ry="4.29549936"></ellipse>
 9 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="7.5" ry="3.81822308"></ellipse>
10 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="6.5" ry="3.34094679"></ellipse>
11 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="5.5" ry="2.86367051"></ellipse>
12 |         <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="4.5" ry="2.38636864"></ellipse>
13 |       </g>
14 |       <g fill="currentColor">
15 |         <path d="M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"></path>
16 |       </g>
17 |       <g opacity="0.25" fill="#000000">
18 |         <path d="M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"></path>
19 |       </g>
20 |       <g transform="translate(6.0, 7.0)" fill="#FFFFFF"></g>
21 |       <g transform="translate(8.0, 8.0)">
22 |         <circle fill="#000000" opacity="0.25" cx="5.5" cy="5.5" r="5.4999962"></circle>
23 |         <circle fill="#FFFFFF" cx="5.5" cy="5.5" r="5.4999962"></circle>
24 |       </g>
25 |     </g>
26 |   </svg>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   name: 'LocationPin',
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/components/icon/ShoppingCart.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <svg :class="[data.class, data.staticClass]" viewBox="0 0 528 447">
 3 |     <g fill="none" fill-rule="evenodd">
 4 |       <path fill="#CCD4E2" d="M244.81,446.323 C240.45,446.323 236.09,445.195 232.18,442.94 L73.303,351.21 L95.481,338.405 C102.666,337.744 111.186,336.843 120.675,335.76 C120.837,359.654 133.534,383.256 157.444,395.466 L159.085,396.305 C172.071,402.937 186.25,406.248 200.42,406.248 C215.02,406.248 229.62,402.73 242.9,395.705 L408,308.392 C419.27,302.431 423.12,289.365 418.91,278.752 L444.28,269.987 L451.17,213.817 L514.47,250.364 C531.47,260.181 531.47,284.725 514.47,294.542 L257.43,442.94 C253.53,445.195 249.17,446.323 244.81,446.323"/>
 5 |       <path fill="#2F2D78" d="M190.11,212.475 L189.13,212.475 C181.78,212.475 175.775,206.467 175.775,199.123 L175.775,19.703 C175.775,12.359 181.78,6.351 189.13,6.351 L190.11,6.351 C197.45,6.351 203.46,12.359 203.46,19.703 L203.46,199.123 C203.46,206.467 197.45,212.475 190.11,212.475"/>
 6 |       <path fill="#B97730" d="M35.498,166.258 C35.498,166.258 31.018,129.567 78.904,120.843 L85.262,159.242 L50.973,170.401 L35.498,166.258"/>
 7 |       <path fill="#2C4A8D" d="M35.241,184.437 L279.42,39.289 L461.45,129.879 L444.28,269.987 L340.08,305.984 C340.08,305.984 80.084,344.331 71.666,339.158 C63.247,333.985 35.241,184.437 35.241,184.437"/>
 8 |       <path fill="#2F2D78" d="M157.444 395.466C114.729 373.653 107.801 315.477 144.198 284.242L156.511 276.446 293.6 194.666 410.7 268.32C424.97 278.526 423.52 300.188 408 308.392L242.9 395.705C216.73 409.547 185.45 409.771 159.085 396.305L157.444 395.466M284.66 36.157L77.473 148.51C76.186 149.208 74.929 149.991 73.714 150.836L50.829 163.246C40.927 168.616 32.742 178.843 32.6370184 185.973 32.535 193.104 40.551 194.545 50.452 189.176L257.64 76.823C258.93 76.125 260.19 75.342 261.4 74.497L284.29 62.086C294.19 56.717 302.37 46.49 302.480925 39.36 302.58 32.229 294.56 30.787 284.66 36.157"/>
 9 |       <path fill="#2F2D78" d="M449.15,140.962 L303.45,60.111 C296.48,56.247 291.14,47.262 291.58,40.144 C292.01,33.026 298.06,30.363 305.03,34.226 L450.73,115.078 C457.7,118.942 463.04,127.927 462.6,135.045 C462.17,142.163 456.12,144.826 449.15,140.962"/>
10 |       <path fill="#2B4489" d="M332.07,218.861 L299.28,198.24 C303.67,197.62 308.38,197.284 313.27,197.284 C320.01,197.284 326.4,197.922 332.1,199.061 L332.07,218.861"/>
11 |       <path fill="#2A2C73" d="M313.27,233.783 C289.14,233.783 269.58,225.613 269.58,215.534 C269.58,207.498 282.01,200.676 299.28,198.24 L332.07,218.861 L332.04,232.018 C326.36,233.15 319.99,233.783 313.27,233.783"/>
12 |       <path fill="#CCE1EC" d="M323.22,64.316 L300.05,19.685 L273.27,19.685 C273.27,19.685 256.95,54.695 251.53,66.287 C250.88,67.456 250.3,68.675 249.82,69.938 C248.62,73.062 247.95,76.445 247.95,79.978 L247.95,216.429 C247.65,241.657 328,241.803 328,216.429 L328,79.978 C328,74.194 326.24,68.803 323.22,64.316"/>
13 |       <path fill="#E9F1F6" d="M313.61,53.785 C306.47,74.884 262.7,70.99 261.04,53.785 L250.32,73.548 C250.32,73.548 250.32,85.009 250.32,88.102 L250.32,207.592 C250.65,236.397 325.49,233.55 325.49,207.593 L323.71,72.798 L313.61,53.785"/>
14 |       <polyline fill="#3C5A99" points="304.89 19.686 269.56 19.685 269.56 8.163 304.89 8.163 304.89 19.686"/>
15 |       <path fill="#7B98C2" d="M328,181.336 C328,201.754 247.95,201.754 247.95,181.336 L247.95,98.46 C261.06,119.765 317.19,116.367 328,98.46 L328,181.336"/>
16 |       <path fill="#3C5A99" d="M304.89,18.976 C304.89,22.494 296.98,27.397 287.22,27.397 C277.47,27.397 269.56,22.494 269.56,18.976 C269.56,15.459 277.47,12.608 287.22,12.608 C296.98,12.608 304.89,15.459 304.89,18.976"/>
17 |       <path fill="#5B78AE" d="M304.89,8.163 C304.89,12.671 296.98,16.326 287.22,16.326 C277.47,16.326 269.56,12.671 269.56,8.163 C269.56,3.655 277.47,4.54747351e-13 287.22,4.54747351e-13 C296.98,4.54747351e-13 304.89,3.655 304.89,8.163"/>
18 |       <path fill="#FFFFFE" d="M313.27,55.977 C313.27,63.048 301.58,68.78 287.17,68.78 C272.75,68.78 261.06,63.048 261.06,55.977 C261.06,48.906 272.75,43.174 287.17,43.174 C301.58,43.174 313.27,48.906 313.27,55.977"/>
19 |       <path fill="#5875AC" d="M152.99,246.178 L193.51,193.061 L202.46,187.842 C205.66,185.97 208.27,180.928 208.25,176.639 L208.24,173.752 L239.44,132.858 L205.01,132.978 C204.18,132.85 203.22,133.055 202.21,133.647 L140.631,169.575 C137.422,171.448 134.813,176.49 134.831897,180.779 L135.01,219.375 C135.02,221.638 135.764,223.249 136.932,223.999 L152.99,246.178"/>
20 |       <path fill="#769DC6" d="M158.723,178.84 L236.06,133.716 C240.09,131.365 243.41,133.849 243.43,139.237 L243.650204,187.711 C243.68,193.098 240.4,199.43 236.37,201.782 L159.036,246.906 C155.005,249.256 151.688,246.773 151.664,241.385 L151.440858,192.91 C151.416,187.524 154.693,181.192 158.723,178.84"/>
21 |       <path fill="#A4BDD7" d="M161.881,179.874 L233.88,137.863 C237.64,135.673 240.72,137.986 240.75,143.002 L240.950219,188.134 C240.98,193.15 237.93,199.044 234.17,201.234 L162.172,243.246 C158.42,245.435 155.331,243.122 155.309,238.107 L155.101871,192.975 C155.079,187.959 158.129,182.064 161.881,179.874"/>
22 |       <path fill="#5F8BBB" d="M169.514,181.461 L204.61,160.981 C206.44,159.913 207.95,161.041 207.96,163.486 L208.06005,185.488 C208.07,187.933 206.59,190.807 204.76,191.874 L169.656,212.355 C167.827,213.422 166.321,212.294 166.31,209.849 L166.20795,187.848 C166.198,185.403 167.685,182.529 169.514,181.461"/>
23 |       <path fill="#6986B6" d="M153.572,246.806 L219.79,237.968 L228.76,232.79 C231.98,230.933 237.65,231.167 241.36,233.313 L243.86,234.755 L294.85,227.951 L277.67,257.784 C277.36,258.574 276.71,259.301 275.7,259.888 L213.96,295.533 C210.74,297.391 205.07,297.157 201.35,295.011 L167.925,275.713 C165.965,274.581 164.936,273.136 164.865,271.75 L153.572,246.806"/>
24 |       <path fill="#769DC6" d="M214.89,275.229 L292.43,230.46 C296.47,228.127 295.96,224.015 291.29,221.321 L249.31,197.083 C244.64,194.39 237.52,194.094 233.48,196.427 L155.938,241.196 C151.898,243.529 152.409,247.641 157.075,250.335 L199.06,274.573 C203.72,277.266 210.84,277.562 214.89,275.229"/>
25 |       <path fill="#A4BDD7" d="M215.55,271.973 L287.75,230.291 C291.51,228.119 291.03,224.29 286.69,221.782 L247.6,199.216 C243.26,196.708 236.63,196.434 232.87,198.606 L160.671,240.287 C156.91,242.459 157.386,246.288 161.73,248.796 L200.81,271.363 C205.16,273.87 211.79,274.145 215.55,271.973"/>
26 |       <path fill="#A4BDD7" d="M228.08,214.974 C226.75,227.097 207.62,227.738 200.88,220.126 C199.18,218.202 197.67,219.264 198.91,221.305 C204.98,231.273 211.79,237.218 220.01,235.548 L234.27,226.808 L228.08,214.974"/>
27 |       <path fill="#FFFFFE" d="M261.45 237.573C256.07 237.573 251.32 234.868 248.47 230.752 248.26 229.554 248.14 228.31 248.14 227.031 248.14 217.642 254.1 210.031 261.45 210.031 268.81 210.031 274.77 217.642 274.77 227.031 274.77 228.31 274.65 229.554 274.44 230.752 271.59 234.868 266.84 237.573 261.45 237.573M236.71 252.015C231.32 252.015 226.58 249.312 223.72 245.196 223.51 243.997 223.4 242.752 223.4 241.473 223.4 232.085 229.36 224.474 236.71 224.474 244.06 224.474 250.02 232.085 250.02 241.473 250.02 242.752 249.91 243.997 249.7 245.196 246.85 249.312 242.1 252.015 236.71 252.015M211.83 268.152C206.44 268.152 201.7 265.449 198.85 261.332 198.64 260.134 198.52 258.889 198.52 257.61 198.52 248.222 204.48 240.611 211.83 240.611 219.19 240.611 225.15 248.222 225.15 257.61 225.15 258.889 225.03 260.134 224.82 261.332 221.97 265.449 217.22 268.152 211.83 268.152M234.83 222.282C229.44 222.282 224.7 219.578 221.84 215.462 221.63 214.264 221.52 213.02 221.52 211.741 221.52 202.352 227.48 194.741 234.83 194.741 242.18 194.741 248.14 202.352 248.14 211.741 248.14 213.02 248.03 214.264 247.82 215.462 244.96 219.578 240.22 222.282 234.83 222.282M210.09 236.725C204.7 236.725 199.95 234.022 197.1 229.906 196.89 228.707 196.77 227.462 196.77 226.183 196.77 216.795 202.73 209.184 210.09 209.184 217.44 209.184 223.4 216.795 223.4 226.183 223.4 227.462 223.28 228.707 223.07 229.906 220.22 234.022 215.48 236.725 210.09 236.725M185.21 252.863C179.819 252.863 175.075 250.158 172.219 246.042 172.01 244.844 171.896 243.599 171.896 242.321 171.896 232.932 177.856 225.321 185.21 225.321 192.56 225.321 198.52 232.932 198.52 242.321 198.52 243.599 198.41 244.844 198.2 246.042 195.34 250.158 190.6 252.863 185.21 252.863"/>
28 |       <path fill="#2B4489" d="M415.77,273.211 C414.39,271.403 412.7,269.749 410.7,268.32 L401.26,262.386 L401.3,242.336 C413.37,245.429 421.8,252.208 422.17,260.433 C422.39,265.075 420,269.492 415.77,273.211"/>
29 |       <path fill="#2A2C73" d="M384.31,283.763 C384.49,282.926 384.48,282.244 384.28,281.79 C384.04,281.221 383.38,280.827 382.52,280.56 C393.16,277.659 401.25,271.608 401.26,262.4 L401.26,262.386 L410.7,268.32 C412.7,269.749 414.39,271.403 415.77,273.211 C409.15,279.033 398.01,283.144 385.23,283.727 C384.92,283.741 384.62,283.753 384.31,283.763 M373.74,283.25 C372.26,283.054 370.82,282.806 369.42,282.511 C370.96,282.448 372.49,282.331 374.01,282.161 C373.95,282.519 373.86,282.883 373.74,283.25"/>
30 |       <polyline fill="#E7952E" points="352.32 108.847 379.08 108.892 379.17 56.591 352.41 56.546 352.32 108.847"/>
31 |       <path fill="#253059" d="M351.21999,61.694 C351.2,72.339 379.93,72.387 379.95,61.741 L379.98,45.409 C371.92,50.291 362.81,46.946 351.25,44.858 L351.21999,61.694"/>
32 |       <path fill="#E7952E" d="M401.26,262.4 L401.52,106.556 C399.64,72.115 333.38,71.676 332.25,106.441 L331.989983,262.285 C331.95,289.249 401.22,289.366 401.26,262.4"/>
33 |       <path fill="#253059" d="M348.15,156.241 C348.22,146.006 356.42,137.575 366.66,137.474 C366.76,137.474 366.85,137.474 366.95,137.474 C367.05,137.474 367.14,137.474 367.23,137.476 C377.47,137.598 385.65,146.071 385.69,156.314 L385.95,237.769 C385.92,256.241 347.55,256.187 347.569992,237.714 L348.15,156.241"/>
34 |       <path fill="#5B78AE" d="M354.22,160.208 C354.26,153.516 359.35,147.743 366.03,147.328 C366.34,147.309 366.65,147.3 366.97,147.3 C367.28,147.3 367.59,147.311 367.9,147.33 C374.58,147.759 379.66,153.559 379.68,160.256 L379.84,228.363 C379.82,243.627 353.77,243.589 353.789988,228.325 L354.22,160.208"/>
35 |       <path fill="#344F90" d="M351.23,44.858 C351.23,48.036 357.67,50.613 365.6,50.613 C373.53,50.613 379.97,48.036 379.97,44.858 C379.97,41.679 373.53,39.103 365.6,39.103 C357.67,39.103 351.23,41.679 351.23,44.858"/>
36 |       <path fill="#3D5A99" d="M182.4,415.869 C182.4,415.869 199.43,428.811 221.56,417.356 C244.24,405.616 197.8,391.765 197.8,391.765 L182.4,415.869"/>
37 |       <polyline fill="#C97F30" points="5.896 109.383 137.398 347.926 139.376 344.65 7.874 106.108 5.896 109.383"/>
38 |       <polyline fill="#C97F30" points="11.223 100.569 138.249 346.438 140.249 343.201 13.223 97.331 11.223 100.569"/>
39 |       <polyline fill="#C97F30" points="8.12 83.782 135.146 329.653 137.145 326.415 10.119 80.546 8.12 83.782"/>
40 |       <polyline fill="#C97F30" points="0 88.016 128.905 330.991 130.526 328.595 1.997 84.771 0 88.016"/>
41 |       <polyline fill="#C97F30" points="9.825 72.545 129.548 330.022 131.581 326.85 11.857 69.373 9.825 72.545"/>
42 |       <polyline fill="#C97F30" points="18.026 63.842 137.749 321.32 139.781 318.148 20.057 60.67 18.026 63.842"/>
43 |       <polyline fill="#C97F30" points="20.272 56.599 139.996 314.076 142.027 310.905 22.303 53.428 20.272 56.599"/>
44 |       <polyline fill="#C97F30" points="19.842 46.16 139.566 303.637 141.597 300.465 21.873 42.988 19.842 46.16"/>
45 |       <polyline fill="#C97F30" points="25.717 49.459 145.441 306.937 147.473 303.765 27.749 46.287 25.717 49.459"/>
46 |       <polyline fill="#C97F30" points="27.521 43.248 147.245 300.726 149.276 297.554 29.552 40.076 27.521 43.248"/>
47 |       <polyline fill="#C97F30" points="13.202 61.284 132.925 318.762 134.956 315.59 15.233 58.113 13.202 61.284"/>
48 |       <polyline fill="#C97F30" points="5.821 56.028 125.545 313.505 127.577 310.333 7.853 52.856 5.821 56.028"/>
49 |       <path fill="#F2D14E" d="M35.498,166.258 C65.707,219.199 95.83,273.732 125.879,329.575 C133.671,344.056 152.277,348.681 165.939,339.532 C181.44,329.152 188.29,315.095 174.76,292.368 C136.848,233.402 109.399,186.303 78.904,120.843 C81.15,146.516 53.253,165.942 35.498,166.258"/>
50 |       <path fill="#319F83" d="M125.816,230.977 C126.264,231.379 126.945,231.405 127.644,230.962 C128.73,230.277 129.449,228.724 129.25,227.495 C129.206,227.222 124.903,199.919 130.329,181.091 C130.734,179.686 130.23,178.491 129.205,178.424 C128.178,178.357 127.017,179.442 126.612,180.848 C120.765,201.137 125.131,228.812 125.32,229.981 C125.391,230.417 125.568,230.754 125.816,230.977"/>
51 |       <path fill="#319F83" d="M122.922 233.374C123.449 233.688 124.186 233.573 124.877 232.989 125.916 232.111 126.456 230.507 126.082 229.407L107.706 175.199C107.333 174.1 106.189 173.917 105.152 174.796 104.113 175.674 103.574 177.277 103.947 178.377L122.323 232.584C122.447 232.952 122.658 233.217 122.922 233.374M117.051 234.788C117.544 235.081 118.227 235.003 118.889 234.497 119.945 233.692 120.555 232.114 120.252 230.961 120.153 230.585 117.68 221.582 104.563 206.683 103.882 205.91 102.628 206.241 101.759 207.418 100.889 208.596 100.735 210.176 101.414 210.947 113.942 225.178 116.391 233.794 116.414 233.88 116.531 234.307 116.757 234.614 117.051 234.788"/>
52 |       <path fill="#319F83" d="M88.442,145.945 C81.328,141.198 85.427,135.842 88.135,137.573 C90.843,139.302 92.18,138.627 92.459,134.966 C92.739,131.306 82.577,125.449 83.969,122.469 C85.362,119.488 87.226,123.579 89.258,123.032 C91.291,122.486 91.098,119.707 89.493,111.292 C87.458,100.63 91.44,101.678 91.44,101.678 C91.44,101.678 96.165,101.547 96.996,111.139 C97.721,119.513 99.526,122.187 101.749,122.578 C103.972,122.97 104.161,118.804 106.734,121.641 C109.307,124.479 101.654,130.982 103.403,134.569 C105.153,138.156 106.743,138.725 108.714,136.824 C110.685,134.924 116.882,139.906 111.785,145.096 C106.687,150.286 105.77,153.034 108.372,156.266 C110.972,159.497 111.635,153.422 113.917,155.324 C116.201,157.228 115.87,160.949 110.776,165.378 C106.923,168.728 107.63,175.38 108.204,178.423 C108.37,179.305 107.891,180.033 107.123,180.062774 C106.354,180.089 105.588,179.406 105.397,178.525 C104.736,175.485 102.752,168.88 97.607,165.857 C90.803,161.86 88.978,158.217 90.46,156.177 C91.943,154.138 95.044,160.076 96.305,156.704 C97.566,153.333 95.556,150.691 88.442,145.945"/>
53 |       <path fill="#45B282" d="M69.672 201.764C61.362 203.943 60.681 197.195 63.792 196.314 66.904 195.432 67.407 193.958 65.131 191.262 62.857 188.565 51.611 192.305 50.594 189.224 49.578 186.143 53.68 187.505 54.768 185.591 55.856 183.677 53.839 181.938 46.998 177.445 38.331 171.751 41.896 169.44 41.896 169.44 41.896 169.44 45.196 165.764 52.276 171.644 58.457 176.778 61.559 177.222 63.418 175.801 65.278 174.379 62.596 171.408 66.36 171.38 70.123 171.353 69.031 181.577 72.71 182.684 76.39 183.79 77.915 182.97 78.044 180.184 78.173 177.398 85.985 176.074 85.838 183.467 85.692 190.861 86.893 193.422 90.943 193.641 94.993 193.86 91.361 189.233 94.284 188.791 97.206 188.35 99.486 191.127 98.828 198.001 98.33 203.199 103.333 207.178 105.802 208.808 106.517 209.281 106.666 210.139 106.134 210.741 105.602 211.343 104.59 211.461 103.858 211.008 101.329 209.447 95.441 206.468 89.707 208.323 82.126 210.775 78.354 209.687 78.039 207.177 77.723 204.667 83.961 206.344 82.586 203.098 81.211 199.852 77.984 199.584 69.672 201.764M125.028 144.401C120.074 136.917 126.403 134.859 128.322 137.648 130.24 140.436 131.844 140.608 133.691 137.872 135.537 135.137 128.064 125.176 130.713 123.562 133.363 121.948 133.438 126.151 135.67 126.791 137.903 127.431 138.906 125.142 140.942 117.67 143.521 108.205 146.984 111.126 146.984 111.126 146.984 111.126 151.685 113.512 148.382 121.501 145.498 128.477 146.124 131.532 148.141 133.011 150.158 134.491 152.132 131.31 153.443 134.899 154.754 138.488 144.439 139.577 144.618 143.323 144.797 147.069 146.116 148.354 148.869 147.896 151.623 147.438 155.574 154.623 148.334 156.026 141.095 157.427 139.014 159.109 140.182 163.023 141.351 166.937 144.613 162.502 146.039 165.202 147.464 167.903 145.541 170.658 138.632 171.463 133.408 172.073 131.246 177.682 130.502 180.379 130.288 181.161 129.503 181.483 128.736 181.1 127.969 180.717 127.51 179.776 127.7 178.982 128.356 176.241 129.244 169.995 125.484 164.906 120.513 158.175 120.285 154.346 122.618 153.521 124.95 152.696 125.448 159.005 128.135 157.014 130.823 155.023 129.982 151.884 125.028 144.401"/>
54 |       <path fill="#E7952E" d="M166.053,343.562 C166.053,343.562 166.69,353.632 163.683,355.807 C161.288,357.539 158.748,350.026 158.748,350.026 L166.053,343.562"/>
55 |       <path fill="#E7952E" d="M162.209,350.904 L162.209,350.904 C169.17,349.493 167.861,338.767 166.783,333.678 L151.035,244.688 C145.008,222.629 128.691,225.272 128.691,225.272 C115.827,229.255 101.654,246.607 107.731,258.804 L147.058,337.733 C149.449,342.53 154.921,352.381 162.209,350.904"/>
56 |       <path fill="#E7952E" d="M142.237,274.336 C142.77,274.654 143.521,274.53 144.217,273.929 C146.546,271.919 148.969,270.876 150.392,271.271 C150.965,271.429 151.289,271.797 151.381,272.393 C151.576,273.624 152.613,274.072 153.699,273.391 C154.785,272.711 155.508,271.16 155.315,269.929 C155.014,268.009 153.968,266.709 152.373,266.266 C149.887,265.576 146.316,266.967 142.818,269.986 C141.785,270.877 141.26,272.483 141.646,273.572 C141.772,273.927 141.98,274.183 142.237,274.336"/>
57 |       <path fill="#B97730" d="M133.387 309.576C134.235 310.081 135.495 309.425 136.202 308.111 137.389 305.9 139.412 304.397 140.617 304.827 141.547 305.159 142.782 304.321 143.374 302.953 143.967 301.585 143.69 300.206 142.762 299.874 139.853 298.835 135.623 301.651 133.132 306.284 132.425 307.599 132.54 309.073 133.387 309.576M160.054 336.505C160.505 336.774 161.117 336.733 161.737 336.324 163.749 334.996 164.063 335.594 164.166 335.789 164.676 336.761 165.883 336.724 166.861 335.705 167.839 334.688 168.219 333.074 167.709 332.103 167.034 330.815 165.256 329.077 160.932 331.929 159.851 332.642 159.156 334.203 159.377 335.417 159.472 335.935 159.719 336.306 160.054 336.505M108.657 259.294C109.351 259.707 110.377 259.345 111.132 258.351 114.335 254.134 117.417 252.294 120.832 252.562 121.855 252.642 123.02 251.568 123.435 250.162 123.85 248.757 123.356 247.553 122.334 247.473 117.624 247.104 113.049 249.797 108.736 255.476 107.853 256.638 107.674 258.224 108.335 259.018 108.431 259.132 108.539 259.224 108.657 259.294"/>
58 |       <path fill="#319F83" d="M161.394,236.569 C161.187,237.178 160.699,237.683 160.058,237.866 C159.065,238.149 158.081,237.55 157.862,236.528 C157.813,236.3 152.866,213.652 143.339,204.031 C142.628,203.313 142.642,202.097 143.369,201.316 C144.096,200.534 145.263,200.483 145.974,201.201 C156.24,211.57 161.252,234.529 161.46,235.5 C161.539,235.865 161.509,236.233 161.394,236.569"/>
59 |       <path fill="#319F83" d="M164.212 236.22C163.921 236.822 163.35 237.266 162.673 237.341 161.657 237.453 160.789 236.69 160.735 235.634L158.073 183.645C158.019 182.59 158.799 181.642 159.815 181.531 160.831 181.417 161.699 182.182 161.752 183.237L164.414 235.226C164.433 235.578 164.358 235.919 164.212 236.22M168.907 233.039C168.634 233.603 168.114 234.033 167.482 234.145 166.474 234.322 165.563 233.625 165.443 232.583 165.403 232.243 164.539 224.022 169.683 203.969 169.95 202.93 170.961 202.271 171.944 202.493 172.925 202.716 173.505 203.738 173.24 204.776 168.327 223.928 169.094 231.855 169.102 231.933 169.144 232.323 169.069 232.704 168.907 233.039"/>
60 |       <path fill="#319F83" d="M163.445,148.908 C167.222,140.423 162.65,139.513 161.19,142.688 C159.73,145.863 158.556,146.334 157.269,143.908 C155.982,141.484 161.651,130.026 159.753,128.884 C157.856,127.741 157.709,132.006 156.068,133.067 C154.425,134.127 153.744,131.997 152.421,124.818 C150.748,115.721 148.158,119.317 148.158,119.317 C148.158,119.317 144.676,122.599 146.911,130.069 C148.862,136.59 148.338,139.796 146.835,141.665 C145.331,143.534 143.961,140.683 142.926,144.555 C141.892,148.427 149.392,147.621 149.18,151.443 C148.967,155.264 147.977,156.808 145.979,156.854 C143.981,156.9 140.941,164.899 146.191,164.978 C151.441,165.056 152.922,166.372 151.984,170.547 C151.046,174.722 148.764,170.84 147.665,173.835 C146.566,176.829 147.909,179.261 152.93,178.797 C156.728,178.446 158.182,183.72 158.665,186.311 C158.805,187.062 159.37,187.242 159.938,186.713 C160.506,186.184 160.862,185.147 160.741,184.378 C160.322,181.727 159.811,175.575 162.664,169.732 C166.437,162.005 166.688,158.09 165.004,157.687 C163.321,157.283 162.82,163.757 160.903,162.241 C158.986,160.724 159.668,157.394 163.445,148.908"/>
61 |       <path fill="#45B282" d="M193.64 175.515C200.34 171.139 198.84 165.816 196.31 167.407 193.78 168.998 192.98 168.3 193.84 164.742 194.7 161.184 204 155.829 203.83 152.895 203.65 149.959 201.07 153.867 199.71 153.273 198.35 152.678 199.31 149.99 202.96 141.881 207.58 131.608 204.31 132.497 204.31 132.497 204.31 132.497 200.81 132.22 197.4 141.493 194.41 149.59 192.29 152.125 190.51 152.434 188.74 152.743 189.81 148.698 187.06 151.366 184.31 154.035 188.13 160.585 185.78 164.007 183.43 167.43 182.07 167.931 181.155 166.026 180.236 164.12 174.154 168.753 176.45 173.949 178.746 179.144 178.628 181.838 175.744 184.888 172.858 187.939 174.134 182.027 171.874 183.798 169.615 185.571 168.777 189.19 171.29 193.647 173.193 197.018 170.725 203.446 169.41 206.377 169.029 207.228 169.174 207.949 169.74 208.001 170.306 208.052 171.078 207.414 171.477 206.566 172.857 203.64 176.264 197.298 180.99 194.531 187.24 190.872 189.66 187.398 189.15 185.373 188.64 183.348 184.59 189.008 184.63 185.698 184.67 182.388 186.94 179.891 193.64 175.515M136.339 173.941C137.732 165.036 132.512 168.083 131.941 171.452 131.369 174.822 130.251 176.092 128.096 175.45 125.942 174.809 128.436 162.328 126.029 163.064 123.622 163.799 124.811 166.866 123.374 168.92 121.938 170.974 120.529 170.049 116.834 166.148 112.154 161.205 110.496 165.774 110.496 165.774 110.496 165.774 107.778 170.843 112.548 174.21 116.714 177.151 117.163 179.788 116.131 182.289 115.1 184.791 112.721 183.921 112.829 187.43 112.936 190.94 120.772 184.351 121.75 187.164 122.729 189.978 122.149 191.841 120.008 193.48 117.867 195.118 117.116 203.093 122.804 198.926 128.492 194.759 130.505 194.478 130.813 198.118 131.121 201.759 127.432 200.91 127.193 203.865 126.954 206.819 129.17 207.42 134.441 203.062 138.427 199.765 141.662 202.242 143.002 203.645 143.39 204.052 144.056 203.722 144.502 202.9 144.948 202.077 145.003 201.074 144.629 200.641 143.34 199.144 140.845 195.301 142.077 188.966 143.705 180.59 142.738 177.682 140.794 178.757 138.851 179.832 140.356 184.71 137.809 185.203 135.262 185.697 134.946 182.845 136.339 173.941"/>
62 |       <path fill="#F2D14E" d="M165.414,346.027 C165.414,346.027 167.931,353.701 170.766,353.113 C173.023,352.644 172.648,345.443 172.648,345.443 L165.414,346.027"/>
63 |       <path fill="#F2D14E" d="M170.387,348.545 L170.387,348.545 C164.9,352.506 162.678,343.881 161.956,339.463 L147.083,264.416 C144.944,244.296 157.611,234.533 157.611,234.533 C168.161,228.199 183.62,230.511 185.56,245.935 L180.281,330.616 C178.771,339.885 176.133,344.398 170.387,348.545"/>
64 |       <path fill="#E7952E" d="M162.269 279.385C161.974 279.993 161.391 280.441 160.706 280.508 158.414 280.731 156.34 281.715 155.421 283.015 155.05 283.536 154.924 284.032 155.033 284.525 155.256 285.546 154.633 286.609 153.641 286.897 152.648 287.185 151.662 286.59 151.438 285.57 151.089 283.978 151.466 282.299 152.498 280.841 154.103 278.572 157.117 277.017 160.558 276.681 161.575 276.582 162.432 277.359 162.473 278.415 162.486 278.76 162.411 279.091 162.269 279.385M179.147 298.326C178.679 299.293 177.567 299.723 176.664 299.285 175.144 298.549 173.226 298.916 172.475 300.086 171.896 300.99 170.748 301.27 169.912 300.713 169.076 300.156 168.869 298.969 169.447 298.069 171.258 295.244 175.172 294.241 178.359 295.783 179.262 296.221 179.616 297.36 179.147 298.326M167.695 336.683C167.446 337.198 166.988 337.605 166.416 337.754 164.557 338.241 164.505 338.894 164.488 339.108 164.404 340.169 163.514 341.003 162.5 340.973 161.486 340.942 160.732 340.057 160.815 338.996 160.926 337.59 161.706 335.074 165.701 334.03 166.699 333.769 167.668 334.391 167.866 335.419 167.95 335.858 167.88 336.3 167.695 336.683M182.28 244.61C181.89 245.403 181.038 245.875 180.193 245.702 176.612 244.968 173.822 245.851 171.414 248.483 170.693 249.271 169.526 249.333 168.808 248.622 168.09 247.91 168.093 246.695 168.814 245.907 172.135 242.279 176.264 240.94 181.087 241.929 182.07 242.132 182.68 243.141 182.43 244.183 182.39 244.332 182.34 244.476 182.28 244.61"/>
65 |       <path fill="#2F2D78" d="M313.27,237.657 L313.27,237.657 C305.66,237.657 299.43,231.427 299.43,223.813 L299.43,91.512 C299.43,83.898 305.66,77.668 313.27,77.668 C320.89,77.668 327.12,83.898 327.12,91.512 L327.12,223.813 C327.12,231.427 320.89,237.657 313.27,237.657"/>
66 |       <path fill="#2F2D78" d="M199.57,10.338 L323.15,81.691 C328.83,84.967 328.11,90.742 321.56,94.526 C315.01,98.309 305,98.724 299.33,95.448 L186.54,30.33 L199.57,10.338"/>
67 |       <path fill="#2A2C73" d="M345.38,329.159 C345.35,329.159 345.31,329.159 345.28,329.159 C342.04,329.154 326.11,325.086 324.41,323.306 C323.24,322.084 323.53,320.801 324.75,319.355 L324.74,319.354 L324.75,319.352 C324.99,319.072 325.25,318.788 325.55,318.496 C324.54,318.889 323.58,319.122 322.53,319.122 C321.89,319.122 321.22,319.035 320.48,318.846 C311.18,316.457 311.32,310.604 311.15,308.734 C310.74,304.357 315.42,300.148 321.97,294.018 C332.37,284.283 339.09,281.298 343.63,281.298 C344.25,281.298 344.82,281.353 345.36,281.454 C345.36,281.454 347.4,280.771 350.61,280.486 C354.93,281.688 359.69,282.369 364.49,282.529 C366.89,283.521 369.35,284.926 371.73,286.887 C372.61,285.692 373.34,284.45 373.74,283.25 C376.43,283.609 379.25,283.797 382.15,283.797 C382.87,283.797 383.58,283.786 384.31,283.763 C383.85,285.868 382.19,288.953 379.19,291.85 C382.94,292.256 387.44,293.351 389.25,296.199 C391.94,300.42 394.37,306.288 389.67,309.021 C392.78,312.081 390.21,316.676 365.7,323.872 C354.28,327.225 353.69,329.16 345.38,329.159"/>
68 |       <path fill="#2A2B6F" d="M382.15,283.797 C379.25,283.797 376.43,283.609 373.74,283.25 C373.86,282.883 373.95,282.519 374.01,282.161 C376.95,281.83 379.81,281.297 382.52,280.56 C383.38,280.827 384.04,281.221 384.28,281.79 C384.48,282.244 384.49,282.926 384.31,283.763 C383.58,283.786 382.87,283.797 382.15,283.797"/>
69 |       <path fill="#C68831" d="M364.49,282.529 C359.69,282.369 354.93,281.688 350.61,280.486 C351.45,280.412 352.37,280.365 353.36,280.365 C356.57,280.365 360.46,280.862 364.49,282.529 M374.01,282.161 C374.11,281.489 374.09,280.839 373.9,280.228 C373.9,280.228 375.67,280.04 377.75,280.04 C379.38,280.04 381.2,280.154 382.52,280.56 C379.81,281.297 376.95,281.83 374.01,282.161"/>
70 |       <path fill="#C44245" d="M304.73,273.894 C304.73,273.894 308.13,261.014 325.39,264.039 L331.09,267.905 C331.09,267.905 337.61,259.877 344.82,263.231 C352.02,266.584 361.57,272.751 356.43,280.134 C351.29,287.517 340.26,297.719 339.16,298.493 C338.07,299.269 314.35,291.294 314.35,291.294 L304.73,273.894"/>
71 |       <path fill="#C2D54D" d="M328.43,275.407 C328.43,275.407 326.32,260.542 319.98,256.08 C319.98,256.08 324.36,249.691 327.54,251.618 C330.72,253.547 337.75,266.108 334.85,276.959 L328.43,275.407"/>
72 |       <path fill="#C2D54D" d="M329.62,272.032 C329.62,272.032 318.79,271.726 319.98,278.153 C321.17,284.579 331.46,292.611 341.92,281.893 C352.39,271.175 329.62,272.032 329.62,272.032"/>
73 |       <path fill="#E05859" d="M315.14,275.595 C309.32,273.383 295.71,265.838 303.79,300.128 C306.14,310.101 307.64,317.058 312.26,321.225 C314.23,323.004 320,328.976 327.76,325.974 C331.82,324.403 329.78,320.038 331.61,311.806 C339.16,277.785 320.98,278.274 315.14,275.595"/>
74 |       <path fill="#E05859" d="M348.97,276.56 C355.23,275.408 370.07,270.217 358.89,304.763 C355.64,314.81 357.26,317.08 352.39,321.947 C350.51,323.823 337.25,328.985 334.49,328.181 C329.98,326.867 329.83,320.489 328.84,311.424 C325.57,281.212 342.64,278.199 348.97,276.56"/>
75 |       <path fill="#C44245" d="M331.31,285.186 C331.31,285.186 333.91,315.288 331.31,322.627 L330.73,324.014 C330.73,324.014 337.67,319.168 333.91,286.814 L331.31,285.186"/>
76 |       <path fill="#E98888" d="M311.12 301.935L311.12 301.935C308.68 301.935 306.68 299.937 306.68 297.494L306.68 286.84C306.68 284.398 308.68 282.4 311.12 282.4 313.56 282.4 315.56 284.398 315.56 286.84L315.56 297.494C315.56 299.937 313.56 301.935 311.12 301.935M342.92 296.555L342.92 296.555C340.48 296.555 338.48 294.557 338.48 292.115L338.48 289.625C338.48 287.184 340.48 285.186 342.92 285.186 345.37 285.186 347.36 287.184 347.36 289.625L347.36 292.115C347.36 294.557 345.37 296.555 342.92 296.555"/>
77 |       <path fill="#6BBD93" d="M194.11,310.856 L211.16,312.82 C211.16,312.82 198.35,317.858 199.01,331.194 C199.67,344.53 196.83,344.395 196.83,344.395 C196.83,344.395 204.69,344.969 216.14,336.862 C219.1,334.762 225.19,326.822 227.81,325.271 L235.32,334.922 C235.32,334.922 220.3,347.672 214.61,349.512 C214.61,349.512 240.95,339.674 247.77,344.779 L247.63,350.384 C230.39,350.111 223.51,356.235 223.51,356.235 C241.81,365.05 253.67,363.577 253.67,363.577 L259.77,378.069 C259.77,378.069 240.58,386.282 218.94,369.505 C207.63,360.733 178.087,370.812 163.967,376.424 C159.64,378.144 154.736,376.053 152.957,371.749 L148.2,360.235 C146.181,355.348 149.047,349.824 154.206,348.663 C163.1,346.66 175.494,343.428 180.54,340.022 C191.99,332.292 175.831,316.703 194.11,310.856"/>
78 |       <path fill="#319F83" d="M189.58,305.141 C189.58,305.141 189.33,290.555 198.7,291.907 C208.06,293.26 209.3,275.541 222.35,282.827 C235.4,290.115 238.6,269.385 252.37,282.362 C266.14,295.338 283.57,295.715 282.73,309.026 C281.89,322.337 289.65,329.32 287.05,341.675 C284.44,354.031 281.38,358.226 279.53,371.557 C277.69,384.887 267.55,388.928 262.7,390.702 C250.54,395.154 233,391.314 235.38,383.833 C237.76,376.353 250.37,374.013 244.96,367.645 C239.55,361.276 236.77,350.423 244.18,342.84 C251.6,335.256 233.63,352.933 229.58,339.168 C225.52,325.405 214.21,326.583 210.04,314.86 C210.04,314.86 186.59,322.457 189.58,305.141"/>
79 |       <path fill="#45B282" d="M255.98 340.612C261.71 340.942 266.56 344.886 268.14 350.404 268.53 351.789 269.02 353.305 269.73 355.021 273.08 363.081 272.13 369.835 266.8 370.223 261.47 370.61 263.16 383.181 259.22 382.081 248.91 379.207 235.35 358.796 239.29 349.754 242.25 342.973 244.08 342.574 246.18 340.047L255.98 340.612M235.48 300.711C242.16 308.261 239.25 308.951 243.91 314.753 248.56 320.555 247.4 322.563 238.51 325.836 229.62 329.11 226.93 326.061 218.16 325.442 209.38 324.824 203.57 320.963 205.41 316.047 207.24 311.13 195 307.02 197.63 304.001 204.5 296.115 228.8 293.16 235.48 300.711M254.87 282.263C251.65 282.586 250.36 284.518 249.03 285.39 247.08 286.674 243.84 293.881 250.27 300.873 256.7 307.866 254.45 310.527 258.36 311.251 262.27 311.975 264.02 313.393 264.02 313.393 264.02 313.393 264.95 317.673 262.22 317.418 259.48 317.162 254.6 319.665 260.13 327.904 265.65 336.143 261.78 333.359 264.95 339.163 268.13 344.967 270.23 342.521 274.28 345.444 278.33 348.366 280.6 350.603 285.22 349.103 289.84 347.603 287.22 343.083 289.3 340.312 291.37 337.541 286.13 331.103 292.08 327.079 298.03 323.056 288.65 312.9 286.3 306.919 283.95 300.939 282.49 297.73 277.28 296.083L254.87 282.263"/>
80 |       <path fill="#5C79AE" d="M171.724,362.053 C171.724,371.982 164.878,376.273 156.511,371.589 L156.511,371.588 C148.144,366.905 141.298,354.949 141.298,345.021 L141.298,290.587 C141.298,280.659 148.144,276.368 156.511,281.052 C164.878,285.737 171.724,297.692 171.724,307.62 L171.724,362.053 Z M96.185,337.947 C87.336,334.252 79.167,323.158 78.031,313.295 L71.798,259.22 C70.661,249.357 76.97,244.31 85.819,248.005 C94.667,251.7 102.836,262.793 103.973,272.657 L110.206,326.733 C111.342,336.595 105.034,341.642 96.185,337.947 Z M202.36,329.336 L202.51,280.215 L202.36,280.13 L35.241,184.437 L64.732,333.761 C66.737,343.909 73.025,352.699 81.984,357.87 L182.21,415.737 L182.85,416.103 C191.4,421.043 202.1,414.887 202.13,405.006 L202.31,345.591 L202.51,345.709 L202.36,334.932 L202.36,329.336 L202.36,329.336 Z"/>
81 |       <path fill="#2F2D78" d="M194.17,288.757 L45.489,205.271 C38.383,201.282 32.925,192.194 33.36,185.075 C33.794,177.957 39.963,175.398 47.069,179.387 L195.75,262.872 C202.85,266.863 208.31,275.95 207.87,283.069 C207.44,290.187 201.27,292.746 194.17,288.757"/>
82 |       <path fill="#3D5A99" d="M412.02,210.739 L408.57,265.063 C407.95,274.971 400.36,286.469 391.71,290.614 C383.06,294.758 376.5,290.042 377.13,280.134 L380.58,225.809 C381.21,215.901 388.8,204.403 397.44,200.258 C406.09,196.114 412.65,200.829 412.02,210.739 Z M343.84,303.712 C343.6,313.638 336.48,325.43 328.01,329.916 C319.53,334.403 312.79,329.952 313.02,320.028 L314.3,265.609 C314.53,255.683 321.65,243.892 330.13,239.405 C338.6,234.918 345.34,239.368 345.11,249.294 L343.84,303.712 Z M263.85,363.272 C255.51,368.01 248.64,363.763 248.57,353.835 L248.23,299.403 C248.16,289.474 254.93,277.475 263.27,272.738 C271.6,268 278.48,272.246 278.54,282.175 L278.89,336.608 C278.95,346.535 272.19,358.534 263.85,363.272 Z M202.51,280.215 L202.51,304.983 L202.36,305.06 L202.36,405.665 C202.36,415.795 213.33,422.127 222.1,417.062 L332.24,353.472 L332.24,353.77 L427.42,298.822 C436.45,293.604 442.51,284.444 443.78,274.086 L462.05,136.317 L202.51,280.215 L202.51,280.215 Z"/>
83 |       <path fill="#2F2D78" d="M444.23,133.114 L237.04,245.467 C235.75,246.165 234.5,246.949 233.28,247.793 L210.4,260.203 C200.5,265.573 192.31,275.799 192.208882,282.93 C192.1,290.061 200.12,291.502 210.02,286.133 L417.21,173.78 C418.5,173.081 419.75,172.298 420.97,171.453 L443.85,159.043 C453.76,153.674 461.94,143.447 462.050925,136.317 C462.15,129.186 454.13,127.744 444.23,133.114"/>
84 |     </g>
85 |   </svg>
86 | </template>
87 | 
88 | <script>
89 | export default {
90 |   name: 'ShoppingCart',
91 | }
92 | </script>
93 | 


--------------------------------------------------------------------------------
/src/components/site/SiteFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="relative z-10 bg-white">
 3 |     <div class="sm:px-6 md:flex md:items-center md:justify-between lg:px-8 max-w-screen-xl px-4 py-12 mx-auto">
 4 | 
 5 |       <div class="md:order-2 owl:ml-6 flex justify-center">
 6 |         <a target="_blank" href="https://discord.gg/ZdAVr3X" class="hover:text-gray-500 text-gray-400">
 7 |           <span class="sr-only">Discord</span>
 8 |           <svg class="w-6 h-6" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 9 |             <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"/>
10 |           </svg>
11 |         </a>
12 |         <a target="_blank" href="https://github.com/hacknug/trovado" class="hover:text-gray-500 text-gray-400">
13 |           <span class="sr-only">GitHub</span>
14 |           <svg class="w-6 h-6" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
15 |             <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
16 |           </svg>
17 |         </a>
18 |         <!-- <a href="#" class="hover:text-gray-500 text-gray-400">
19 |           <span class="sr-only">Facebook</span>
20 |           <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
21 |             <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/>
22 |           </svg>
23 |         </a>
24 |         <a href="#" class="hover:text-gray-500 text-gray-400">
25 |           <span class="sr-only">Instagram</span>
26 |           <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
27 |             <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/>
28 |           </svg>
29 |         </a>
30 |         <a href="#" class="hover:text-gray-500 text-gray-400">
31 |           <span class="sr-only">Twitter</span>
32 |           <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
33 |             <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
34 |           </svg>
35 |         </a>
36 |         <a href="#" class="hover:text-gray-500 text-gray-400">
37 |           <span class="sr-only">GitHub</span>
38 |           <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
39 |             <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
40 |           </svg>
41 |         </a>
42 |         <a href="#" class="hover:text-gray-500 text-gray-400">
43 |           <span class="sr-only">Dribbble</span>
44 |           <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
45 |             <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"/>
46 |           </svg>
47 |         </a> -->
48 |       </div>
49 | 
50 |       <div class="md:mt-0 md:order-1 mt-8">
51 |         <p class="text-base leading-6 text-center text-gray-400">
52 |           &copy; 2020 {{ siteName }}. All rights reserved.
53 |         </p>
54 |       </div>
55 | 
56 |     </div>
57 |   </div>
58 | </template>
59 | 
60 | <script>
61 | export default {
62 |   name: 'SiteFooter',
63 |   props: {
64 |     siteName: {
65 |       type: String,
66 |       required: true,
67 |     },
68 |   },
69 | }
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/components/site/SiteNavigation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav class="bg-white shadow-sm">
  3 | 
  4 |     <div class="max-w-7xl sm:px-6 lg:px-8 px-4 mx-auto">
  5 |       <div class="flex justify-between h-16">
  6 | 
  7 |         <div class="flex">
  8 |           <div class="flex items-center flex-shrink-0">
  9 |             <g-link class="owl:ml-3 inline-flex items-center text-xl font-black text-blue-600" :to="$tp && $tp('/')">{{ siteName }}</g-link>
 10 |           </div>
 11 |           <div data-nav="desktop" class="sm:ml-12 sm:flex owl:ml-8 hidden">
 12 |             <g-link :key="route" v-for="(label, route) in main" :class="className.nav.desktop" :to="$tp && $tp(route)">{{ label }}</g-link>
 13 |           </div>
 14 |         </div>
 15 | 
 16 |         <div class="lg:ml-6 flex items-center justify-end flex-1 px-2">
 17 |           <!-- <SiteNavigationSearch /> -->
 18 |           <SiteNavigationLang />
 19 |         </div>
 20 |         <SiteNavigationUser />
 21 | 
 22 |         <div class="sm:hidden flex items-center -mr-2">
 23 |           <button @click="open = !open" class="hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md" :aria-label="open ? 'Close main menu' : 'Main menu'" :aria-expanded="open">
 24 |             <MenuIcon class="w-6 h-6" />
 25 |           </button>
 26 |         </div>
 27 |       </div>
 28 |     </div>
 29 | 
 30 |     <!-- TODO: Add links and localizations -->
 31 |     <div :class="{ 'block': open, 'hidden': !open }" class="sm:hidden">
 32 | 
 33 |       <div data-nav="mobile" class="owl:mt-1 pt-2 pb-3">
 34 |         <g-link :key="route" v-for="(label, route) in main" :class="className.nav.mobile" :to="$tp && $tp(route)">{{ label }}</g-link>
 35 |       </div>
 36 | 
 37 |       <div class="pt-4 pb-3 border-t border-gray-200">
 38 |         <div class="flex items-center px-4">
 39 |           <div class="flex-shrink-0">
 40 |             <img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
 41 |           </div>
 42 |           <div class="ml-3">
 43 |             <div class="text-base font-medium leading-6 text-gray-800">Tom Cook</div>
 44 |             <div class="text-sm font-medium leading-5 text-gray-500">tom@example.com</div>
 45 |           </div>
 46 |         </div>
 47 |         <div class="mt-3" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
 48 |           <a href="#" class="hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 block px-4 py-2 text-base font-medium text-gray-500 transition duration-150 ease-in-out" role="menuitem">Your Profile</a>
 49 |           <a href="#" class="hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 block px-4 py-2 mt-1 text-base font-medium text-gray-500 transition duration-150 ease-in-out" role="menuitem">Settings</a>
 50 |           <a href="#" class="hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 block px-4 py-2 mt-1 text-base font-medium text-gray-500 transition duration-150 ease-in-out" role="menuitem">Sign out</a>
 51 |         </div>
 52 |       </div>
 53 | 
 54 |     </div>
 55 | 
 56 |   </nav>
 57 | </template>
 58 | 
 59 | <script>
 60 | import { SearchIcon, MenuIcon } from 'vue-feather-icons'
 61 | 
 62 | // import SiteNavigationSearch from '~/components/site/SiteNavigationSearch'
 63 | import SiteNavigationLang from '~/components/site/SiteNavigationLang'
 64 | import SiteNavigationUser from '~/components/site/SiteNavigationUser'
 65 | 
 66 | export default {
 67 |   name: 'SiteNavigation',
 68 |   components: {
 69 |     SearchIcon, MenuIcon,
 70 |     // SiteNavigationSearch,
 71 |     SiteNavigationLang,
 72 |     SiteNavigationUser,
 73 |   },
 74 |   props: {
 75 |     siteName: {
 76 |       type: String,
 77 |       required: true,
 78 |     },
 79 |   },
 80 |   data () {
 81 |     return {
 82 |       open: false,
 83 |       main: {
 84 |         // '/': 'Home',
 85 |         '/shops': 'Shops',
 86 |         // '/all-shops': 'All Shops',
 87 |         '/about/': 'About',
 88 |       },
 89 |     }
 90 |   },
 91 |   computed: {
 92 |     className () {
 93 |       return {
 94 |         nav: {
 95 |           mobile: 'hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 block py-2 pl-3 pr-4 mt-1 text-base font-medium text-gray-600 transition duration-150 ease-in-out border-l-4 border-transparent',
 96 |           desktop: 'focus:outline-none hover:text-gray-700 focus:text-gray-700 hover:border-gray-300 focus:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out border-b-2 border-transparent',
 97 |         },
 98 |       }
 99 |     },
100 |   },
101 | }
102 | </script>
103 | 
104 | <style>
105 |   [data-nav] {
106 |     &[data-nav="mobile"] a.active {
107 |       @apply text-blue-700 bg-blue-50 border-blue-500;
108 |       &:matches(:hover, :focus) { @apply text-blue-800 bg-blue-100 border-blue-700; }
109 |     }
110 |     &[data-nav="desktop"] a.active {
111 |       @apply text-gray-900 border-blue-500;
112 |       &:matches(:hover, :focus) { @apply border-blue-700; }
113 |     }
114 |   }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/components/site/SiteNavigationLang.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex items-center">
 3 |     <span class="relative z-0 inline-flex rounded-md shadow-sm">
 4 |       <select
 5 |         v-model="currentLocale" @change="localeChanged"
 6 |         class="form-select pr-9 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 block w-full py-2 pl-3 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md"
 7 |         ><option value="ca" disabled>Català</option>
 8 |         <option v-for="locale in availableLocales" :key="locale" :value="locale">{{ langs[locale] || locale }}</option>
 9 |         <option value="pt" disabled>Portuguese</option>
10 |       </select>
11 |     </span>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'SiteNavigationLang',
18 |   data () {
19 |     return {
20 |       currentLocale: this.$i18n.locale.toString(),
21 |       availableLocales: this.$i18n.availableLocales,
22 |       langs: {
23 |         en: 'English',
24 |         es: 'Spanish',
25 |       },
26 |     }
27 |   },
28 |   methods: {
29 |     localeChanged () {
30 |       this.$router.push({
31 |         path: this.$tp(this.$route.path, this.currentLocale, true)
32 |       })
33 |     },
34 |   },
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/components/site/SiteNavigationSearch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-click-outside="hide" class="lg:max-w-xs relative w-full max-w-lg">
  3 |     <label for="search" class="sr-only">Search</label>
  4 | 
  5 |     <BaseInput
  6 |       id="search"
  7 |       v-model="searchTerm"
  8 |       type="search"
  9 |       autocomplete="off"
 10 |       :placeholder="placeholder"
 11 |       :size="size"
 12 |       :class="[isFocused && 'rounded-b-none']"
 13 |       @clear="searchResults = []"
 14 |       @focus="show"
 15 |     >
 16 |       <template slot="icon"><SearchIcon class="text-current size-inherit" /></template>
 17 |     </BaseInput>
 18 | 
 19 |     <dl v-if="isFocused" class="top-full sm:text-sm absolute inset-x-0 z-10 text-base leading-5">
 20 |       <div class="last:rounded-b-md py-1 -mt-px bg-white border border-gray-300">
 21 |         <dt class="sr-only">Location</dt>
 22 |         <div class="owl:border-t">
 23 |           <dd class="block border-gray-100">
 24 |             <button type="button" @click.prevent="useCurrentLocation" :class="['w-full text-left text-green-600 hover:bg-green-100 focus:bg-gray-100 bg-green-50', className.item]">
 25 |               <span :class="[className.icon, className.hook]"><NavigationIcon class="size-inherit fill-current" /></span>
 26 |               <span class="w-full font-medium">Use current location</span>
 27 |             </button>
 28 |           </dd>
 29 |         </div>
 30 |       </div>
 31 |       <div v-if="this.searchTerm.length > 2 && searchResults.length" class="last:rounded-b-md py-1 -mt-px bg-white border border-gray-300">
 32 |         <dt class="sr-only">Results</dt>
 33 |         <div class="owl:border-t">
 34 |           <dd v-for="result in searchResults" :key="result.id" class="block border-gray-100">
 35 |             <g-link @click.native="hide" :to="$tp && $tp(`/shops?q=${result.center.join(',')}`)" :class="className.item">
 36 |               <span :class="[className.icon, className.code]">{{ lastContext(result).short_code }}</span>
 37 |               <span class="w-full truncate">{{ result.place_name }}</span>
 38 |             </g-link>
 39 |           </dd>
 40 |         </div>
 41 |       </div>
 42 |     </dl>
 43 | 
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 | import { mapState } from 'vuex'
 49 | import ClickOutside from 'vue-click-outside'
 50 | import { NavigationIcon, SearchIcon } from 'vue-feather-icons'
 51 | 
 52 | import BaseInput from '~/components/base/BaseInput'
 53 | 
 54 | export default {
 55 |   name: 'SiteNavigationSearch',
 56 |   directives: { ClickOutside },
 57 |   components: { NavigationIcon, SearchIcon, BaseInput },
 58 |   props: {
 59 |     size: {
 60 |       type: String,
 61 |       required: false,
 62 |       default: 'md',
 63 |     },
 64 |     placeholder: {
 65 |       type: String,
 66 |       required: false,
 67 |       default: 'Looking for an item?',
 68 |     },
 69 |   },
 70 |   data: () => ({
 71 |     isFocused: false,
 72 |     searchTerm: '',
 73 |     searchResults: [],
 74 |     apiBaseUrl: 'https://api.mapbox.com/geocoding/v5/mapbox.places',
 75 |   }),
 76 |   computed: {
 77 |     ...mapState(['userLocation']),
 78 | 
 79 |     className () {
 80 |       return {
 81 |         term: [
 82 |           this.size === 'md' && 'text-sm leading-5',
 83 |           this.size === 'xl' && 'text-base leading-6',
 84 |         ],
 85 |         item: [
 86 |           this.size === 'md' && 'px-3 owl:ml-2',
 87 |           this.size === 'xl' && 'px-5 owl:ml-3',
 88 |           'flex items-baseline py-2',
 89 |           'text-gray-600 hover:bg-gray-50 focus:bg-gray-50',
 90 |           'transition duration-150 ease-in-out focus:outline-none',
 91 |         ],
 92 |         icon: [
 93 |           'flex-none',
 94 |         ],
 95 |         code: [
 96 |           this.size === 'md' && 'w-5',
 97 |           this.size === 'xl' && 'w-6',
 98 |           'text-gray-400 font-mono text-center uppercase',
 99 |         ],
100 |         hook: [
101 |           this.size === 'md' && 'w-4 h-4',
102 |           this.size === 'xl' && 'w-5 h-5',
103 |           'self-center mr-1 text-green-400',
104 |         ],
105 |       }
106 |     },
107 |     apiParams () {
108 |       return new URLSearchParams({
109 |         access_token: process.env.GRIDSOME_MAPBOX_TOKEN,
110 |         ...this.userLocation.length && { proximity: this.userLocation.join(',') },
111 |         limit: 5,
112 |         // language: 'yo',
113 |         // types: 'yo',
114 |       })
115 |     },
116 |   },
117 |   methods: {
118 |     show () {
119 |       this.isFocused = true
120 |     },
121 |     hide () {
122 |       this.isFocused = false
123 |     },
124 |     lastContext (result) {
125 |       return result.context.length ? result.context[result.context.length - 1] : {}
126 |     },
127 |     fetchResults () {
128 |       if (this.searchTerm.length > 2) {
129 |         fetch(`${this.apiBaseUrl}/${this.searchTerm}.json?${this.apiParams.toString()}`)
130 |           .then((res) => res.json())
131 |           .then((res) => this.searchResults = res.features)
132 |       }
133 |     },
134 |     useCurrentLocation () {
135 |       this.$store.dispatch('GET_USER_LOCATION')
136 |     },
137 |   },
138 |   watch: {
139 |     searchTerm: 'fetchResults',
140 |     userLocation (location) {
141 |       this.$router.push({
142 |         path: 'shops',
143 |         query: { q: location.join(',') },
144 |       })
145 |     },
146 |   },
147 |   mounted () {
148 |     this.popupItem = this.$el // re: `ClickOutside`
149 |   },
150 | }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/site/SiteNavigationUser.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sm:ml-6 sm:flex sm:items-center owl:ml-3 hidden">
  3 | 
  4 |     <div v-if="!user" class="owl:ml-2">
  5 |       <BaseButton variant="secondary" @click.native="SET_AUTH_INTENT('Sign In')">Sign In</BaseButton>
  6 |       <BaseButton variant="primary" @click.native="SET_AUTH_INTENT('Sign Up')">Sign Up</BaseButton>
  7 |     </div>
  8 | 
  9 |     <div v-else class="flex items-center">
 10 | 
 11 |       <button class="hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 p-1 text-gray-400 transition duration-150 ease-in-out border-2 border-transparent rounded-full" aria-label="Notifications">
 12 |         <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
 13 |           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
 14 |         </svg>
 15 |       </button>
 16 | 
 17 |       <div class="relative">
 18 |         <div>
 19 |           <button @click="open = !open" class="focus:outline-none focus:border-gray-300 flex text-sm transition duration-150 ease-in-out border-2 border-transparent rounded-full" id="user-menu" aria-label="User menu" aria-haspopup="true" :aria-expanded="open">
 20 |             <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
 21 |           </button>
 22 |         </div>
 23 |         <transition v-bind="transitions.zoom">
 24 |           <div v-show="open" class="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg">
 25 |             <div class="py-1 bg-white rounded-md shadow-xs">
 26 |               <button @click="setIntent('Favourites')" :class="className">Favourites</button>
 27 |               <g-link :to="$tp && $tp('/user/settings/')" :class="className">Settings</g-link>
 28 |               <button @click="signOut" :class="className">Sign Out</button>
 29 |             </div>
 30 |           </div>
 31 |         </transition>
 32 |       </div>
 33 | 
 34 |     </div>
 35 | 
 36 |     <ClientOnly>
 37 |       <UserAuthModal
 38 |         :form="authIntent"
 39 |         :isVisible="!!authIntent"
 40 |         @changeForm="SET_AUTH_INTENT($event.title)"
 41 |         @close="SET_AUTH_INTENT('')"
 42 |       />
 43 |     </ClientOnly>
 44 | 
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 50 | 
 51 | import { alert } from '~/mixins/Alert'
 52 | import { transitions } from '~/mixins/Transitions'
 53 | import BaseButton from '~/components/base/BaseButton'
 54 | 
 55 | export default {
 56 |   name: 'SiteNavigationUser',
 57 |   mixins: [alert, transitions],
 58 |   components: {
 59 |     BaseButton,
 60 |     UserAuthModal: () => import('~/components/UserAuthModal'),
 61 |   },
 62 |   data () {
 63 |     return {
 64 |       open: false,
 65 |       main: {
 66 |         favourites: 'Favourites',
 67 |         settings: 'Settings',
 68 |         // signOut: 'Sign Out',
 69 |       },
 70 |     }
 71 |   },
 72 |   computed: {
 73 |     ...mapState(['user', 'authIntent']),
 74 |     ...mapGetters(['userAlias', 'userAvatar']),
 75 | 
 76 |     className () {
 77 |       return [
 78 |         'block w-full px-4 py-2',
 79 |         'text-gray-700 hover:bg-gray-100 focus:bg-gray-100',
 80 |         'text-sm leading-5 text-left focus:outline-none',
 81 |         'transition duration-150 ease-in-out',
 82 |       ]
 83 |     },
 84 |   },
 85 |   methods: {
 86 |     ...mapMutations(['SET_AUTH_INTENT']),
 87 |     ...mapActions(['SIGN_OUT']),
 88 | 
 89 |     setIntent (intent) {
 90 |       this.open = false
 91 |       this.SET_AUTH_INTENT(intent)
 92 |     },
 93 |     signOut () {
 94 |       this.open = false
 95 |       this.SIGN_OUT()
 96 |         .then(() => this.alert('yo', 'See you soon'))
 97 |         .then(() => this.$route.path.includes('/user/') && this.$router.push('/'))
 98 |         .catch((error) => this.alert('no', error))
 99 |     },
100 |   },
101 | }
102 | </script>
103 | 


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hacknug/trovado/af9254b57efde86c11ec9f23fd4c755625ae1d7a/src/favicon.png


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | import 'firebase/auth'
 4 | 
 5 | // Get a Firestore instance
 6 | firebase.initializeApp(JSON.parse(process.env.GRIDSOME_FIREBASE_CONFIG))
 7 | 
 8 | export const db = firebase.firestore()
 9 | export const auth = firebase.auth()
10 | 
11 | export const getCurrentUser = () => {
12 |   return new Promise((resolve, reject) => {
13 |     const unsubscribe = auth.onAuthStateChanged(user => {
14 |       unsubscribe()
15 |       resolve(user)
16 |     }, reject)
17 |   })
18 | }
19 | 
20 | export const emailAuthProvider = firebase.auth.EmailAuthProvider
21 | export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
22 | googleAuthProvider.setCustomParameters({ prompt: 'select_account' })
23 | 
24 | export const signInWithGoogle = () => auth.signInWithPopup(googleAuthProvider)
25 | 
26 | // Export types that exists in Firestore
27 | // This is not always necessary, but it's used in other examples
28 | // const { Timestamp, GeoPoint } = firebase.firestore
29 | // export { Timestamp, GeoPoint }
30 | 
31 | // if using Firebase JS SDK < 5.8.0
32 | // db.settings({ timestampsInSnapshots: true })
33 | 


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col flex-1 py-10">
 3 | 
 4 |     <header v-if="$slots.header">
 5 |       <div class="max-w-7xl sm:px-6 lg:px-8 px-4 mx-auto">
 6 |         <h1 class="text-3xl font-bold leading-tight text-gray-900"><slot name="header" /></h1>
 7 |       </div>
 8 |     </header>
 9 | 
10 |     <main class="flex flex-col flex-1">
11 |       <div v-if="$slots.bleed" class="flex flex-col flex-1 -my-10">
12 |         <slot name="bleed" />
13 |       </div>
14 | 
15 |       <div v-if="$slots.default" class="max-w-7xl sm:px-6 lg:px-8 w-full mx-auto">
16 |         <!-- Replace with your content -->
17 |         <div class="sm:px-0 px-4 py-8">
18 |           <slot/>
19 |         </div>
20 |         <!-- /End replace -->
21 |       </div>
22 |     </main>
23 | 
24 |   </div>
25 | </template>
26 | 
27 | <static-query>
28 |   query {
29 |     metadata {
30 |       siteName
31 |       siteDescription
32 |       siteUrl
33 |     }
34 |   }
35 | </static-query>
36 | 
37 | <script>
38 | import SiteSEO from '~/mixins/SiteSEO'
39 | 
40 | export default {
41 |   mixins: [SiteSEO],
42 | }
43 | </script>
44 | 
45 | <style lang="postcss">
46 |   html {
47 |     font-size: 14px;
48 |     @screen md { font-size: 16px; }
49 |   }
50 | 
51 |   .size-inherit {
52 |     width: inherit;
53 |     height: inherit;
54 |   }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/locales/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "navigation": {
 3 |     "search": "Search",
 4 |     "main": {
 5 |       "home": "Home",
 6 |       "shops": "Shops",
 7 |       "all_shops": "All Shops",
 8 |       "about": "About"
 9 |     },
10 |     "user": {
11 |       "profile": "Your Profile",
12 |       "settings": "Settings",
13 |       "signout": "Sign Out"
14 |     }
15 |   },
16 |   "components": {
17 |     "HeroSearch": {
18 |       "title": [
19 |         "Need anything from the shop?",
20 |         "Check the availability of your closest shops and pharmacies."
21 |       ],
22 |       "description": "Find everything you need and reduce unnecessary movements to risk areas."
23 |     },
24 |     "HeroFeatures": {
25 |       "intro": "How it works?",
26 |       "title": "A safer way to shop during quarantine",
27 |       "description": "We want to reduce people’s exposure to the COVID-19 by letting everyone know whether the items they’re looking for are available in their nearest supermarket or not.",
28 |       "features": [
29 |         {
30 |           "title": "Explore your neighbourhood",
31 |           "description": "Find supermarkets and pharmacies near your home that offer the products you need."
32 |         },
33 |         {
34 |           "title": "Plan ahead",
35 |           "description": "Let us know the items that you need in and your location. We'll take care of the rest."
36 |         },
37 |         {
38 |           "title": "Go safely to the supermarket!",
39 |           "description": "We'll let you know the best time to go so you can avoid the long lines and empty shelves."
40 |         },
41 |         {
42 |           "title": "Help your community",
43 |           "description": "Update product availability levels from what you’ve seen at your local supermarket."
44 |         },
45 |         {
46 |           "title": "Unlock shiny rewards",
47 |           "description": "Become a trusted contributor and gain badges by improving the accuracy of your supermarket shelf information."
48 |         }
49 |       ]
50 |     },
51 |     "HeroForm": {
52 |       "title": "A safer way to shop during quarantine",
53 |       "description": "We want to reduce people’s exposure to the COVID-19 by letting people know whether the items they’re looking for are available in their nearest supermarket."
54 |     }
55 |   },
56 |   "index": {
57 |     "shops": {
58 |       "title": "Supermarkets with more stock",
59 |       "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed."
60 |     }
61 |   },
62 |   "phone": "Phone Number"
63 | }
64 | 


--------------------------------------------------------------------------------
/src/locales/es.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "navigation": {
 3 |     "search": "Buscar",
 4 |     "main": {
 5 |       "home": "Inicio",
 6 |       "shops": "Tiendas",
 7 |       "all_shops": "Todas las Tiendas",
 8 |       "about": "Acerca de"
 9 |     },
10 |     "user": {
11 |       "profile": "Tu Perfil",
12 |       "settings": "Ajustes",
13 |       "signout": "Cerrar Sesión"
14 |     }
15 |   },
16 |   "components": {
17 |     "HeroSearch": {
18 |       "title": [
19 |         "¿Necesitas alguna cosa?",
20 |         "Comprueba la disponibilidad en tiendas y farmacias cercanas."
21 |       ],
22 |       "description": "Encuentra todo lo que necesitas y reduce tus desplazamientos a zonas peligrosas."
23 |     },
24 |     "HeroFeatures": {
25 |       "intro": "¿Cómo funciona?",
26 |       "title": "Una forma más segura de comprar durante la cuarentena",
27 |       "description": "Queremos reducir la exposición al COVID-19 permitiendo a todo el mundo conocer la disponibilidad de los productos que buscan en sus tiendas cercanas",
28 |       "features": [
29 |         {
30 |           "title": "Explore your neighbourhood",
31 |           "description": "Find supermarkets and pharmacies near your home that offer the products you need."
32 |         },
33 |         {
34 |           "title": "Plan ahead",
35 |           "description": "Let us know the items that you need in and your location. We'll take care of the rest."
36 |         },
37 |         {
38 |           "title": "Go safely to the supermarket!",
39 |           "description": "We'll let you know the best time to go so you can avoid the long lines and empty shelves."
40 |         },
41 |         {
42 |           "title": "Help your community",
43 |           "description": "Update product availability levels from what you’ve seen at your local supermarket."
44 |         },
45 |         {
46 |           "title": "Unlock shiny rewards",
47 |           "description": "Become a trusted contributor and gain badges by improving the accuracy of your supermarket shelf information."
48 |         }
49 |       ]
50 |     },
51 |     "HeroForm": {
52 |       "title": "Una forma más segura de comprar durante la cuarentena",
53 |       "description": "Queremos reducir las exposiciones al COVID-19, optimizando tu visita al supermercado o farmacia, informándote sobre disponibilidad de productos en tu tienda más cercana."
54 |     }
55 |   },
56 |   "index": {
57 |     "shops": {
58 |       "title": "Supermercados con más stock",
59 |       "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed."
60 |     }
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import PortalVue from 'portal-vue'
 2 | import { firestorePlugin } from 'vuefire'
 3 | import VueToast from 'vue-toast-notification'
 4 | import 'vue-toast-notification/dist/theme-default.css'
 5 | import VScrollLock from 'v-scroll-lock'
 6 | import VueTippy, { TippyComponent } from "vue-tippy"
 7 | import "tippy.js/themes/light-border.css"
 8 | 
 9 | import { parsePhoneNumberFromString } from 'libphonenumber-js'
10 | 
11 | import store from '~/store/'
12 | import DefaultLayout from '~/layouts/Default.vue'
13 | 
14 | const { getCurrentUser } = process.isClient ? require('~/firebase') : import('~/firebase')
15 | 
16 | export default function (Vue, { appOptions, router, head, isClient }) {
17 |   Vue.use(PortalVue)
18 |   Vue.use(firestorePlugin)
19 |   Vue.use(VueToast)
20 |   Vue.use(VScrollLock)
21 | 
22 |   Vue.use(VueTippy, { animateFill: false })
23 |   Vue.component('Tippy', TippyComponent)
24 | 
25 |   Vue.component('Layout', DefaultLayout)
26 | 
27 |   Vue.filter('camel', (string) => string.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase()))
28 |   Vue.filter('phone', (number, country, format = 'RFC3966') => parsePhoneNumberFromString(number, country).format(format))
29 | 
30 |   appOptions.store = store
31 |   appOptions.beforeCreate = function () {
32 |     this.$store.commit('initialiseStore')
33 |   }
34 | 
35 |   if (isClient) {
36 |     appOptions.i18n.setLocaleMessage('en', require('./locales/en.json'))
37 |     appOptions.i18n.setLocaleMessage('es', require('./locales/es.json'))
38 |   }
39 | 
40 |   head.meta = head.meta.filter((meta) => meta.key !== 'viewport')
41 |   head.meta.push({
42 |     key: 'viewport',
43 |     name: 'viewport',
44 |     content: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover',
45 |   })
46 | 
47 |   router.beforeEach(async (to, from, next) => {
48 |     const requiresAuth = to.matched.some(record => record.path.includes('/user/'))
49 | 
50 |     if (isClient && requiresAuth && !await getCurrentUser()) {
51 |       next('/') // TODO: Redirect to /user/login page
52 |     } else {
53 |       next()
54 |     }
55 |   })
56 | }
57 | 


--------------------------------------------------------------------------------
/src/mixins/Alert.js:
--------------------------------------------------------------------------------
 1 | export const alert = {
 2 |   data () {
 3 |     return {
 4 |       alertOptions: {
 5 |         ok: { type: 'success', message: 'all good', color: 'green' },
 6 |         no: { type: 'error', message: 'oopsie-doo', color: 'red' },
 7 |         yo: { type: 'info', message: 'hey listen!', color: 'blue' },
 8 |       },
 9 |     }
10 |   },
11 |   methods: {
12 |     alert (type, message) {
13 |       const color = this.alertOptions[type].color
14 | 
15 |       this.$toast.open({
16 |         ...this.alertOptions[type],
17 |         message: message || this.alertOptions[type].message,
18 |         customClass: `text-${color}-800 bg-${color}-200 boder-${color}-800`,
19 |       })
20 |     },
21 |   },
22 | }
23 | 


--------------------------------------------------------------------------------
/src/mixins/SiteSEO.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   computed: {
 3 |     metaData () {
 4 |       return this.$static ? this.$static.metadata : {}
 5 |     },
 6 |     metaTitle () {
 7 |       const pageTitle = this.$parent && this.$parent.$metaInfo && this.$parent.$metaInfo.title
 8 | 
 9 |       return {
10 |         content: pageTitle || this.metaData.siteName,
11 |         ...pageTitle ? { template: '%s - Trovado' } : {},
12 |       }
13 |     },
14 |     metaDescription () {
15 |       return { content: this.metaData.siteDescription }
16 |     },
17 |     metaImage () {
18 |       return { content: `${this.metaData.siteUrl}/img/banner.png` }
19 |     },
20 |     metaLogo () {
21 |       return { content: `${this.metaData.siteUrl}/img/touchicon.png` }
22 |     },
23 |     metaUrl () {
24 |       return { content: `${this.metaData.siteUrl}${this.$route && this.$route.path}` }
25 |     },
26 |     // metaSite () {
27 |     //   return { content: this.metaData.twitter.site }
28 |     // },
29 |     // metaCreator () {
30 |     //   return { content: this.metaData.twitter.creator }
31 |     // },
32 |   },
33 |   metaInfo () {
34 |     return {
35 |       meta: [
36 |         // { key: 'description', name: 'description', content: this.metaDescription },
37 | 
38 |         { key: 'og:type', property: 'og:type', content: 'website' },
39 |         { key: 'og:title', property: 'og:title', ...this.metaTitle },
40 |         { key: 'og:description', property: 'og:description', ...this.metaDescription },
41 |         { key: 'og:image', property: 'og:image', ...this.metaImage },
42 |         { key: 'og:logo', property: 'og:logo', ...this.metaLogo },
43 |         { key: 'og:url', property: 'og:url', ...this.metaUrl },
44 |         // TODO: Add `article:modified_time` to let Google know when the page was last updated
45 | 
46 |         { key: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
47 |         { key: 'twitter:title', name: 'twitter:title', ...this.metaTitle },
48 |         { key: 'twitter:description', name: 'twitter:description', ...this.metaDescription },
49 |         { key: 'twitter:image', name: 'twitter:image', ...this.metaImage },
50 |         { key: 'twitter:url', name: 'twitter:url', ...this.metaUrl },
51 |         // { key: 'twitter:site', name: 'twitter:site', ...this.metaSite },
52 |         // { key: 'twitter:creator', name: 'twitter:creator', ...this.metaCreator },
53 |       ],
54 |     }
55 |   },
56 | }
57 | 


--------------------------------------------------------------------------------
/src/mixins/Transitions.js:
--------------------------------------------------------------------------------
 1 | export const transitions = {
 2 |   data () {
 3 |     return {
 4 |       transitions: {
 5 |         fade: {
 6 |           'enter-active-class': 'duration-300 ease-out',
 7 |           'enter-class': 'opacity-0',
 8 |           'enter-to-class': 'opacity-100',
 9 |           'leave-active-class': 'duration-200 ease-in',
10 |           'leave-class': 'opacity-100',
11 |           'leave-to-class': 'opacity-0',
12 |         },
13 |         zoom: {
14 |           'enter-active-class': 'transition duration-200 ease-out',
15 |           'enter-class': 'transform scale-95 opacity-0',
16 |           'enter-to-class': 'transform scale-100 opacity-100',
17 |           'leave-active-class': 'transition duration-75 ease-in',
18 |           'leave-class': 'transform scale-100 opacity-100',
19 |           'leave-to-class': 'transform scale-95 opacity-0',
20 |         },
21 |       },
22 |     }
23 |   },
24 | }
25 | 


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <template slot="bleed">
 4 |       <HeroForm />
 5 |     </template>
 6 |   </Layout>
 7 | </template>
 8 | 
 9 | <script>
10 | import HeroForm from '~/components/HeroForm'
11 | 
12 | export default {
13 |   components: { HeroForm },
14 |   metaInfo () {
15 |     return {
16 |       title: this.$t && this.$t('navigation.main.about'),
17 |     }
18 |   },
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <template slot="bleed">
 4 |       <HeroSearch class="bg-white" />
 5 |       <HeroFeatures class="bg-gray-50" />
 6 |     </template>
 7 |   </Layout>
 8 | </template>
 9 | 
10 | <script>
11 | import HeroSearch from '~/components/HeroSearch'
12 | import HeroFeatures from '~/components/HeroFeatures'
13 | 
14 | export default {
15 |   components: { HeroSearch, HeroFeatures },
16 |   metaInfo () {
17 |     return {
18 |       title: this.$t && this.$t('navigation.main.home'),
19 |     }
20 |   },
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/pages/Shops.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <template slot="bleed">
 4 |       <FetchShops :center="center || pageCenter" v-slot="{ features, loading }">
 5 |         <Shops
 6 |           :shops="features"
 7 |           :loading="loading"
 8 |           :userLocation="pageCenter"
 9 |           @changeCenter="center = $event"
10 |         />
11 |       </FetchShops>
12 |     </template>
13 |   </Layout>
14 | </template>
15 | 
16 | <script>
17 | import { mapState } from 'vuex'
18 | 
19 | import FetchShops from '~/components/FetchShops'
20 | import Shops from '~/components/Shops'
21 | 
22 | export default {
23 |   components: { FetchShops, Shops },
24 |   metaInfo () {
25 |     return {
26 |       title: this.$t && this.$t('navigation.main.shops'),
27 |     }
28 |   },
29 |   data () {
30 |     return {
31 |       center: null,
32 |       queryCenter: null,
33 |     }
34 |   },
35 |   computed: {
36 |     ...mapState(['userLocation']),
37 | 
38 |     pageCenter () {
39 |       const query = this.queryCenter && this.queryCenter.split(',')
40 |       return query && query.length > 1 ? query : this.userLocation
41 |     },
42 |   },
43 |   methods: {
44 |     async geolocateUser () {
45 |       if (process.isClient && !this.userLocation.length) {
46 |         this.$store.dispatch('GET_USER_LOCATION')
47 |       }
48 |     },
49 |   },
50 |   watch: {
51 |     $route: {
52 |       immediate: true,
53 |       handler (to, from) {
54 |         this.queryCenter = to.query.q
55 |       },
56 |     },
57 |   },
58 |   mounted () {
59 |     this.geolocateUser()
60 |   },
61 | }
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/pages/user/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |     <BaseSection>
  4 |       <ul class="sm:grid-cols-2 lg:gap-16 grid w-full max-w-4xl gap-8 mx-auto">
  5 | 
  6 |         <li class="owl:mt-4">
  7 |           <BaseSectionHeader title="Change Email"/>
  8 |           <BaseForm class="relative max-w-full" @submit.native.prevent="changeEmail(userDetails)">
  9 |             <BaseFormFieldset>
 10 |               <BaseFormControl class="w-full" label="Current Email">
 11 |                 <BaseInput :value="user && user.email" type="email" :isDisabled="true" />
 12 |               </BaseFormControl>
 13 |               <BaseFormControl class="w-full" label="New Email">
 14 |                 <BaseInput v-model="userDetails.newEmail" type="email" />
 15 |               </BaseFormControl>
 16 |             </BaseFormFieldset>
 17 |             <template slot="submit">
 18 |               <BaseButton class="w-full" type="submit">Update Email</BaseButton>
 19 |             </template>
 20 |           </BaseForm>
 21 |         </li>
 22 | 
 23 |         <li class="owl:mt-4">
 24 |           <BaseSectionHeader title="Change Password"/>
 25 |           <BaseForm class="relative max-w-full" @submit.native.prevent="changePassword(userDetails)">
 26 |             <BaseFormFieldset>
 27 |               <!-- <BaseFormControl class="w-full" label="Current Password">
 28 |                 <BaseInput v-model="userDetails.password" type="password" />
 29 |               </BaseFormControl> -->
 30 |               <BaseFormControl tag="div" class="w-full" label="New Password">
 31 |                 <BaseInput v-model="userDetails.newPassword" type="password" />
 32 |                 <BaseInput v-model="userDetails.newPasswordConfirm" type="password" placeholder="Confirm Password" />
 33 |               </BaseFormControl>
 34 |             </BaseFormFieldset>
 35 |             <template slot="submit">
 36 |               <BaseButton class="w-full" type="submit">Update Password</BaseButton>
 37 |             </template>
 38 |           </BaseForm>
 39 |         </li>
 40 | 
 41 |         <li class="owl:mt-4">
 42 |           <BaseSectionHeader title="Verify Email"/>
 43 |           <BaseForm class="relative max-w-full" @submit.native.prevent="verifyEmail()">
 44 |             <template slot="submit">
 45 |               <BaseButton class="w-full" type="submit" :isDisabled="isVerified">
 46 |                 {{ isVerified ? 'Already Verified' : 'Send Verification Email' }}
 47 |               </BaseButton>
 48 |             </template>
 49 |           </BaseForm>
 50 |         </li>
 51 | 
 52 |         <li class="owl:mt-4">
 53 |           <BaseSectionHeader title="Delete Account"/>
 54 |           <BaseForm class="relative max-w-full" @submit.native.prevent="deleteAccount()">
 55 |             <p>Careful. There's no way to undo this.</p>
 56 |             <template slot="submit">
 57 |               <BaseButton class="w-full" type="submit">Delete Account</BaseButton>
 58 |             </template>
 59 |           </BaseForm>
 60 |         </li>
 61 | 
 62 |       </ul>
 63 | 
 64 |     </BaseSection>
 65 |   </Layout>
 66 | </template>
 67 | 
 68 | <script>
 69 | import { mapState, mapMutations, mapActions } from 'vuex'
 70 | 
 71 | import { alert } from '~/mixins/Alert'
 72 | 
 73 | import BaseSection from '~/components/base/BaseSection'
 74 | import BaseSectionHeader from '~/components/base/BaseSectionHeader'
 75 | import BaseForm from '~/components/base/BaseForm'
 76 | import BaseFormFieldset from '~/components/base/BaseFormFieldset'
 77 | import BaseFormControl from '~/components/base/BaseFormControl'
 78 | import BaseInput from '~/components/base/BaseInput'
 79 | import BaseButton from '~/components/base/BaseButton'
 80 | 
 81 | export default {
 82 |   mixins: [alert],
 83 |   components: {
 84 |     BaseSection,
 85 |     BaseSectionHeader,
 86 |     BaseForm,
 87 |     BaseFormFieldset,
 88 |     BaseFormControl,
 89 |     BaseInput,
 90 |     BaseButton,
 91 |   },
 92 |   metaInfo () {
 93 |     return {
 94 |       title: this.title,
 95 |     }
 96 |   },
 97 |   data () {
 98 |     return {
 99 |       title: 'User Settings',
100 |       userDetails: {
101 |         password: null,
102 |         newEmail: null,
103 |         newPassword: null,
104 |         newPasswordConfirm: null,
105 |       },
106 |     }
107 |   },
108 |   computed: {
109 |     ...mapState(['user']),
110 | 
111 |     isVerified () {
112 |       return this.user?.emailVerified
113 |     },
114 |   },
115 |   methods: {
116 |     ...mapMutations(['SET_AUTH_INTENT']),
117 |     ...mapActions(['UPDATE_PASSWORD', 'UPDATE_EMAIL', 'VERIFY_EMAIL', 'DELETE_ACCOUNT']),
118 | 
119 |     changeEmail ({ newEmail }) {
120 |       if (newEmail) {
121 |         this.UPDATE_EMAIL(newEmail)
122 |           .then(() => this.alert('yo', 'Email updated'))
123 |           .catch((error) => this.handleUserReAuth(error))
124 |       } else {
125 |         this.alert('no', 'Please, provide an email address')
126 |       }
127 |     },
128 |     changePassword ({ newPassword, newPasswordConfirm }) {
129 |       if (newPassword && newPasswordConfirm) {
130 |         if (newPassword === newPasswordConfirm) {
131 |           this.UPDATE_PASSWORD(newPassword)
132 |             .then(() => this.alert('ok', 'Password updated'))
133 |             .catch((error) => this.handleUserReAuth(error))
134 |         } else {
135 |           this.alert('no', 'Passwords don\'t match, sorry')
136 |         }
137 |       } else {
138 |         this.alert('no', 'Please, fill both fields')
139 |       }
140 |     },
141 |     verifyEmail () {
142 |       if (!this.isVerified) {
143 |         this.VERIFY_EMAIL()
144 |           .then(() => this.alert('yo', 'Email sent'))
145 |           .catch((error) => this.handleUserReAuth(error))
146 |       } else {
147 |         this.alert('ok', 'Email already verified')
148 |       }
149 |     },
150 |     deleteAccount () {
151 |       this.SET_AUTH_INTENT('Delete Account')
152 |     },
153 | 
154 |     handleUserReAuth (error) {
155 |       if (error.code === 'auth/requires-recent-login') {
156 |         this.alert('yo', 'Please, sign in again')
157 |         this.SET_AUTH_INTENT('Sign In')
158 |       } else {
159 |         this.alert('no', error.message)
160 |       }
161 |     },
162 |   },
163 | }
164 | </script>
165 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import { vuexfireMutations, firestoreAction } from 'vuexfire'
  4 | 
  5 | Vue.use(Vuex)
  6 | 
  7 | const { auth, db, emailAuthProvider } = process.isClient ? require('~/firebase') : import('~/firebase')
  8 | 
  9 | const store = new Vuex.Store({
 10 |   state: {
 11 |     user: auth?.currentUser,
 12 |     userData: {},
 13 |     userDataInit: false,
 14 |     userLocation: [],
 15 |     authIntent: '',
 16 |   },
 17 | 
 18 |   getters: {
 19 |     userDoc: ({ user }) => user && db.collection('users').doc(user.uid),
 20 |     userAlias: ({ user, userData }) => userData?.userDetails?.displayName || user?.email,
 21 |     userFavourites: ({ userData }) => userData && userData.favourites || {},
 22 |     // userPhotoURL: ({ userData }) => userData?.userDetails?.photoURL,
 23 |     // userBadgeURL: (state, { userFeaturedParts: { badges } }) => badges?.attachments?.[0]?.url || badges?.gameBadge[0]?.url,
 24 |     userAvatar: (state, { userPhotoURL, userBadgeURL }) => userBadgeURL || userPhotoURL,
 25 |   },
 26 | 
 27 |   mutations: {
 28 |     ...vuexfireMutations,
 29 | 
 30 |     initialiseStore (state) {
 31 |       if (process.isClient) {
 32 |         const localState = localStorage.getItem('store')
 33 |         localState && this.replaceState(Object.assign(state, JSON.parse(localState)))
 34 |       }
 35 |     },
 36 | 
 37 |     SET_USER (state, user) {
 38 |       state.user = user
 39 |     },
 40 |     SET_USER_LOCATION (state, location) {
 41 |       state.userLocation = location
 42 |     },
 43 |     SET_AUTH_INTENT (state, intent) {
 44 |       state.authIntent = intent
 45 |     },
 46 |     SET_DATA_INIT (state, isInit) {
 47 |       state.userDataInit = isInit
 48 |     },
 49 |   },
 50 | 
 51 |   actions: {
 52 |     SIGN_UP (context, { email, password }) {
 53 |       return auth.createUserWithEmailAndPassword(email, password)
 54 |     },
 55 |     SIGN_IN ({ state }, { email, password }) {
 56 |       return state.user
 57 |         ? state.user.reauthenticateWithCredential(emailAuthProvider.credential(email, password))
 58 |         : auth.signInWithEmailAndPassword(email, password)
 59 |     },
 60 |     SIGN_OUT () {
 61 |       return auth.signOut()
 62 |     },
 63 | 
 64 |     RESET_PASSWORD (context, email) {
 65 |       return auth.sendPasswordResetEmail(email)
 66 |     },
 67 |     UPDATE_PASSWORD ({ state }, newPassword) {
 68 |       return state.user.updatePassword(newPassword)
 69 |     },
 70 |     UPDATE_EMAIL ({ state }, newEmail) {
 71 |       return state.user.updateEmail(newEmail)
 72 |     },
 73 |     VERIFY_EMAIL ({ state }) {
 74 |       return state.user.sendEmailVerification()
 75 |     },
 76 |     DELETE_ACCOUNT ({ state }) {
 77 |       return state.user.delete()
 78 |     },
 79 | 
 80 |     GET_USER_LOCATION ({ commit }) {
 81 |       const makeLngLat = ({ latitude: lat, longitude: lng }) => [lng, lat]
 82 |       // navigator.permissions.query({ name: 'geolocation' })
 83 |       //   .then((status) => console.info(status))
 84 |       return navigator.geolocation.getCurrentPosition(
 85 |         (position) => commit('SET_USER_LOCATION', makeLngLat(position.coords)),
 86 |         (error) => console.error(error),
 87 |         { enableHighAccuracy: true },
 88 |       )
 89 |     },
 90 | 
 91 |     async SET_USER_DOC ({ state, getters, dispatch }, doc = {}) {
 92 |       // !state.userDataInit && await dispatch('BIND_USER_DATA')
 93 |       return getters.userDoc?.set(doc)
 94 |     },
 95 |     async UPDATE_USER_DOC ({ state, getters, dispatch }, doc = {}) {
 96 |       !state.userData && await dispatch('SET_USER_DOC')
 97 |       !state.userDataInit && await dispatch('BIND_USER_DATA')
 98 |       return getters.userDoc?.update(doc)
 99 |     },
100 | 
101 |     async UPDATE_USER_FAVOURITES ({ state, dispatch }, shop) {
102 |       return dispatch('UPDATE_USER_DOC', {
103 |         ...state.userData,
104 |         favourites: [...(state.userData ? state.userData.favourites : []), shop],
105 |       })
106 |     },
107 | 
108 |     async BIND_USER ({ commit, dispatch }, user) {
109 |       commit('SET_USER', await user)
110 |       await dispatch('BIND_USER_DATA')
111 |     },
112 | 
113 |     BIND_USER_DATA: firestoreAction(async ({ state, getters, commit, bindFirestoreRef, unbindFirestoreRef }) => {
114 |       await state.user
115 |         ? bindFirestoreRef('userData', getters.userDoc)
116 |         : unbindFirestoreRef('userData')
117 |       commit('SET_DATA_INIT', !!state.user)
118 |     }),
119 |   },
120 | })
121 | 
122 | store.subscribe((mutation, state) => {
123 |   if (process.isClient) {
124 |     // Store the state object as a JSON string
125 |     localStorage.setItem('store', JSON.stringify(state))
126 |   }
127 | })
128 | 
129 | export default store
130 | 


--------------------------------------------------------------------------------
/src/templates/README.md:
--------------------------------------------------------------------------------
1 | Templates for **GraphQL collections** should be added here.
2 | To create a template for a collection called `WordPressPost`
3 | create a file named `WordPressPost.vue` in this folder.
4 | 
5 | Learn more: https://gridsome.org/docs/templates/
6 | 
7 | You can delete this file.
8 | 


--------------------------------------------------------------------------------
/static/img/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hacknug/trovado/af9254b57efde86c11ec9f23fd4c755625ae1d7a/static/img/banner.png


--------------------------------------------------------------------------------
/static/img/touchicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hacknug/trovado/af9254b57efde86c11ec9f23fd4c755625ae1d7a/static/img/touchicon.png


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ['Inter Var', ...defaultTheme.fontFamily.sans],
 8 |       },
 9 |       borderRadius: {
10 |         inherit: 'inherit',
11 |       },
12 |     },
13 | 
14 |     container: {
15 |       center: true,
16 |     },
17 |     aspectRatio: {
18 |       'none': 0,
19 |       'square': [1, 1],
20 |       '16/9': [16, 9],
21 |       '4/3': [4, 3],
22 |       '21/9': [21, 9],
23 |     },
24 |     filter: {
25 |       blur: 'blur(0.125rem)',
26 |     },
27 |     backdropFilter: {
28 |       blur: 'blur(0.25rem)',
29 |     },
30 |     spinner: (theme) => ({
31 |       default: { color: theme('colors.blue.600'), border: theme('spacing.1'), },
32 |     }),
33 |   },
34 | 
35 |   variants: {
36 |     borderRadius: ['responsive', 'last'],
37 |     borderWidth: ['responsive', 'owl'],
38 |     margin: ['responsive', 'owl'],
39 |     opacity: ['responsive', 'hover', 'focus', 'group-hover'],
40 |     pointerEvents: ['responsive', 'children'],
41 |   },
42 | 
43 |   plugins: [
44 |     require('@tailwindcss/ui'),
45 |     require('tailwindcss-spinner')(),
46 |     require('tailwindcss-aspect-ratio'),
47 | 
48 |     require('tailwindcss-filters'),
49 |     require('@hacknug/tailwindcss-alpha')({
50 |       modules: {
51 |         // textColor: true,
52 |         backgroundColor: true,
53 |         // borderColor: true,
54 |         // placeholderColor: {
55 |         //   prefixes: ['placeholder'],
56 |         //   properties: ['color'],
57 |         //   fallbacks: ['textColors'],
58 |         //   process: false,
59 |         // },
60 |       },
61 |     }),
62 | 
63 |     // Variants
64 |     require('tailwindcss-children'),
65 |     function ({ addVariant, e }) {
66 |       addVariant('owl', ({ modifySelectors, separator, container }) => {
67 |         modifySelectors(({ className }) => {
68 |           return `.${e(`owl${separator}${className}`)} > * + *`
69 |         })
70 |       })
71 |     },
72 |   ],
73 | }
74 | 


--------------------------------------------------------------------------------