diff --git a/.eslintrc.js b/.eslintrc.js
index 0061af819..ec597a8df 100644
--- a/.eslintrc.js
+++ b/.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': {
diff --git a/README.md b/README.md
index 23fe962ef..686f7f478 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ To find out more about MediaStore SDK, see:
- node v14.15.0
- react v16.14.0
+
## 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() ? (
-
+
+
+
) : (
)}
@@ -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";
- console.log("success")}
- offerId={"S531234647_PL"}
- availablePaymentMethods={availablePaymentMethods}
- resetPasswordCallback={() => console.log("redirect user to the login page")}
-/>;
+
+ console.log("success")}
+ offerId={"S531234647_PL"}
+ resetPasswordCallback={() => console.log("redirect user to the login page")}
+ />
+;
```
####
MyAccount
@@ -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
-};
-
;
```
-**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";
- console.log("success")}
- availablePaymentMethods={availablePaymentMethods}
-/>;
+
+ console.log("success")} />
+;
```
####
Subscriptions
@@ -530,7 +498,7 @@ const customCancellationReasons = [
;
```
-**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.**
####
PaymentInfo
@@ -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
-};
-
-
+ ;
```
-**All MyAccount components (PlanDetails, PaymentInfo, UpdateProfile, and all inside) require to be wrapped by the store.**
-
####
TransactionList
`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";
;
```
-**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.**
####
UpdateProfile
@@ -622,7 +579,7 @@ import { Provider } from "react-redux";
;
```
-**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.**
####