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

package/README.md

@@ -0,0 +1,78 @@
+Thanks JS react native adapter
+
+===
+
+## Installation
+
+```bash
+yarn add @thanksjs/react-native-webview
+```
+
+## Usage
+
+```tsx
+import { ThanksWidget } from '@thanksjs/react-native-webview';
+
+/// somewhere in your code
+<ThanksWidget
+  partnerId="{your partner id}"
+  // other available props, see Thanks Configuration section
+/>
+```
+
+### Advanced usage
+The important parts are:
+- providing a customer `email`. Strictly sha256 hash will be transferred during the widget lifecycle. No sensitive information leaves your application without your permission.
+- giving permission to send Personal Information to improve efficiency of communications
+  - `subject` and `info` can be used to decide what information to send
+    - `subject` can be `notification` or `autofill` of visible UI elements
+  - `info.token` is a unique identifier for the request and can be used to trace PII flow further in our systems
+- `keywords`, `category` and `items` are used to fine-tune ads to display
+
+Example
+```tsx
+<ThanksWidget
+  partnerId='{your partner id}'
+  // information for the first scren
+  statusText='Your order has been confirmed'
+  emailHash={{ sha256: customersEmailHash }}
+  // or
+  email={customerEmail}
+  onPersonalInformationRequest={(subject, info) => {
+    return {
+      email,
+      firstName: 'TestUser',
+    };
+  }}
+
+  onDisplay={() => {
+    console.log('widget displayed');
+  }}
+  onClose={() => {
+    console.log('widget closed');
+  }}
+
+  keywords={[
+    'violet',
+    'roses',
+    'blueberry',
+  ]}
+  items={[
+    {
+      'name': 'Flatwhite',
+      'value': 4.00,
+      'currency': 'AUD',
+      'quantity': 2,
+      'type': 'coffee',
+      'category': 'drinks',
+      'subcategory': 'australian-coffee',
+    },
+  ]}
+  categories={[
+    'lifestyle',
+  ]}
+/>;
+```
+
+# License
+MIT

package/dist/esm/index.js

