From 7d2394bbc90f017d294ec8c825d1760ee50fa97a Mon Sep 17 00:00:00 2001 From: Maxim Vasilev Date: Mon, 18 Sep 2023 11:30:29 +0300 Subject: [PATCH 01/30] Added Self-Exclusion Page --- .../pages/f-self-exclusion/.eslintignore | 2 + .../pages/f-self-exclusion/CHANGELOG.md | 13 + .../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 | 41 +++ .../pages/f-self-exclusion/package.json | 52 ++++ .../src/assets/scss/common.scss | 1 + .../src/components/SelfExclusion.vue | 248 ++++++++++++++++++ .../components/_tests/SelfExclusion.test.js | 10 + .../pages/f-self-exclusion/src/index.js | 35 +++ .../f-self-exclusion/src/tenants/en-AU.js | 4 + .../f-self-exclusion/src/tenants/en-GB.js | 4 + .../f-self-exclusion/src/tenants/en-IE.js | 4 + .../f-self-exclusion/src/tenants/en-NZ.js | 4 + .../f-self-exclusion/src/tenants/es-ES.js | 4 + .../f-self-exclusion/src/tenants/index.js | 17 ++ .../f-self-exclusion/src/tenants/it-IT.js | 4 + .../stories/SelfExclusion.stories.js | 31 +++ .../test-utils/component-objects/README.md | 13 + .../f-self-exclusion.component.js | 9 + .../accessibility/axe-accessibility.spec.js | 12 + .../pages/f-self-exclusion/vue.config.js | 23 ++ 23 files changed, 701 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/index.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/stories/SelfExclusion.stories.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/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..f338b18422 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/CHANGELOG.md @@ -0,0 +1,13 @@ +# 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 +------------------------------ +*August 15, 2023* + +### Added +- Add your change under the following headings: `Added`/`Changed`/`Deprecated`/`Removed`/`Fixed`/`Security` +!!! Please, add your component to `.circleci/config.yml` under `save_cache_dist_directories` manually after the component is generated. 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..2f8672314a --- /dev/null +++ b/packages/components/pages/f-self-exclusion/jest.config.js @@ -0,0 +1,41 @@ +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: [ + + ], + + 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..1505488001 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/package.json @@ -0,0 +1,52 @@ +{ + "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": "0.1.0", + "main": "dist/f-self-exclusion.umd.min.js", + "files": [ + "dist" + ], + "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", + "ci:test:pages": "yarn test", + "test-a11y:chrome": "cross-env-shell TEST_TYPE=a11y wdio ../../../../wdio-chrome.conf.js" + }, + "browserslist": [ + "extends @justeat/browserslist-config-fozzie" + ], + "dependencies": { + "@justeat/f-services": "1.x" + }, + "peerDependencies": { + "@justeat/browserslist-config-fozzie": ">=1.2.0" + }, + "devDependencies": { + } +} \ No newline at end of file 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..edea3d6a38 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/components/SelfExclusion.vue @@ -0,0 +1,248 @@ + + + + + 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..3c46a70e46 --- /dev/null +++ b/packages/components/pages/f-self-exclusion/src/components/_tests/SelfExclusion.test.js @@ -0,0 +1,10 @@ +import { shallowMount } from '@vue/test-utils'; +import SelfExclusion from '../SelfExclusion.vue'; + +describe('SelfExclusion', () => { + it('should be defined', () => { + const propsData = {}; + const wrapper = shallowMount(SelfExclusion, { propsData }); + expect(wrapper.exists()).toBe(true); + }); +}); 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