@thanksjs/react-native-webview 0.0.1-beta.0 → 0.0.1-beta.1

package/README.md

@@ -1,7 +1,9 @@
 Thanks JS react native adapter
-
 ===
-
+[ThanksJS React-Native](https://www.npmjs.com/package/@thanksjs/react-native-webview)
+| [ThanksJS React](https://www.npmjs.com/package/@thanksjs/react)
+| [ThanksJS Web](https://www.npmjs.com/package/@thanksjs/web)
+| [Integration Examples](https://github.com/thanksad/Thanks-examples)
 ## Installation
 
 ```bash
@@ -19,6 +21,7 @@ import { ThanksWidget } from '@thanksjs/react-native-webview';
   // other available props, see Thanks Configuration section
 />
 ```
+It's all comes with TypeScript support, dont worry.
 
 ### Advanced usage
 The important parts are:
@@ -74,5 +77,40 @@ Example
 />;
 ```
 
+## Managing Personal Information
+By default, Thanks Widget does not send any personal information.
+The `email` specified in configuration is always converted into sha256 `emailHash` before being sent to server.
+All other extended information provided is used only to improve the efficiency of the widget and is not stored unless user performs an action.
+In such case the information will kept until the action is settled, but no longer than 60 days.
+
+However, there are situations when we need Partner to provide Personal Information:
+- to improve our communications and send email notification to the user following their actions
+- prefill a form with user's data to ease their interactions
+
+In both case we are going to call `onPersonalInformationRequest` function with `subject` and `info` arguments.
+Depending on request you may decide to return some information, or return nothing.
+```tsx
+onPersonalInformationRequest: (subject:'notification' | 'autofill', info) => {
+  return {
+    email,
+    firstName: 'TestUser',
+  };
+}
+```
+- subject of type `notification` will be used to send email notification to the user about the action just taken, for example coupon code they just claimed
+- subject of type `autofill` will be used to prefill a form with user's data, making the subscription process friction less
+
+In case of `onPersonalInformationRequest` is not defined, but `email` is provided as a part of configuraiton - nothing will happen.
+The process of capturing PII information is always in the Partners hands.
+
+💡It's not always known upfront if PII is required, so `onPersonalInformationRequest` will be called more often than PII information is being "consumed".
+In case it was not required, the information will be discarded.
+
+### Using PII information for Promotions
+While not every Ad requires PII, some Ads can have a "Promotion" attached to them,
+for example "Subscribe to XYZ newsletter to enter the draw".
+In case of user action PII information might not be used by a particular Ad, but will be used by Promotion to keep track of participation.
+The information will be redacted after the Promotion ends.
+
 # License
 MIT

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-var W="INIT_TUNNEL",k="TUNNEL_READY",E="rocket-seed";var w=e=>typeof e=="object"&&"seed"in e&&e.seed===E&&"cmd"in e?e:{error:!0},D=(e,r)=>({cmd:e,payload:r,seed:E}),M=(e,r,t)=>{(e[r]||[]).forEach(o=>o(t))};var v=(e,r)=>{let t={},o=!1,c=n=>{let{cmd:i,payload:a,error:d}=w(n);d?console.log("error decoding event",n,d):M(t,i,a)};return{on(n,i){(t[n]=t[n]||[]).push(i)},isReady(){return o},pushMessage:n=>{let{cmd:i,payload:a,error:d}=w(n);if(o){c(n);return}!d&&i===W&&a===e&&(o=!0,M(t,k,void 0))},send(n,i){if(!o)throw new Error("trying to `send` into non initialized tunnel");r(D(n,i))}}};var U=e=>{let r=Object.entries(e).filter(([t,o])=>!!o);return Object.fromEntries(r)},_=(e,r={})=>{let t={...r};return t.__forceAd=e.__forceAd,t.impressionId=e.impressionId,new URLSearchParams(U(t)).toString()},A=(e="production")=>e==="development"?"http://localhost:8081/":e==="staging"?"https://thanksad.dev/":"https://thanks.is/";var R={["xs"]:360,["sm"]:768,["md"]:1024,["lg"]:1200,["xl"]:1350};var V=()=>typeof window>"u"||window.innerWidth>=R.sm?"desktop":"mobile";var j=e=>Array.from(new Uint8Array(e)).map(r=>r.toString(16).padStart(2,"0")).join("");var N=async e=>{if(!e)return;let r=new TextEncoder().encode(e);return j(await crypto.subtle.digest("SHA-256",r))};var B=async(e,r)=>{let t=e?await(typeof e=="function"?e({encode:N}):N(e)):"";return Object.assign({sha256:t},r)};var G=async e=>{let{partnerId:r,email:t,userId:o,traceId:c=o,keywords:p,items:n,flags:i={},style:a}=e,{switches:d,...x}=i,l=(await B(t,e.emailHash)).sha256;return _(x,{partnerId:r,emailHash:l,traceId:c,deviceMode:V(),keywords:p?p.join(","):void 0,items:JSON.stringify(n),embedTheme:a?.embed?.theme})},S=async(e,r)=>`${A(r)}?${await G(e)}`;import{useCallback as C,useEffect as I,useRef as xe,useState as b}from"react";import{Modal as Ce,Linking as be}from"react-native";import{WebView as Ee}from"react-native-webview";import{View as K,Modal as Z}from"react-native";import Te from"react-native-webview";import{Text as J,View as Y,TouchableOpacity as Q}from"react-native";var O=({onBack:e})=><Y style={{height:150,justifyContent:"center",alignItems:"flex-end",backgroundColor:"#000",width:"100%"}}><Q onPress={e}><J style={{color:"#FFF"}}>Close</J></Q></Y>;import{Component as X}from"react";var T=class extends X{state={error:null};static getDerivedStateFromError(r){return{error:r}}componentDidCatch(r,t){this.props.onError(r,t.componentStack)}render(){return this.state.error?null:this.props.children}};var L=({uri:e,onClose:r})=><T onError={r}><Z animationType="slide"onRequestClose={r}><K style={{flex:1,justifyContent:"center",alignItems:"center",display:"flex",flexDirection:"column"}}><O onBack={r}/><Te source={{uri:e}}onError={t=>{console.error("visible page error",t),r()}}onContentProcessDidTerminate={t=>{console.error("visible page terminate",t),r()}}onRenderProcessGone={t=>{console.error("visible render gone",t),r()}}style={{flex:1}}/><O onBack={r}/></K></Z></T>;var we=`
+var W="INIT_TUNNEL",k="TUNNEL_READY",E="rocket-seed";var w=e=>typeof e=="object"&&"seed"in e&&e.seed===E&&"cmd"in e?e:{error:!0},D=(e,r)=>({cmd:e,payload:r,seed:E}),M=(e,r,t)=>{(e[r]||[]).forEach(o=>o(t))};var v=(e,r)=>{let t={},o=!1,c=n=>{let{cmd:i,payload:a,error:d}=w(n);d?console.log("error decoding event",n,d):M(t,i,a)};return{on(n,i){(t[n]=t[n]||[]).push(i)},isReady(){return o},pushMessage:n=>{let{cmd:i,payload:a,error:d}=w(n);if(o){c(n);return}!d&&i===W&&a===e&&(o=!0,M(t,k,void 0))},send(n,i){if(!o)throw new Error("trying to `send` into non initialized tunnel");r(D(n,i))}}};var U=e=>{let r=Object.entries(e).filter(([t,o])=>!!o);return Object.fromEntries(r)},_=(e,r={})=>{let t={...r};return t.__forceAd=e.__forceAd,t.impressionId=e.impressionId,new URLSearchParams(U(t)).toString()},A=(e="production")=>e==="development"?"http://localhost:8081/":e==="staging"?"https://thanksad.dev/":"https://thanks.is/";var R={xs:360,sm:768,md:1024,lg:1200,xl:1350};var V=()=>typeof window>"u"||window.innerWidth>=R.sm?"desktop":"mobile";var j=e=>Array.from(new Uint8Array(e)).map(r=>r.toString(16).padStart(2,"0")).join("");var N=async e=>{if(!e)return;let r=new TextEncoder().encode(e);return j(await crypto.subtle.digest("SHA-256",r))};var B=async(e,r)=>{let t=e?await(typeof e=="function"?e({encode:N}):N(e)):"";return Object.assign({sha256:t},r)};var G=async e=>{let{partnerId:r,email:t,userId:o,traceId:c=o,keywords:p,items:n,flags:i={},style:a}=e,{switches:d,...x}=i,l=(await B(t,e.emailHash)).sha256;return _(x,{partnerId:r,emailHash:l,traceId:c,deviceMode:V(),keywords:p?p.join(","):void 0,items:JSON.stringify(n),embedTheme:a?.embed?.theme})},S=async(e,r)=>`${A(r)}?${await G(e)}`;import"react";import{useCallback as C,useEffect as I,useRef as xe,useState as b}from"react";import{Modal as Ce,Linking as be}from"react-native";import{WebView as Ee}from"react-native-webview";import{View as K,Modal as Z}from"react-native";import Te from"react-native-webview";import"react";import{Text as J,View as Y,TouchableOpacity as Q}from"react-native";var O=({onBack:e})=><Y style={{height:150,justifyContent:"center",alignItems:"flex-end",backgroundColor:"#000",width:"100%"}}><Q onPress={e}><J style={{color:"#FFF"}}>Close</J></Q></Y>;import{Component as X}from"react";var T=class extends X{state={error:null};static getDerivedStateFromError(r){return{error:r}}componentDidCatch(r,t){this.props.onError(r,t.componentStack)}render(){return this.state.error?null:this.props.children}};var L=({uri:e,onClose:r})=><T onError={r}><Z animationType="slide"onRequestClose={r}><K style={{flex:1,justifyContent:"center",alignItems:"center",display:"flex",flexDirection:"column"}}><O onBack={r}/><Te source={{uri:e}}onError={t=>{console.error("visible page error",t),r()}}onContentProcessDidTerminate={t=>{console.error("visible page terminate",t),r()}}onRenderProcessGone={t=>{console.error("visible render gone",t),r()}}style={{flex:1}}/><O onBack={r}/></K></Z></T>;var we=`
 window.onerror = (e) => { console.error(e); window.ReactNativeWebView.postMessage({cmd: 'error', payload: e.message});}
-`,Me=({uri:e,animationType:r="slide",thanks:t,onClose:o,onLinkClick:c,children:p})=>{let n=xe(),i=C(s=>{n.current=s},[]),[a,d]=b("idle"),x=C(()=>{d("closed")},[]),l=C(()=>{d("complete")},[]),[m]=b(()=>v("rocket",$=>{n.current?.injectJavaScript(`window.messageToThanks(${JSON.stringify($)});`)})),F=C(s=>{m.pushMessage(JSON.parse(s.nativeEvent.data))},[]),[P,H]=b();return I(()=>(m.on(k,()=>{m.send("init",{mode:"mobile",topOffset:t.offsetTop?.(),statusText:t.statusText,referral:"react-native"}),d("active"),t.onDisplay?.()}),m.on("close",()=>{x()}),m.on("terminate",()=>{l()}),m.on("click",s=>{(!c||c(s))&&be.openURL(s)}),()=>{m.isReady()&&m.send("close"),t.onClose?.()}),[]),I(()=>{a==="complete"&&o()},[a]),a==="complete"?null:<T onError={x}><Ce onRequestClose={x}animationType={r}transparent><Ee ref={i}source={{uri:e,headers:{referer:"https://react-native","x-thanksjs-integration-mode":"react-native"}}}onMessage={F}onError={s=>{console.error("page error",s),l()}}onContentProcessDidTerminate={s=>{console.error("page terminate",s),l()}}onRenderProcessGone={s=>{console.error("render gone",s),l()}}onLoad={s=>{}}style={{flex:1,backgroundColor:"transparent"}}webviewDebuggingEnabled injectedJavaScript={we}/>{P?<L uri={P}onClose={()=>H(void 0)}/>:null}{p}</Ce></T>},kr=({onLinkClick:e,onClose:r,env:t="production",animationType:o,children:c,...p})=>{let[n,i]=b();I(()=>{S(p,t).then(d=>{i(d)})},[]);let a=C(()=>{i(void 0),r?.()},[]);return n?<Me uri={n}thanks={p}onClose={a}onLinkClick={e}animationType={o}>{c}</Me>:null};export{kr as ThanksWidget};
+`,Me=({uri:e,animationType:r="slide",thanks:t,onClose:o,onLinkClick:c,children:p})=>{let n=xe(),i=C(s=>{n.current=s},[]),[a,d]=b("idle"),x=C(()=>{d("closed")},[]),l=C(()=>{d("complete")},[]),[m]=b(()=>v("rocket",$=>{n.current?.injectJavaScript(`window.messageToThanks(${JSON.stringify($)});`)})),F=C(s=>{m.pushMessage(JSON.parse(s.nativeEvent.data))},[]),[P,H]=b();return I(()=>(m.on(k,()=>{m.send("init",{mode:"mobile",topOffset:t.offsetTop?.(),statusText:t.statusText,referral:"react-native"}),d("active"),t.onDisplay?.()}),m.on("close",()=>{x()}),m.on("terminate",()=>{l()}),m.on("click",s=>{(!c||c(s))&&be.openURL(s)}),()=>{m.isReady()&&m.send("close"),t.onClose?.()}),[]),I(()=>{a==="complete"&&o()},[a]),a==="complete"?null:<T onError={x}><Ce onRequestClose={x}animationType={r}transparent><Ee ref={i}source={{uri:e,headers:{referer:"https://react-native","x-thanksjs-integration-mode":"react-native"}}}onMessage={F}onError={s=>{console.error("page error",s),l()}}onContentProcessDidTerminate={s=>{console.error("page terminate",s),l()}}onRenderProcessGone={s=>{console.error("render gone",s),l()}}onLoad={s=>{}}style={{flex:1,backgroundColor:"transparent"}}webviewDebuggingEnabled injectedJavaScript={we}/>{P?<L uri={P}onClose={()=>H(void 0)}/>:null}{p}</Ce></T>},br=({onLinkClick:e,onClose:r,env:t="production",animationType:o,children:c,...p})=>{let[n,i]=b();I(()=>{S(p,t).then(d=>{i(d)})},[]);let a=C(()=>{i(void 0),r?.()},[]);return n?<Me uri={n}thanks={p}onClose={a}onLinkClick={e}animationType={o}>{c}</Me>:null};export{br as ThanksWidget};

package/dist/react-native-webview-public.d.ts

@@ -12,11 +12,27 @@ declare type PersonalInformationRequest = (
 ) => MayBePromise<PersonalInformationTransfer>;
 
 declare type PersonalInformationRequestDetails = {
+    	/**
+     	 * A unique token for this operation.
+     	 * (not implemented) could be used to track PII information flow
+     	 */
     	token: string;
+    	/**
+     	 * A type of offer, which is requesting information
+     	 */
     	offerType: 'coupon' | 'subscription' | 'transaction';
+    	/**
+     	 * The advertiser, who is requesting information.
+     	 * Information will be NOT shared with them, unless this the essence of an action (subscription)
+     	 */
     	advertiser: string;
 };
 
+/**
+ * a type of request for personal information
+ * - `notification` - a request to notify user about action just taken, for example send them a coupon code
+ * - `autofill` - a request to autofill a form
+ */
 declare type PersonalInformationRequestSubject = 'notification' | 'autofill';
 
 declare type PersonalInformationTransfer =
@@ -73,7 +89,13 @@ declare type ThanksLocation = {
  */
 declare type ThanksSharedConfiguration = {
     	/**
-     	 * configures the message to be displayed on the first screen
+     	 * overrides `partnerId` detected by the referral
+     	 * works only of "unlocked" hosts, contact Thanks for details
+     	 * @recommended
+     	 */
+    	partnerId?: string;
+    	/**
+     	 * configures the message to be displayed at the first screen
      	 */
     	statusText?: string;
 
@@ -87,7 +109,7 @@ declare type ThanksSharedConfiguration = {
      	 * // will be hashed on partner side
      	 * email: (encode) => encode('hey@jointhanks.com'),
      	 * ```
-     	 * @see {@link emailHash} - one can specify `emailHash` directly
+     	 * @see {@link ThanksSharedConfiguration.emailHash} - one can specify `emailHash` directly
      	 */
     	email?:
     		| string
@@ -98,7 +120,7 @@ declare type ThanksSharedConfiguration = {
         		  }) => Promise<string | undefined>)
     		| undefined;
     	/**
-     	 * provides informating about user's email in a pre-hashed way
+     	 * provides information about user's email in a pre-hashed way
      	 * @example
      	 * ```ts
      	 * emailHash: { sha256: sha256HashedEmail }
@@ -113,10 +135,12 @@ declare type ThanksSharedConfiguration = {
     	onPersonalInformationRequest?: PersonalInformationRequest;
     	/**
      	 * location of a customer
+     	 * @optional
      	 */
     	customerLocation?: ThanksLocation;
     	/**
      	 * location of performed activity (if applicable)
+     	 * @optional
      	 */
     	purchaseLocation?: ThanksLocation;
     	/**
@@ -125,36 +149,36 @@ declare type ThanksSharedConfiguration = {
     	userId?: string;
     	/**
      	 * an unique id for partner to trace widget activity from their side
+     	 * @optional
      	 */
     	traceId?: string;
 
     	/**
      	 * a set of keywords related to this activity
+     	 * @recommended
      	 */
     	keywords?: string[];
     	/**
      	 * a set of categories related to this activity
+     	 * @recommended
      	 */
     	categories?: string[];
     	/**
      	 * a set of items purchased during this activity
+     	 * @recommended
      	 */
     	items?: any[];
 
     	/**
-     	 * a style to be passed to the Widget
+     	 * a style overrides for the Widget
      	 */
     	style?: {
         		/**
+         		 * z-index for the widget iframe, which is expected to be top-most
          		 * @defaultValue 100
          		 */
         		zIndex?: number;
-        		/**
-         		 * embed settings
-         		 */
-        		embed?: {
-            			theme?: string;
-            		};
+        		
         	};
     	/**
      	 * A function returning offset from page top for the widget
@@ -163,12 +187,12 @@ declare type ThanksSharedConfiguration = {
     	offsetTop?(): number;
 
     	/**
-     	 * used defined callback, called on Widget display
+     	 * user defined callback, called on Widget display
      	 */
     	onDisplay?(): void;
     	/**
-     	 * used defined callback, called on Widget close.
-     	 * onClose without corresponding `onDisplay` usually means failure
+     	 * user defined callback, called on Widget close.
+     	 * hint: onClose without corresponding `onDisplay` usually means failure
      	 */
     	onClose?(): void;
 
@@ -179,12 +203,6 @@ declare type ThanksSharedConfiguration = {
     	closeWidget?(): void;
 
     	
-
-    	/**
-     	 * overrides `partnerId` detected by the referral
-     	 * works only of "unlocked" hosts, contact Thanks for details
-     	 */
-    	partnerId?: string;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thanksjs/react-native-webview",
-	"version": "0.0.1-beta.0",
+	"version": "0.0.1-beta.1",
 	"description": "ThanksJS React Native WebView",
 	"homepage": "https://thanks.co/",
 	"license": "MIT",