From 1f361b72bf4ab347a6a7fa826f05d8746020af5f Mon Sep 17 00:00:00 2001 From: m-axii <139446627+m-axii@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:31:26 +0200 Subject: [PATCH] f-self-exclusion@v1.0.0 (#2350) * Added Self-Exclusion Page * Fixes to option period * Added localizations and code consolidation * Added store and api files * Fixed store and api call * Fixed store and api call * Fixed selectedOption names * Self-exclusion refinement * Added Notifications * Fixed translations for GB and NZ * Mocked API * Updated component version * Build fixed * Setup unit tests * Add f-wdio-utils * Add components test * Added all tenants * Added show notification, removed Close Alert * Increment chromedriver version * Update chromedriver and ignore engines * fix f-loyalty builds * update to chromedriver 118 * Fix alias * Added test-id to the component * Changed test-id to the component * Changed text, added go back alert, privacy statement link * Update packages/components/pages/f-self-exclusion/CHANGELOG.md Co-authored-by: Ashley Watson-Nolan * Updated from comments * skip failing auto-generated tests * Updated error alert to display GET request error --------- Co-authored-by: Maxim Vasilev Co-authored-by: Panayot Tolev Co-authored-by: Ben Siggery Co-authored-by: Ashley Watson-Nolan --- .../pages/f-self-exclusion/.eslintignore | 2 + .../pages/f-self-exclusion/CHANGELOG.md | 12 + .../components/pages/f-self-exclusion/LICENSE | 17 + .../pages/f-self-exclusion/README.md | 127 ++++++ .../pages/f-self-exclusion/babel.config.js | 26 ++ .../pages/f-self-exclusion/jest.config.js | 43 ++ .../pages/f-self-exclusion/package.json | 70 +++ .../src/assets/scss/common.scss | 1 + .../src/components/SelfExclusion.vue | 404 ++++++++++++++++++ .../components/_tests/SelfExclusion.test.js | 33 ++ .../src/components/_tests/helpers/setup.js | 52 +++ .../pages/f-self-exclusion/src/constants.js | 18 + .../pages/f-self-exclusion/src/index.js | 35 ++ .../services/providers/selfExclusion.api.js | 41 ++ .../src/store/selfExclusion.module.js | 47 ++ .../f-self-exclusion/src/tenants/da-DK.js | 45 ++ .../f-self-exclusion/src/tenants/en-AU.js | 45 ++ .../f-self-exclusion/src/tenants/en-GB.js | 45 ++ .../f-self-exclusion/src/tenants/en-IE.js | 45 ++ .../f-self-exclusion/src/tenants/en-NZ.js | 45 ++ .../f-self-exclusion/src/tenants/es-ES.js | 45 ++ .../f-self-exclusion/src/tenants/index.js | 21 + .../f-self-exclusion/src/tenants/it-IT.js | 45 ++ .../f-self-exclusion/src/tenants/nb-NO.js | 45 ++ .../stories/SelfExclusion.stories.js | 56 +++ .../stories/payloads/get-exclusions.json | 7 + .../stories/payloads/put-exclusions.json | 5 + .../f-self-exclusion/stories/story.helper.js | 130 ++++++ .../test-utils/component-objects/README.md | 13 + .../f-self-exclusion.component.js | 9 + .../accessibility/axe-accessibility.spec.js | 12 + .../f-self-exclusion.component.spec.js | 13 + .../pages/f-self-exclusion/vue.config.js | 23 + 33 files changed, 1577 insertions(+) create mode 100644 packages/components/pages/f-self-exclusion/.eslintignore create mode 100644 packages/components/pages/f-self-exclusion/CHANGELOG.md create mode 100644 packages/components/pages/f-self-exclusion/LICENSE create mode 100644 packages/components/pages/f-self-exclusion/README.md create mode 100644 packages/components/pages/f-self-exclusion/babel.config.js create mode 100644 packages/components/pages/f-self-exclusion/jest.config.js create mode 100644 packages/components/pages/f-self-exclusion/package.json create mode 100644 packages/components/pages/f-self-exclusion/src/assets/scss/common.scss create mode 100644 packages/components/pages/f-self-exclusion/src/components/SelfExclusion.vue create mode 100644 packages/components/pages/f-self-exclusion/src/components/_tests/SelfExclusion.test.js create mode 100644 packages/components/pages/f-self-exclusion/src/components/_tests/helpers/setup.js create mode 100644 packages/components/pages/f-self-exclusion/src/constants.js create mode 100644 packages/components/pages/f-self-exclusion/src/index.js create mode 100644 packages/components/pages/f-self-exclusion/src/services/providers/selfExclusion.api.js create mode 100644 packages/components/pages/f-self-exclusion/src/store/selfExclusion.module.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/da-DK.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/en-AU.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/en-GB.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/en-IE.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/en-NZ.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/es-ES.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/index.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/it-IT.js create mode 100644 packages/components/pages/f-self-exclusion/src/tenants/nb-NO.js create mode 100644 packages/components/pages/f-self-exclusion/stories/SelfExclusion.stories.js create mode 100644 packages/components/pages/f-self-exclusion/stories/payloads/get-exclusions.json create mode 100644 packages/components/pages/f-self-exclusion/stories/payloads/put-exclusions.json create mode 100644 packages/components/pages/f-self-exclusion/stories/story.helper.js create mode 100644 packages/components/pages/f-self-exclusion/test-utils/component-objects/README.md create mode 100644 packages/components/pages/f-self-exclusion/test-utils/component-objects/f-self-exclusion.component.js create mode 100644 packages/components/pages/f-self-exclusion/test/accessibility/axe-accessibility.spec.js create mode 100644 packages/components/pages/f-self-exclusion/test/component/f-self-exclusion.component.spec.js create mode 100644 packages/components/pages/f-self-exclusion/vue.config.js diff --git a/packages/components/pages/f-self-exclusion/.eslintignore b/packages/components/pages/f-self-exclusion/.eslintignore new file mode 100644 index 0000000000..76add878f8 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/.eslintignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/packages/components/pages/f-self-exclusion/CHANGELOG.md b/packages/components/pages/f-self-exclusion/CHANGELOG.md new file mode 100644 index 0000000000..ff90e7eb30 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/CHANGELOG.md @@ -0,0 +1,12 @@ +# Changelog + +The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) +and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). + + +v0.1.0 +------------------------------ +*November 21, 2023* + +### Added +- `f-self-exclusion` page created with base functionality diff --git a/packages/components/pages/f-self-exclusion/LICENSE b/packages/components/pages/f-self-exclusion/LICENSE new file mode 100644 index 0000000000..26f973a64f --- /dev/null +++ b/packages/components/pages/f-self-exclusion/LICENSE @@ -0,0 +1,17 @@ +Apache License +Version 2.0, January 2004 +http://www.apache.org/licenses/ + +Copyright (c) Just Eat Holding Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/components/pages/f-self-exclusion/README.md b/packages/components/pages/f-self-exclusion/README.md new file mode 100644 index 0000000000..60bb9e5773 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/README.md @@ -0,0 +1,127 @@ +
+ +# f-self-exclusion + +Fozzie Bear + +Customers must be able to voluntarily self-exclude or nominate themselves for self exclusion for a specified time period or permanently (includes purchasing and marketing), and their account (associated to the email address or phone number provided during self exclusions) must be blocked from purchasing alcohol and other items. + +
+ +--- + +[![npm version](https://badge.fury.io/js/%40justeat%2Ff-self-exclusion.svg)](https://badge.fury.io/js/%40justeat%2Ff-self-exclusion) +[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components) +[![Coverage Status](https://coveralls.io/repos/github/justeat/f-self-exclusion/badge.svg)](https://coveralls.io/github/justeat/f-self-exclusion) +[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-self-exclusion/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-self-exclusion?targetFile=package.json) + +--- + +## Usage + +### Installation + +Install the module using npm or Yarn: + +```sh +yarn add @justeat/f-self-exclusion +``` + +```sh +npm install @justeat/f-self-exclusion +``` + + + +### Vue Applications + +You can import it in your Vue SFC like this (please note that styles have to be imported separately): + +```js +import SelfExclusion from '@justeat/f-self-exclusion'; +import '@justeat/f-self-exclusion/dist/f-self-exclusion.css'; + +export default { + components: { + SelfExclusion + } +} +``` + +If you are using Webpack, you can import the component dynamically to separate the `self-exclusion` bundle from the main `bundle.client.js`: + +```js +import '@justeat/f-self-exclusion/dist/f-self-exclusion.css'; + +export default { + components: { + // … + SelfExclusion: () => import(/* webpackChunkName: "self-exclusion" */ '@justeat/f-self-exclusion') + } +} +``` + +## Configuration + +### Props + +There may be props that allow you to customise its functionality. + +The props that can be defined are as follows (if any): + +| Prop | Type | Default | Description | +| ----- | ----- | ------- | ----------- | + +### Events + +The events that can be subscribed to are as follows (if any): + +| Event | Description | +| ----- | ----------- | + +## Development + +Start by cloning the repository and installing the required dependencies: + +```sh +$ git clone git@github.com:justeat/fozzie-components.git +$ cd fozzie-components +$ yarn +``` + +Change directory to the `f-self-exclusion` package: + +```sh +$ cd packages/components/pages/f-self-exclusion +``` + +## Testing + +To test all components, run from root directory. +To test only `f-self-exclusion`, run from the `./fozzie-components/packages/components/pages/f-self-exclusion` directory. + +### Unit and Integration tests + +```sh +yarn test +``` + +### Component and Accessibility Tests + +```bash +# Note: Ensure Storybook is running when running the following commands +cd ./fozzie-components + +yarn storybook:build +yarn storybook:serve-static +``` + +yarn test-component:chrome +``` +### Accessibility tests +```bash +yarn test-a11y:chrome +``` +## Documentation to be completed once module is in stable state. + + diff --git a/packages/components/pages/f-self-exclusion/babel.config.js b/packages/components/pages/f-self-exclusion/babel.config.js new file mode 100644 index 0000000000..396cc2dd81 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/babel.config.js @@ -0,0 +1,26 @@ +module.exports = api => { + // Use `isTest` to determine what presets and plugins to use with jest + const isTest = api.env('test'); + const presets = []; + const plugins = [ + '@babel/plugin-proposal-optional-chaining' // https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining + ]; + const builtIns = (api.env('development') ? 'entry' : false); + + if (!isTest) { + api.cache(true); // Caches the computed babel config function – https://babeljs.io/docs/en/config-files#apicache + presets.push(['@vue/app', { useBuiltIns: builtIns }]); + // Alias for @babel/preset-env + // Hooks into browserslist to provide smart Babel transforms + // https://babeljs.io/docs/en/babel-preset-env + presets.push('@babel/env'); + } else { + // use current node version for transpiling test files + presets.push(['@babel/env', { targets: { node: 'current' } }]); + } + + return { + presets, + plugins + }; +}; diff --git a/packages/components/pages/f-self-exclusion/jest.config.js b/packages/components/pages/f-self-exclusion/jest.config.js new file mode 100644 index 0000000000..0b6900a596 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/jest.config.js @@ -0,0 +1,43 @@ +module.exports = { + moduleFileExtensions: [ + 'js', + 'json', + 'vue' + ], + + transform: { + '^.+\\.js$': 'babel-jest', + '^.+\\.vue$': 'vue-jest', + '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub' + }, + + transformIgnorePatterns: [ + 'node_modules/(?!(lodash-es)/)' + ], + + moduleNameMapper: { + '^@/(.*)$': '/src/$1', + '^~include-media/(.*)$': '../../node_modules/include-media/$1', + '^~@justeat/(.*)$': '../../node_modules/@justeat/$1', + '\\.(css|scss)$': 'jest-transform-stub' + }, + + snapshotSerializers: [ + 'jest-serializer-vue' + ], + + globals: { + 'vue-jest': { + hideStyleWarn: true, // We hide style warnings given the first time we run the tests it complains about some styles. The second time the tests are run, the warning disappears. https://github.com/vuejs/vue-jest/issues/178#issuecomment-529175129 + experimentalCSSCompile: false // hoping this will be a temporary fix, as tests fail when updating to dart-sass currently with vue-cli + } + }, + + modulePathIgnorePatterns: [ + './test/component/', + './test/accessibility', + './test/visual' + ], + + testURL: 'http://localhost/' +}; diff --git a/packages/components/pages/f-self-exclusion/package.json b/packages/components/pages/f-self-exclusion/package.json new file mode 100644 index 0000000000..9051d22f27 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/package.json @@ -0,0 +1,70 @@ +{ + "name": "@justeat/f-self-exclusion", + "description": "Fozzie Self Exclusion - Customers must be able to voluntarily self-exclude or nominate themselves for self exclusion for a specified time period or permanently (includes purchasing and marketing), and their account (associated to the email address or phone number provided during self exclusions) must be blocked from purchasing alcohol and other items.", + "version": "1.0.0", + "main": "dist/f-self-exclusion.umd.min.js", + "files": [ + "dist", + "test-utils", + "src/services", + "src/constants.js" + ], + "publishConfig": { + "access": "public" + }, + "homepage": "https://github.com/justeat/fozzie-components/tree/master/packages/components/pages/f-self-exclusion", + "contributors": [ + "Github contributors " + ], + "repository": { + "type": "git", + "url": "git@github.com:justeat/fozzie-components.git" + }, + "bugs": { + "url": "https://github.com/justeat/fozzie-components/issues" + }, + "license": "Apache-2.0", + "engines": { + "node": "^12 || ^14 || ^16" + }, + "keywords": [ + "fozzie" + ], + "scripts": { + "prepublishOnly": "yarn lint && yarn test && yarn build", + "build": "vue-cli-service build --target lib --name f-self-exclusion ./src/index.js", + "lint": "eslint \"!(dist)/**/*.{js,vue}\"", + "lint:fix": "yarn lint --fix", + "lint:style": "stylelint ./src/**/*.{vue,htm,html,css,sss,less,scss}", + "lint:style:fix": "yarn lint:style --fix", + "test": "jest --passWithNoTests", + "test-component:chrome": "cross-env-shell TEST_TYPE=component wdio ../../../../wdio-chrome.conf.js", + "test-a11y:chrome": "cross-env-shell TEST_TYPE=a11y wdio ../../../../wdio-chrome.conf.js", + "ci:test:pages": "yarn test", + "ci:test-component:chrome:pages": "yarn test-component:chrome", + "ci:test-a11y:chrome:pages": "yarn test-a11y:chrome" + }, + "browserslist": [ + "extends @justeat/browserslist-config-fozzie" + ], + "dependencies": { + "@justeat/f-globalisation": "1.2.0", + "@justeat/f-services": "1.x", + "@justeat/f-alert": "6.x", + "@justeat/f-button": "4.x", + "@justeat/f-card": "4.x", + "@justeat/f-form-field": "6.x", + "axios": "0.21.2" + }, + "peerDependencies": { + "@justeat/browserslist-config-fozzie": ">=1.2.0" + }, + "devDependencies": { + "@justeat/f-wdio-utils": "1.x", + "@vue/cli-plugin-babel": "4.5.16", + "@vue/test-utils": "1.0.3" + }, + "volta": { + "extends": "../../../../package.json" + } +} diff --git a/packages/components/pages/f-self-exclusion/src/assets/scss/common.scss b/packages/components/pages/f-self-exclusion/src/assets/scss/common.scss new file mode 100644 index 0000000000..ac26039f75 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/assets/scss/common.scss @@ -0,0 +1 @@ +// Add styles here so it can be injected first via vue.config.js. diff --git a/packages/components/pages/f-self-exclusion/src/components/SelfExclusion.vue b/packages/components/pages/f-self-exclusion/src/components/SelfExclusion.vue new file mode 100644 index 0000000000..f247185b58 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/components/SelfExclusion.vue @@ -0,0 +1,404 @@ + + + + + diff --git a/packages/components/pages/f-self-exclusion/src/components/_tests/SelfExclusion.test.js b/packages/components/pages/f-self-exclusion/src/components/_tests/SelfExclusion.test.js new file mode 100644 index 0000000000..d347d7ca4d --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/components/_tests/SelfExclusion.test.js @@ -0,0 +1,33 @@ +import Vuex from 'vuex'; +import { VueI18n } from '@justeat/f-globalisation'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import SelfExclusion from '../SelfExclusion.vue'; +import { + createStore, + i18n, + $log +} from './helpers/setup'; + +const localVue = createLocalVue(); + +localVue.use(VueI18n); +localVue.use(Vuex); + +describe('SelfExclusion', () => { + it('should be defined', () => { + const propsData = { + authToken: '', + smartGatewayBaseUrl: '' + }; + const wrapper = shallowMount(SelfExclusion, { + store: createStore(), + localVue, + propsData, + i18n, + mocks: { + $log + } + }); + expect(wrapper.exists()).toBe(true); + }); +}); diff --git a/packages/components/pages/f-self-exclusion/src/components/_tests/helpers/setup.js b/packages/components/pages/f-self-exclusion/src/components/_tests/helpers/setup.js new file mode 100644 index 0000000000..a8e784f4bc --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/components/_tests/helpers/setup.js @@ -0,0 +1,52 @@ +import Vuex from 'vuex'; +import tenantConfigs from '../../../tenants'; + +const defaultState = { + exclusions: [{ type: 'alcohol', state: '', expiryDate: '' }] +}; + +const defaultActions = { + getExclusions: jest.fn(), + updateAlcoholExclusion: jest.fn() +}; + +const defaultGetters = { + exclusions () { + return defaultState.exclusions; + } +}; + +const i18n = { + locale: 'en-AU', + messages: { + 'en-AU': tenantConfigs['en-AU'].messages + } +}; + +const createStore = ( + state = defaultState, + actions = defaultActions, + getters = defaultGetters +) => new Vuex.Store({ + modules: { + fSelfExclusionModule: { + namespaced: true, + state, + actions, + getters + }, + hasModule: jest.fn(() => true) + } +}); + +const $log = { + info: jest.fn(), + warn: jest.fn(), + error: jest.fn() +}; + +export { + createStore, + i18n, + $log +}; diff --git a/packages/components/pages/f-self-exclusion/src/constants.js b/packages/components/pages/f-self-exclusion/src/constants.js new file mode 100644 index 0000000000..32bd833488 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/constants.js @@ -0,0 +1,18 @@ +export const UPDATE_EXCLUSIONS = 'updateExclusions'; +export const UPDATE_ALCOHOL_EXCLUSION = 'updateAlcoholExclusion'; + +export const GET_EXCLUSIONS_URL = 'consumers/{tenant}/me/exclusions'; +export const PUT_ALCOHOL_EXCLUSION_URL = 'consumers/{tenant}/me/exclusions/alcohol'; + +export const AUTHORISATION_HEADER_NAME = 'Authorization'; + +export const TENANT_MAP = { + 'en-GB': 'uk', + 'en-AU': 'au', + 'en-NZ': 'nz', + 'da-DK': 'dk', + 'es-ES': 'es', + 'en-IE': 'ie', + 'it-IT': 'it', + 'nb-NO': 'no' +}; diff --git a/packages/components/pages/f-self-exclusion/src/index.js b/packages/components/pages/f-self-exclusion/src/index.js new file mode 100644 index 0000000000..eda1745a74 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/index.js @@ -0,0 +1,35 @@ + +/** + * @overview Fozzie Self Exclusion Component JS Wrapper + * + * @module f-self-exclusion + */ + +// Import vue component +import SelfExclusion from '@/components/SelfExclusion.vue'; + +// Declare install function executed by Vue.use() +export function install (Vue) { + if (install.installed) return; + install.installed = true; + Vue.component('SelfExclusion', SelfExclusion); +} + +// Create module definition for Vue.use() +const plugin = { + install +}; + +// Auto-install when vue is found (eg. in browser via