2.0.0

.gitlab-ci.yml

@@ -8,7 +8,8 @@ build_staging:
   stage: build
   image: node:8.15-jessie
   script:
-    - cp /home/cleeng-ci/config/gummybear-2/staging.js ./config/environments/staging.js
+    - apt-get update && apt-get install -yq gettext-base
+    - envsubst < ./config/environments/staging.tpl.js > ./config/environments/staging.js
     - yarn && yarn build --environment=staging
     - STORYBOOK_ENV=staging yarn build-storybook
     - mv storybook-static build
@@ -25,7 +26,7 @@ build_staging:
   except:
     - master
   tags:
-    - test
+    - aws-runner
 
 test:
   stage: test
@@ -38,7 +39,7 @@ test:
   only:
     - branches
   tags:
-    - test
+    - aws-runner
   artifacts:
     paths:
       - coverage
@@ -53,7 +54,7 @@ deploy_staging:
   only:
     - stage
   tags:
-    - staging
+    - aws-runner
 
 build_production:
   stage: build
@@ -71,16 +72,16 @@ build_production:
   only:
     - master
   tags:
-    - test
+    - aws-runner
 
 deploy_production:
   stage: deploy
   image: python:latest
   script:
     - pip install awscli
     - cd build
-    - aws s3 cp ./ s3://webstoresdk-demo.cleeng.com/ --recursive
+    - aws s3 cp ./ s3://mediastoresdk-demo.cleeng.com/ --recursive
   only:
     - master
   tags:
-    - staging
+    - aws-runner

README.md

@@ -1,116 +1,174 @@
-# Web Store SDK
+# Installation
 
-A best practices checkout example using Cleeng API. Webstore SDK consists of components that will empower you to build and design a seamless checkout process and help visitors become subscribers to your service in an intuitive and trusted manner.
+MediaStore SDK repo is marked as a template so you can easily move it directly to your GitHub account. Just use `Use this template` option.
 
-This repo contains an example app as a set of instructions and code snippets for the web to help implement tailored and custom checkout.
+<div style="display: flex; align-items: center; flex-direction: column">
+  <img src="src/assets/images/readme/use_template.png" style="margin: 20px auto;" alt="Use template button"/>
+  <img src="src/assets/images/readme/create_repo.png" style="margin: 20px auto;" alt="Create repo"/>
+</div>
 