@@ -0,0 +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=`
+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};

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

@@ -0,0 +1,210 @@
+import { FC } from 'react';
+import { PropsWithChildren } from 'react';
+
+declare type MayBePromise<T> = T | Promise<T>;
+
+/**
+ * A user defined callback to retrieve PII information
+ */
+declare type PersonalInformationRequest = (
+	subject: PersonalInformationRequestSubject,
+	info: PersonalInformationRequestDetails,
+) => MayBePromise<PersonalInformationTransfer>;
+
+declare type PersonalInformationRequestDetails = {
+    	token: string;
+    	offerType: 'coupon' | 'subscription' | 'transaction';
+    	advertiser: string;
+};
+
+declare type PersonalInformationRequestSubject = 'notification' | 'autofill';
+
+declare type PersonalInformationTransfer =
+	| Partial<{
+    			email: string;
+    			firstName: string;
+    	  }>
+	| undefined;
+
+/**
+ * @public widget-to-user callbacks
+ */
+export declare type ThanksCallbacks = {
+    /**
+     * Callback for handling link clicks
+     * @returns true or do not set to let Thanks handle clicks itself
+     * @returns false to handle it manually. Pass information to display as `children` prop to display in within Thanks Modal
+     */
+    onLinkClick?: undefined | ((url: string) => boolean);
+    /**
+     * callback on widget close
+     */
+    onClose?: undefined | (() => void);
+};
+
+/**
+ * A configuration options for the Thanks widget
+ * @public
+ */
+export declare type ThanksConfiguration =
+	| ThanksWidgetConfiguration
+	| ThanksEmbedConfiguration;
+
+declare type ThanksEmailHashConfiguration = {
+    	sha256: string;
+};
+
+declare type ThanksEmbedConfiguration = ThanksSharedConfiguration & {
+    	/**
+     	 * specifies an element for embedded widget
+     	 * this option will suppress automatic widget Display
+     	 */
+    	embeddedInto: HTMLElement;
+};
+
+declare type ThanksLocation = {
+    	country?: 'AU' | 'US';
+    	postcode?: string;
+};
+
+/**
+ * A configuration options for the Thanks widget
+ * @public
+ */
+declare type ThanksSharedConfiguration = {
+    	/**
+     	 * configures the message to be displayed on the first screen
+     	 */
+    	statusText?: string;
+
+    	/**
+     	 * email configuration. Accepts raw email, or a factory to produce hash.
+     	 * Real email will be never transfered to any other system
+     	 * @example
+     	 * ```ts
+     	 * // will be hashed on thanks side
+     	 * email: 'hey@jointhanks.com',
+     	 * // will be hashed on partner side
+     	 * email: (encode) => encode('hey@jointhanks.com'),
+     	 * ```
+     	 * @see {@link emailHash} - one can specify `emailHash` directly
+     	 */
+    	email?:
+    		| string
+    		| ((factory: {
+        				encode: (
+        					email: string | undefined,
+        				) => Promise<string | undefined>;
+        		  }) => Promise<string | undefined>)
+    		| undefined;
+    	/**
+     	 * provides informating about user's email in a pre-hashed way
+     	 * @example
+     	 * ```ts
+     	 * emailHash: { sha256: sha256HashedEmail }
+     	 * ```
+     	 */
+    	emailHash?: ThanksEmailHashConfiguration;
+
+    	/**
+     	 * a callback to retrieve personal information
+     	 * @see how we process PII
+     	 */
+    	onPersonalInformationRequest?: PersonalInformationRequest;
+    	/**
+     	 * location of a customer
+     	 */
+    	customerLocation?: ThanksLocation;
+    	/**
+     	 * location of performed activity (if applicable)
+     	 */
+    	purchaseLocation?: ThanksLocation;
+    	/**
+     	 * @deprecated use traceId
+     	 */
+    	userId?: string;
+    	/**
+     	 * an unique id for partner to trace widget activity from their side
+     	 */
+    	traceId?: string;
+
+    	/**
+     	 * a set of keywords related to this activity
+     	 */
+    	keywords?: string[];
+    	/**
+     	 * a set of categories related to this activity
+     	 */
+    	categories?: string[];
+    	/**
+     	 * a set of items purchased during this activity
+     	 */
+    	items?: any[];
+
+    	/**
+     	 * a style to be passed to the Widget
+     	 */
+    	style?: {
+        		/**
+         		 * @defaultValue 100
+         		 */
+        		zIndex?: number;
+        		/**
+         		 * embed settings
+         		 */
+        		embed?: {
+            			theme?: string;
+            		};
+        	};
+    	/**
+     	 * A function returning offset from page top for the widget
+     	 * @defaultValue 70
+     	 */
+    	offsetTop?(): number;
+
+    	/**
+     	 * used defined callback, called on Widget display
+     	 */
+    	onDisplay?(): void;
+    	/**
+     	 * used defined callback, called on Widget close.
+     	 * onClose without corresponding `onDisplay` usually means failure
+     	 */
+    	onClose?(): void;
+
+    	/**
+     	 * a command available to the user.
+     	 * force closes Widget
+     	 */
+    	closeWidget?(): void;
+
+    	
+
+    	/**
+     	 * overrides `partnerId` detected by the referral
+     	 * works only of "unlocked" hosts, contact Thanks for details
+     	 */
+    	partnerId?: string;
+};
+
+/**
+ * @public
+ */
+export declare type ThanksStyleProps = {
+    animationType?: 'slide' | 'fade' | 'none' | undefined;
+};
+
+/**
+ * Renders ThanksWidget
+ * @param onLinkClick - callback for handling link clicks
+ * @param onClose - callback for handling widget close
+ * @param animationType - animation type for modal
+ * @param configuration - configuration for ThanksWidget
+ *
+ * @public ThanksWidget itself
+ */
+export declare const ThanksWidget: FC<Omit<ThanksConfiguration, 'partnerId'> & Pick<Required<ThanksConfiguration>, 'partnerId'> & ThanksCallbacks & ThanksStyleProps & PropsWithChildren>;
+
+declare type ThanksWidgetConfiguration = ThanksSharedConfiguration;
+
+export { }

package/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "@thanksjs/react-native-webview",
+	"version": "0.0.1-beta.0",
+	"description": "ThanksJS React Native WebView",
+	"homepage": "https://thanks.co/",
+	"license": "MIT",
+	"author": "Anton Korzunov <thekashey@gmail.com> (https://github.com/theKashey)",
+	"main": "dist/esm/index.js",
+	"react-native": "dist/esm/index.js",
+	"types": "dist/react-native-webview-public.d.ts",
+	"dependencies": {
+		"react-native-webview": "^13.6.3"
+	},
+	"peerDependencies": {
+		"react": "*",
+		"react-native": "*"
+	},
+	"engines": {
+		"node": ">= 18.0.0"
+	},
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	}
+}