Adyen upgrade (#108)

* create payment session and point to new initial payment endpoint

* Refactor payment and adyen components

* add refactored Payment component

* Add selectPaymentMethod

* style adyen

* add style for paypal

* fix text in paypal component

* Extract DropInSection component and clean code

* fix props

* set confirmation button text for paypal

* chang p to div in DropInSection

* init update payment detail integration

* update package-lock to build a package

* upgrade Adyen package, pass returnUrl during initial payment

* Refactor adyen and paypal flow

* update lock file

* set default payment method if more than one

* remove yalc files.

* Add log statement

* add setValidPaymentMethod fn after fetch payment methods

* hide paypal until adyen is not loaded.

* init 3ds

* hardcode applepay configuration object

* pass orderId for create payment session

* pass payment methods to Adyen config

* fix payment method response

* Apple pay and Google pay integration (#111)

* adjust styles (#113)

* fix custom classes names (#114)

* [MSSDK-1109] - refactor by useing redux and thunks in checkout compon… (#112)

* [MSSDK-1109] - refactor by useing redux and thunks in checkout components wip

* [MSSDK-1109] - remove unused

* small fixes after testing

* [MSSDK-1109] - fix multi api calls, coupon apply

* [MSSDK-1109] - remove unused props

* [MSSDK-1109] - remove unused props and add errors handlers

* [MSSDK-1109] - simplify import path

* [MSSDK-1109] - simplify import path and use currency from order

* [MSSDK-1109] - apply review comments

* sonarcloud fixes

* [MSSDK-1109] - fix response key for submitPaymentWithoutDetails

* [MSSDK-1109] - simplify generateDesc foo.

* [MSSDK-1109] - dd useCallback

* simplify generateDescription function

* fix currency in the checkout

* [MSSDK-1109] - improve error handling

* [MSSDK-1109] - remove destructuring

* [MSSDK-1109] - check if error after fetchOffer

* get couponDetails from store

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>

* remove support for default payment method (#115)

* init update payment details

* fix input styling (#116)

* MSSDK-1105 initial payment error handling (#118)

* init

* handle errors from initial payments

* fix error message margin

* [MSSDK-1109] - error handling improve (#117)

* [MSSDK-1109] - error handling improve

* [MSSDK-1109] - error handling improve clean mess ;)

* [MSSDK-1109] - fix order reuse scenario

* [MSSDK-1109] - fix coupon in MyAccount

* [MSSDK-1109] - fix add labeling and translations to CouponInput

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>

* present offer currency in offer description box (#121)

* add labeling to LegalNotes

* [MSSDK-1154] - fix dependency cycle problem (#122)

* [MSSDK-1154] - fix dependency cycle problem

* [MSSDK-1154] - remove unused function

* [MSSDK-1154] - remove istanbul ignore file

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>

* MSSDK 1111 add payment details (#119)

* fix style and add dev plan

* init documentation changes

* partial

* refactor checkout component and payment methods

* refactor payment methods and update payment details

* add adyen card details - working version

* remove consolelogs

* add error page and button loader

* [MSSDK-1154/1158] - refactor updateOrder to use redux and revert dep cycle (#123)

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>

* handle add paypal payment details

* pass empty obj to applepay config obj - my account

* pass merchantName to applepay

* pass merchantName to googlepay

* unblock applepay

* remove big, use payment session response in adyen configuration

* update lock file

* test paymentMethods

* test passing apple pay merchanyId

* remove comment

* prevent app fail when there is no paymentMethods from create payment session response

* add console log

* fix config obj

* small fixes

* uat fixes + buttons for each payment methods

* adjust pay buttons

* ignore errors from getOrder

* refactor myaccount

* resolve TODOs and eslint issues

* style Pay buttons

* remove unused image

* fix paypal width on mobile

* update PayPal icon

Co-authored-by: jkorczakcleeng <117813419+jkorczakcleeng@users.noreply.github.com>
Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>

* fine tunes

* fix - offerId in OfferContainer component by passing offerId through props. (#124)

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>

* fix inputs border in login and registration forms (#126)

* prevent payment form fail when payment method is switched off in adyen (#125)

* open first payment method by default only on desktop (#127)

* fix - paypal (#128)

* fix - paypal

* fix paypal and free offer

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>
Co-authored-by: Iwona Kulacz <ikulacz@cleeng.com>

* fix apple pay payment

Co-authored-by: Jakub Korczak <jakub.korczak@tsh.io>
Co-authored-by: jkorczakcleeng <117813419+jkorczakcleeng@users.noreply.github.com>

.eslintrc.js

@@ -22,7 +22,9 @@ module.exports = {
   plugins: ['react'],
   rules: {
     'prettier/prettier': ['error', { singleQuote: true, endOfLine: 'auto' }],
-    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }]
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
+    'import/no-cycle': 'off', // TODO: remove after clean localstorage
+    'react/forbid-prop-types': 'off' // TODO: remove after moving to redux
   },
   settings: {
     'import/resolver': {

README.md

@@ -13,6 +13,7 @@ To find out more about MediaStore SDK, see:
 
 - node v14.15.0
 - react v16.14.0
+  <!-- TODO: validate these Prerequisites -->
 
 ## Installation
 
@@ -67,6 +68,8 @@ Setting the environment is required for all components. The environment is one o
 - `sandbox` (default)
 - `production`
 
+**Each component needs to be wrapper into Provider, as in the example below.**
+
 ##### Other Config methods
 
 ```javascript
@@ -102,7 +105,8 @@ Auth.logout(clb); // removes all Cleeng data from local storage and redux. clb -
 
 ```javascript
 import { useEffect } from 'react';
-import { Config, Purchase, Auth } from '@cleeng/mediastore-sdk';
+import { Config, Purchase, Auth, store  } from '@cleeng/mediastore-sdk';
+import { Provider } from "react-redux";
 
 export default function Home() {
   Config.setEnvironment("sandbox");
@@ -117,7 +121,9 @@ export default function Home() {
   return (
     <>
      {Auth.isLogged() ? (
-        <Purchase offerId="S222222222_US"/>
+        <Provider store={store}>
+          <Purchase offerId="S222222222_US"/>
+        </Provider>
       ) : (
         <YourCustomLogin>
       )}
@@ -180,32 +186,21 @@ Config.setCheckoutPayPalUrls({
 
 - `offerId` \* - ID of Cleeng offer, for which Checkout component should be opened. Accepts `offerId` with or without the country suffix, eg. `S531234647_PL`, `S531234647`.
 - `onSuccess` - function called after a successful checkout process.
-- `availablePaymentMethods` - array of the available payment methods. If provided, call for payment-methods will be skipped. Every payment method object should have `id`, `methodName` and `paymentGateway`. Payment method can be selected as a default by adding default property.
 - `resetPasswordCallback` - function called after a successful reset password request, when user clicks 'Go back to the login page'
 
 **Usage**
 
 ```javascript
-const availablePaymentMethods = [
-  {
-    id: 142029029,
-    methodName: "card",
-    paymentGateway: "adyen",
-    default: true
-  },
-  {
-    id: 153379135,
-    methodName: "paypal",
-    paymentGateway: "paypal"
-  }
-];
+import { Checkout, store } from "@cleeng/mediastore-sdk";
+import { Provider } from "react-redux";
 
-<Checkout
-  onSuccess={() => console.log("success")}
-  offerId={"S531234647_PL"}
-  availablePaymentMethods={availablePaymentMethods}
-  resetPasswordCallback={() => console.log("redirect user to the login page")}
-/>;
+<Provider store={store}>
+  <Checkout
+    onSuccess={() => console.log("success")}
+    offerId={"S531234647_PL"}
+    resetPasswordCallback={() => console.log("redirect user to the login page")}
+  />
+</Provider>;
 ```
 
 #### <a id="my-account-header"></a><h2 align="center">MyAccount</h2>
@@ -234,7 +229,6 @@ Config.setMyAccountPayPalUrls({
 **Props**
 
 - `customCancellationReasons` - array of the custom cancellation reasons. List of that reasons will be displayed on unsubscribe popup. The provided cancellation reasons will replace our default ones. Every cancellation reason should have key and value.
-- `availablePaymentMethodIds` - object of the available payment methods IDs. If provided, call for payment-methods will be skipped (used in 'Edit payment method' section). Object properties should have a payment gateway name as a key, and a paymentMethodId as a value.
 - `skipAvailableDowngradesStep` - an optional parameter that can be used to skip available downgrades step in the unsubscribe process.
 
 **Usage sample**
@@ -248,22 +242,14 @@ const customCancellationReasons = [
   { value: "Switch to a different service", key: "service" }
 ];
 
-const availablePaymentMethodIds = {
-  adyen: 142029029,
-  paypal: 153379135
-};
-
 <Provider store={store}>
   <MyAccount
     customCancellationReasons={customCancellationReasons}
-    availablePaymentMethodIds={availablePaymentMethodIds}
     skipAvailableDowngradesStep
   />
 </Provider>;
 ```
 
-**All MyAccount components (PlanDetails, PaymentInfo, UpdateProfile, and all inside) require to be wrapped by the store.**
-
 **Server-side rendering**
 This component should be rendered in the browser. Sample of usage with **NextJS**
 
@@ -381,10 +367,7 @@ Config.setPublisher("111111111"); // required
 **Props**
 
 - `offerId` \* - ID of Cleeng offer, for which Purchase component should be opened. If not provided, it will use the item from local storage with name 'CLEENG_OFFER_ID'
-- `onSuccess` - function called after a successful payment process
-- `availablePaymentMethods` - array of the available payment methods. If provided, call for payment-methods will be skipped. Every payment method object should have `id`, `methodName` and `paymentGateway`. Payment method can be selected as a default by adding default property.
-
-\* - required
+- `onSuccess` - function called after a successful payment process \* - required
 
 **Config methods**
 
@@ -403,27 +386,12 @@ Config.setCheckoutPayPalUrls({
 **Usage sample**
 
 ```javascript
-import { Config, Purchase } from "@cleeng/mediastore-sdk";
-
-const availablePaymentMethods = [
-  {
-    id: 142029029,
-    methodName: "card",
-    paymentGateway: "adyen",
-    default: true
-  },
-  {
-    id: 153379135,
-    methodName: "paypal",
-    paymentGateway: "paypal"
-  }
-];
+import { Purchase, Config, store } from "@cleeng/mediastore-sdk";
+import { Provider } from "react-redux";
 
-<Purchase
-  offerId="S538257415_PL"
-  onSuccess={() => console.log("success")}
-  availablePaymentMethods={availablePaymentMethods}
-/>;
+<Provider store={store}>
+  <Purchase offerId="S538257415_PL" onSuccess={() => console.log("success")} />
+</Provider>;
 ```
 
 #### <a id="subscriptions-header"></a><h2 align="center">Subscriptions</h2>
@@ -530,7 +498,7 @@ const customCancellationReasons = [
 </Provider>;
 ```
 
-**All MyAccount components (PlanDetails, PaymentInfo, UpdateProfile, and all inside) require to be wrapped by the store.**
+**All components require to be wrapped by the store.**
 
 #### <a id="payment-info-header"></a><h2 align="center">PaymentInfo</h2>
 
@@ -552,28 +520,17 @@ Config.setMyAccountPayPalUrls({
 });
 ```
 
-**Props**
-
-- `availablePaymentMethodIds` - object of the available payment methods IDs. If provided, call for payment-methods will be skipped (used in 'Edit payment method' section). Object properties should have a payment gateway name as a key, and a paymentMethodId as a value.
-
 **Usage sample**
 
 ```javascript
 import { PaymentInfo, store } from "@cleeng/mediastore-sdk";
 import { Provider } from "react-redux";
 
-const availablePaymentMethodIds = {
-  adyen: 142029029,
-  paypal: 153379135
-};
-
 <Provider store={store}>
-  <PaymentInfo availablePaymentMethodIds={availablePaymentMethodIds} />
+  <PaymentInfo />
 </Provider>;
 ```
 
-**All MyAccount components (PlanDetails, PaymentInfo, UpdateProfile, and all inside) require to be wrapped by the store.**
-
 #### <a id="transaction-list-header"></a><h2 align="center">TransactionList</h2>
 
 `TransactionList` is a part of the `PaymentInfo` component and contains only information about all transactions that took place in the past.
@@ -596,7 +553,7 @@ import { Provider } from "react-redux";
 </Provider>;
 ```
 
-**All MyAccount components (PlanDetails, PaymentInfo, UpdateProfile, and all inside) require to be wrapped by the store.**
+**All components require to be wrapped by the store.**
 
 #### <a id="update-profile-header"></a><h2 align="center">UpdateProfile</h2>
 
@@ -622,7 +579,7 @@ import { Provider } from "react-redux";
 </Provider>;
 ```
 
-**All MyAccount components (PlanDetails, PaymentInfo, UpdateProfile, and all inside) require to be wrapped by the store.**
+**All components require to be wrapped by the store.**
 
 #### <a id="checkout-consents-header"></a><h2 align="center">CheckoutConsents</h2>