-To check Cleeng API documentation, visit [Cleeng Developers](https://developers.cleeng.com/reference).
+Upon creating the repository, please proceed with the below steps
 
-It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+1. Clone repo to your pc (use the link from your GitHub if you used a template)
 
-## Features
+`git clone https://github.com/Cleeng/media-store-sdk`
 
-This ultimate checkout application is implemented as a full flow for a user, with payment by card (with Adyen). This payment method can be replaced by others. Our checkout flow contains 3 main blocks:
+2. Go to the repo (name can be changed if you use a template)
 
-1. Authentication - login form, the registration form (with consents approval) and ability to reset a password
-2. Offer/Product display - offer details display with information about the trial, coupon codes application and price breakdown
-3. Payment - dynamically loaded payment methods with Adyen integration (as an example payment integration) and thank you page after successful offer purchase
+`cd media-store-sdk`
 
-### Architecture overview
+3. Install packages with yarn
 
-This is the Frontend application build with React. It was bootstraped with Create React App. We are using webpack to build it, Jest and Enzyme for testing, Styled Components for styles.
+`yarn install`
 
-This application is communicating with the backend REST API. All methods available can be found <a href="https://developers.cleeng.com/tutorials/webstore-sdk#5-api-methods-used"> here</a>.
+4. Create a script `development.js` in `config/environments` containing setups for the development environment.
 
-To authenticate - we are using JWT with the payload containing customer id and publisher id.
+Here is an example of a file to connect to the sandbox. You can use it for your development.
 
-Offer id can be passed to the app in 2 ways:
+```
+module.exports = {
+  ENVIRONMENT_CONFIGURATION: {
+    API_URL: JSON.stringify('https://mediastore-sandbox.cleeng.com'),
+    ADYEN_CLIENT_KEY: JSON.stringify('test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K'), //write to BSS team to add your origin to the whitelist
+  }
+};
+```
 
-- In URL as a param `?offer=S1234567` and this is the most important one
-- In local storage as `CLEENG_OFFER_ID`
+All the configs defined in `config/environments` can be accessed in code via a global ENVIRONMENT_CONFIGURATION constant.
 
-Publisher id can be passed to the app in 2 ways:
+To select a specific environment for a run or build, use the `--environment` flag, e.g. `yarn start --environment=production`.
 
-- In URL as a param `?publisher=123456789` and this is the most important one
-- In local storage as `CLEENG_PUBLISHER_ID`
+Scripts containing setups are in `js` format.
 
-Publisher id is required to fetch consents on registration page.
+<table>
+<tr>
+    <th>Configuration</th>
+    <th>Description</th>
+</tr>
+<tr><td>API_URL</td><td>identifies the host of REST API</td></tr>
+<tr><td>ADYEN_CLIENT_KEY</td>
+  <td>
+    identifies Adyen's Client Key. It’s a Cleeng key, which allows you to use Adyen enpoint (when Cleeng is MoR). To use it we need to add your origin to allowed ones. Values:
+    testing `test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K`,
+    production `live_BQDOFBYTGZB3XKF62GBYSLPUJ4YW2TPL`
+  </td></tr>
+</table>
 
-### Environments
+5. Runs the app in the development mode, using
 
-Scripts containing setups for specific environments are in `config/environments` folder.
+`yarn start`
 
-All the configs defined there can be accessed in code via a global `ENVIRONMENT_CONFIGURATION` constant.
+Open `http://localhost:3003` to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.
 
-To select a specific environment for run or build, use the `--environment` flag, e.g. `yarn start --environment=production`.
+That’s it! Your MediaStore SDK app is running locally.
 
-Scripts containing setups are in js format. `staging.js` and `development.js` files are not committed and is ignored via `.gitignore`. You will need to create local file and set some variables within it.
+Below you can find a list with available scripts.
 
-Here's an example `production.js` file:
+<table>
+<tr>
+    <th>Command</th>
+    <th>Description</th>
+</tr>
+<tr><td>yarn build</td>
+<td>Builds the app for production to the build folder.
+  It correctly bundles React in production mode and optimizes the build for the best performance.
+  The build is minified and the filenames include the hashes.
+  Your app is ready to be deployed!
+  See the section about <a href="https://create-react-app.dev/docs/deployment/" target="_blank">deployment</a> for more information.
+  </td></tr>
+<tr><td>yarn test</td>
+  <td>
+   Launches the test runner in the interactive watch mode.
+    See the section about <a href="https://create-react-app.dev/docs/running-tests/" target="_blank">running</a> tests for more information.
+  </td></tr>
+<tr><td>yarn storybook</td>
+  <td>
+  Launches the storybooks locally on the localhost:6006 port 
+  On staging, the storybook is available on <a href="https://gummybear-staging.cleeng.com/storybook-static">https://gummybear-staging.cleeng.com/storybook-static</a>
+  </td></tr>
+</table>
 
-```
-module.exports = {
-  ENVIRONMENT_CONFIGURATION: {
-    GB_API_URL: JSON.stringify(
-      'https://hc0f1jaa70.execute-api.eu-west-1.amazonaws.com/staging'
-    ),
-    ADYEN_PUBLIC_KEY: {
-      'https://example.cleeng.com': JSON.stringify('pub.v2.xxx')
-    },
-    WEB_API: JSON.stringify('https://cleeng.com')
-  }
-};
-```
+# Project overview
+
+## MediaStore SDK
+
+MediaStore SDK includes a best practice <b>checkout</b> and <b>myAccount</b> example using Cleeng API. MediaStore SDK consists of components that will empower you to build and design a seamless checkout process and help visitors become subscribers and then to manage their subscription to your service in an intuitive and trusted manner.
+
+This repo is an example app as a set of instructions and code snippets for the web to help implement tailored and custom checkout.
+
+It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+Check the demo [here](https://mediastoresdk-demo.cleeng.com/login?offer=S817681481_PL&publisher=933103327).
 
-- **GB_API_URL** identifies the host of REST API
-- **WEB_API** identifies the host of the Cleeng Web API
-- **ADYEN_PUBLIC_KEY** identifies Adyen's Public Key, you can find out more below.
+## Features
+
+### User Account
+
+1. Authentication - login form, the registration form (with consents approval) and ability to reset a password
+
+### Checkout
+
+This ultimate checkout application is implemented as a full flow for a user, with payment by card possible through Adyen and PayPal v1. These payment methods can be replaced by others.
+
+1. Offer/Product display - offer details display with information about the trial, coupon codes application and price breakdown
+
+2. Payment - dynamically loaded payment methods with <b>Adyen and PayPal v1 integration</b> (as an example payment integration) and thank you page after successful offer purchase
+
+### MyAccount
+
+MyAccount part is a solution for customers to manage their subscriptions. It is divided into 3 blocks with the following features:
+
+1. Plan details
 
-### Adyen Public Keys
+a. details about the current plans with the option to unsubscribe or resubscribe
 
-Each origin (protocol + domain + port) requires a specific Adyen public key. In case of development environment there are 2 different origins possible for debugging as application and as storybook. Therefore, the `ADYEN_PUBLIC_KEY` should be a map from every origin possible in the given environment to an appropriate key.
+2. Payment info
 
-### Translations system
+a. information about the current payment method
 
-We provide full flexibility to adjust messaging in the checkout process. All the content in the checkout pages can be translated into 28 languages, but these translations can also be overwritten if you choose so.
+b. list of transactions
 
-Translations are done on react-i18n library, without backend-side features. Therefore the translations bundle for every language is done on build or start dev server. It's always available under URL (domain_name)/locales/(language_code)/translations.json.<br>
+3. Update profile
 
-The translations file for language merge content of any JSON files in the folder /translations/(language_code), and because of it folders name for languages and code of languages declared in i18n init needs to be consistent.<br>
+a. update name, last name, and email
 
-To connect new page in router with translations, it's important to use both withTranslations() and labeling() higher order components. Labeling is a custom method that dynamically loading translations bundle from public folder for chosen language if bundle not already loaded. You can change language using [languageDetector](https://github.com/i18next/i18next-browser-languageDetector)<br>
+b. change password
 
-## Available Scripts
+c. consents management
 
-In the project directory, you can run:
+## Architecture overview
 
-### `yarn start`
+MediaStore SDK is a Frontend application build with React. It was bootstrapped with Create React App. We are using a webpack to build it, Jest, and Enzyme for testing, Styled Components for styles.
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3003](http://localhost:3003) to view it in the browser.
+This application is communicating with the backend REST API. All methods available can be found [here](https://developers.apidoc.cleeng.com/reference/getting-started).
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+<b>The app requires few params to working properly. </b>
 
-### `yarn test`
+To enable login action pass `offerId` to the app. Login is also possible using `publisherId`, but in the sample app, we use `offerId`. You can pass it in two ways:
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+In URL as a param `?offer=S1234567` and this is the most important one
 
-### `yarn storybook`
+In local storage as `CLEENG_OFFER_ID`
 
-Launches the storybooks locally on the localhost:6006 port <br>
-On staging storybook will be available on [https://gummybear-staging.cleeng.com/storybook-static](https://gummybear-staging.cleeng.com/storybook-static)
+To enable registration, pass `publisherId` which is required to fetch terms and conditions.
 
-### `yarn build`
+Similarly, `publisherId` can be passed to the app in 2 ways:
 
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
+In URL as a param `?publisher=123456789` and this is the most important one
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+In local storage as `CLEENG_PUBLISHER_ID`
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## Authentication
+
+To authenticate - we are using JWT with the payload containing `customerId`, `publisherId`, and `expiration date`. You can decode JWT using packages like [`jwt-decode`](https://www.npmjs.com/package/jwt-decode) or if you want only check it use online decoder [jwt.io](https://jwt.io/).
+
+JWT is valid for 30 minutes and after it, the customer is logged out.
+
+JWT is required for the most of API calls. It is returned after successful login and registration requests.
+
+## Translations
+
+We provide full flexibility to adjust messaging in the checkout process and the myAccount app. All the content in the MediaStore pages can be translated into 28 languages, but these translations can also be overwritten if you choose so.
 
 ## Style Guide
 
@@ -128,7 +186,17 @@ Keep CSS props in the following order, with empty newlines between sections:
 - Typography Properties (font-size, font-family, text-align, text-transform)
 - Misc Properties (cursor, overflow, z-index)
 
-## Learn More
+## MediaStore SDK tutorial
+
+Check the [full tutorial](https://developers.apidoc.cleeng.com/docs) for a better understanding of the product, architecture, and functionality.
+
+## API reference
+
+[Here](https://developers.apidoc.cleeng.com/reference/getting-started) is a link to API reference.
+
+## Useful links
+
+### Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
@@ -160,4 +228,4 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/tr
 
 # License
 
-The Cleeng Web Store SDK is open source and available under the BSD 3-Clause License. See the [LICENSE](LICENSE.md) file for more info.
+The Cleeng Media Store SDK is open source and available under the BSD 3-Clause License. See the [LICENSE](LICENSE.md) file for more info.

config/environments/production.js

@@ -1,11 +1,6 @@
 module.exports = {
   ENVIRONMENT_CONFIGURATION: {
-    GB_API_URL: JSON.stringify('https://connect-sandbox.cleeng.com'),
-    ADYEN_PUBLIC_KEY: {
-      'https://webstoresdk-demo.cleeng.com': JSON.stringify(
-        'pub.v2.7814375173870120.aHR0cHM6Ly93ZWJzdG9yZXNkay1kZW1vLmNsZWVuZy5jb20.dNb3eHo2bbrSZv_j36_TT1EiKr_X2p1SjAXkCaoOKWc'
-      )
-    },
-    WEB_API: JSON.stringify('https://sandbox.cleeng.com')
+    API_URL: JSON.stringify('https://mediastore.cleeng.com'),
+    ADYEN_CLIENT_KEY: JSON.stringify('live_BQDOFBYTGZB3XKF62GBYSLPUJ4YW2TPL')
   }
 };

config/environments/staging.tpl.js

@@ -0,0 +1,6 @@
+module.exports = {
+  ENVIRONMENT_CONFIGURATION: {
+    API_URL: JSON.stringify('$STAGING_API_URL'),
+    ADYEN_CLIENT_KEY: JSON.stringify('$STAGING_ADYEN_CLIENT_KEY')
+  }
+};

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "webstoresdk",
+  "name": "mediastoresdk",
   "version": "1.0.0",
   "private": true,
   "dependencies": {
@@ -59,7 +59,6 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-dev-utils": "^9.0.3",
     "react-dom": "^16.9.0",
-    "react-google-recaptcha": "^2.0.1",
     "react-i18next": "^10.12.5",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.0.1",

src/api/Auth/loginCustomer.js

@@ -1,5 +1,7 @@
-const loginCustomer = async (email, password, loginBy, captcha) => {
-  const url = `${ENVIRONMENT_CONFIGURATION.GB_API_URL}/auths`;
+import { sendMessage } from 'util/appConfigHelper';
+
+const loginCustomer = async (email, password, loginBy) => {
+  const url = `${ENVIRONMENT_CONFIGURATION.API_URL}/auths`;
 
   try {
     const resp = await fetch(url, {
@@ -11,11 +13,13 @@ const loginCustomer = async (email, password, loginBy, captcha) => {
       body: JSON.stringify({
         email,
         password,
-        ...loginBy,
-        captcha
+        ...loginBy
       })
     });
     const json = await resp.json();
+    sendMessage({
+      ...json.responseData
+    });
     return {
       status: resp.status,
       ...json