fix(readme): Init accesstype documentation (#73)

Author: Jeevan-Kishore

README.md

@@ -37,6 +37,7 @@ This is a set of components that is to be used to build a Quintype Node App. Thi
          * [Marquee for Breaking News](#marquee-for-breaking-news)
          * [ReactTable for table story elements](#reacttable-for-table-story-elements)
          * [UpdateOnInterval](#UpdateOnInterval)
+         * [AccessType](#accesstype)
 
 ### BreakingNews
 This component will automatically fetch breaking news every 30 seconds, and render the provided view.
@@ -609,4 +610,99 @@ The story table element renders a very basic table story element. It can be enha
           ({data}) => <Component data={data}></Component>
         }
       </UpdateOnInterval>
- ```
+ ```
+ 
+### AccessType
+
+`AccessType` is a generic connected render prop which exposes methods to handle access to stories / assets and initialize accesstype js
+
+  Name | arguments | Description 
+ --- | --- | --- 
+ `initAccessType`| -NA- | Initializes accesstype, checks for existance of accesstype before requesting for AT js
+ `initRazorPayPayment`| `selectedPlan`(object) | Executes accesstype js method to bring forth RP payment gateway
+ `checkAccess`| `assetId`(string) | Checks if the user has access to the story/asset id passed 
+ `getSubscriptionForUser`| -NA- | Gets the subscriptions of the current logged in user
+ `accessUpdated`| `accessObject`(object) | Sets the current story access to redux store 
+ `accessIsLoading`| `loading`(boolean) | A boolean which holds true between the request for access of a story and its response
+ 
+ 
+ ##### Props
+ 
+   Name | type | isRequired 
+  --- | --- | --- 
+  `children`| `func` | yes
+  `email`| `string` | no
+  `phone`| `number` | no
+  `isStaging`| `boolean` | no
+  `enableAccesstype`| `boolean` | yes
+  `accessTypeKey`| `string` | yes
+ 
+ 
+###### Notes : 
+ 
+    * This component uses AccessType Js internally
+    * It uses the Access API from subtype for metering, the API works on firebase which uses `thinmint` cookie (set by qlitics) of the user to verify and keep track of visits
+    * This component only supports Razorpay payment options for now
+    * It communicates to sketches where routes are in pattern `/api/access/v1/*`
+    * Metered story has a pingback which is achieved by the use of `navigator.sendBeacon` if available or falls back to fetch, this is needed to update the count of the visited stories for a user 
+    * Access to story/asset is saved on the redux store under the keyword access which holds keys as story asset id and the access returned from the API as its value
+    * `subscriptions` is the key in the store under which all the subscription groups created for the specified account are maintained 
+    * `paymentOptions` is the key under the store which has all the payment options created for the current AT account
+    * `selectedPlan` used by `initRazorPayPayment` refers to one of the plan object nested within the subscription groups
+    
+```javascript
+//access object on store
+
+access : {
+  'c1f6c0d7-2829-4d31-b673-58728f944f82': {
+        'data': {
+          'isLoggedIn':true,
+          'granted': false
+          'grantReason': "SUBSCRIBER"
+        }
+    }
+}
+```
+
+
+###### Usage:
+
+```javascript
+import { AccessType } from "@quintype/components";
+
+
+render() {
+  return  <AccessType
+                 enableAccesstype={enableAccesstype}
+                 isStaging={isStaging}
+                 accessTypeKey={accessTypeKey}
+                 email={email}
+                 phone={phone}
+                 disableMetering={disableMetering}
+               >
+                 {({ initAccessType, checkAccess, accessUpdated, accessIsLoading }) => (
+                   <div>
+                     <StoryComponent
+                       accessIsLoading={accessIsLoading}
+                       accessUpdated={accessUpdated}
+                       initAccessType={initAccessType}
+                       checkAccess={checkAccess}
+                       {...this.props}
+                     />
+                   </div>
+                 )}
+               </AccessType>
+}
+
+```
+ 
+ 
+###### Redux notes:
+
+The component dispatches the following actions
+
+* `ACCESS_BEING_LOADED`
+* `ACCESS_UPDATED`
+* `PAYMENT_OPTIONS_UPDATED`
+* `SUBSCRIPTION_GROUP_UPDATED`
+* `METER_UPDATED`