[email protected] (#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 <[email protected]>

* Updated from comments

* skip failing auto-generated tests

* Updated error alert to display GET request error

---------

Co-authored-by: Maxim Vasilev <[email protected]>
Co-authored-by: Panayot Tolev <[email protected]>
Co-authored-by: Ben Siggery <[email protected]>
Co-authored-by: Ashley Watson-Nolan <[email protected]>

packages/components/pages/f-self-exclusion/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

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

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.

packages/components/pages/f-self-exclusion/README.md

@@ -0,0 +1,127 @@
+<div align="center">
+
+# f-self-exclusion
+
+<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />
+
+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.
+
+</div>
+
+---
+
+[![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 [email protected]: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.
+
+

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
+    };
+};

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: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+        '^~include-media/(.*)$': '<rootDir>../../node_modules/include-media/$1',
+        '^~@justeat/(.*)$': '<rootDir>../../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/'
+};

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 <https://github.com/justeat/fozzie-components/graphs/contributors>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]: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"
+  }
+}

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.