Fixes to purchase flow. (#37)

* revise beta deploy and subscrription  hooks

* add in new beta icon

* update eager update to include subscriber status.

* add in a couple more fixes

* update test and snapshots

package.json

@@ -1,7 +1,8 @@
 {
   "name": "Mujo",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "private": true,
+  "homepage": "./",
   "dependencies": {
     "@babel/core": "7.4.3",
     "@emotion/cache": "^10.0.14",
@@ -74,15 +75,17 @@
   "scripts": {
     "serve": "serve",
     "start": "node scripts/watch.js",
-    "build": "PUBLIC_URL=./ node scripts/build.js && npm run append:sw && npm run append:sm",
+    "build:beta": "BETA='true' node scripts/build.js && npm run build:post && npm run append:beta",
+    "build:post": "npm run append:sw && npm run append:sm",
+    "build": "PUBLIC_URL=./ node scripts/build.js && npm run build:post",
     "append:sw": "cra-append-sw --mode replace --skip-compile ./public/service-worker.js",
     "append:sm": "node scripts/modify-source-maps.js",
     "test": "npm run build && node scripts/test.js --env=jsdom",
     "fmt": "prettier '{src,public}/**/*.js' --write",
     "lint": "eslint '{src,public}/**/*.js'",
     "dist": "npm run build && ./scripts/dist.sh",
-    "dist:beta": "npm run build && npm run beta && ./scripts/dist.sh",
-    "beta": "node scripts/beta-decorate.js"
+    "dist:beta": "npm run build:beta && ./scripts/dist.sh",
+    "append:beta": "node scripts/beta-decorate.js"
   },
   "browserslist": [
     "last 3 Chrome versions"

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "short_name": "Mujo",
   "name": "Mujō - Be mindful of your time",
   "description": "Mujō is a extension that reminds you not to over work yourself.",

scripts/beta-decorate.js

@@ -13,6 +13,7 @@ const readJSON = async dir => JSON.parse(await read(dir))
 const serialize = json => JSON.stringify(json, null, '\t')
 
 const decorateBETA = async () => {
+  const secondsInWeek = `${Math.floor(+new Date() / 1000)}`.slice(-4)
   const manifest = await readJSON(MANIFEST_PATH)
   const betaManifest = Object.assign({}, manifest, {
     name: beta(manifest.name),
@@ -26,7 +27,7 @@ const decorateBETA = async () => {
       128: BETA_ICON,
       512: BETA_ICON,
     },
-    version: `${manifest.version}.${`${+new Date()}`.slice(0, 4)}`,
+    version: `${manifest.version}.${secondsInWeek}`,
     version_name: `${manifest.version} BETA`,
   })
   return write(MANIFEST_PATH, serialize(betaManifest))

src/__snapshots__/app.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match the snapshot 1`] = `
+<div
+  className="css-1dl0z63"
+/>
+`;

src/app.test.js

@@ -1,8 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import ReactTestRenderer from 'react-test-renderer'
 import App from './app'
 
 it('renders without crashing', () => {
   const div = document.createElement('div')
   ReactDOM.render(<App />, div)
 })
+
+it('should match the snapshot', async () => {
+  const tree = ReactTestRenderer.create(<App />).toJSON()
+  expect(tree).toMatchSnapshot()
+})

src/components/info-modal/__snapshots__/index.test.js.snap

@@ -53,6 +53,29 @@ exports[`InfoModal should match snapshot 1`] = `
     >
       You have set the max number of break timers.
     </p>
+    <p
+      className="css-120ftwk"
+      color="color"
+    >
+      To get access to unlimited break timers and add a break timer for foo subscribe to Mujō.
+    </p>
+  </div>
+  <div
+    backgroundColor="gravel"
+    className="css-1yqdfgl"
+  >
+    <button
+      backgroundColor="saltBox"
+      className="css-15foh21"
+      color="white"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      outlineColor="gravel"
+      position="relative"
+    >
+      Subscription Details
+    </button>
   </div>
 </div>
 `;

src/components/info-modal/modal-data.js

@@ -14,7 +14,7 @@ const modals = {
   [SUB_SUCCESS_MODAL]: subscriptionSuccess,
 }
 
-export const getModalData = (context, subDetails) => {
+export const getModalData = (context, subDetails, options) => {
   const modalData = modals[context.name] || identity
-  return modalData(context, subDetails)
+  return modalData(context, subDetails, options)
 }

src/constants.js

@@ -46,7 +46,7 @@ export const SET_STORAGE = 'SET_STORAGE'
 // Feature Flags
 export const SCREEN_TIME_FEATURE = true
 export const BREAK_TIMER_FEATURE = true
-export const SUBSCRIBE_FEATURE = false
+export const SUBSCRIBE_FEATURE = true
 
 // Upsell modals
 export const MAX_BREAKTIMER_MODAL = 'breakTimerMax'

src/hooks/use-subscription.js

@@ -1,4 +1,9 @@
-import { useState, useEffect, useCallback } from 'react'
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useContext,
+} from 'react'
 import { ACTIVE_PRODUCT } from '../constants'
 import { compose, first } from '../lib/functional'
 import {
@@ -25,7 +30,8 @@ export const hydrate = async ({ setProducts, setUser }) => {
   setProducts(await getProducts())
 }
 
-export const useSubscription = () => {
+const context = React.createContext({ user: userFactory([]) })
+export const SubscriptionProvider = props => {
   const [isInitialized, setIsInitialized] = useState(false)
   const [products, setProducts] = useState([])
   const [user, setUser] = useState(userFactory())
@@ -42,16 +48,18 @@ export const useSubscription = () => {
       try {
         await buyProduct(sku)
       } catch (e) {
-        return setPurchaseError(e)
+        setPurchaseError(e)
+        return
       }
       // eager update user
       setUser(
-        Object.assign({}, user, { products: [getProduct(sku)] })
+        Object.assign({}, user, {
+          products: [getProduct(sku)],
+          isSubscribed: true,
+        })
       )
-      // rehydrate user
-      return hydrate({ setProducts, setUser })
     },
-    [user, getProduct]
+    [getProduct, user]
   )
 
   useEffect(() => {
@@ -61,11 +69,19 @@ export const useSubscription = () => {
     }
   }, [setProducts, setUser, isInitialized, setIsInitialized])
 
-  return {
-    user,
-    products,
+  const { Provider } = context
+
+  const value = {
     buy,
-    purchaseError,
     getProduct,
+    isInitialized,
+    products,
+    purchaseError,
+    user,
   }
+  // eslint-disable-next-line no-underscore-dangle
+  window.__MUJO_SUBSCRIPTION__ = value
+  return <Provider {...props} value={value} />
 }
+
+export const useSubscription = () => useContext(context)

src/hooks/use-subscription.test.js

@@ -1,11 +1,17 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 import { ACTIVE_PRODUCT, CANCELLED_PRODUCT } from '../constants'
-import { useSubscription, activeProducts } from './use-subscription'
+import {
+  useSubscription,
+  activeProducts,
+  SubscriptionProvider,
+} from './use-subscription'
 
 jest.mock('../lib/payment')
 /* eslint-disable-next-line import-order-alphabetical/order */
 const { getPurchases, getProducts, buy } = require('../lib/payment')
 
+const hookOptions = { wrapper: SubscriptionProvider }
+
 beforeEach(() => {
   getPurchases.mockReset()
   getProducts.mockReset()
@@ -23,8 +29,9 @@ test('activeProduct should filter to only active products', () => {
 test('useSubscription should initialize products and purchases', async () => {
   getPurchases.mockResolvedValue([{ state: ACTIVE_PRODUCT }])
   getProducts.mockResolvedValue(['foo', 'bar'])
-  const { result, waitForNextUpdate } = renderHook(() =>
-    useSubscription()
+  const { result, waitForNextUpdate } = renderHook(
+    () => useSubscription(),
+    hookOptions
   )
   // Two updates [product, user]
   await waitForNextUpdate()
@@ -39,50 +46,23 @@ test('useSubscription should initialize products and purchases', async () => {
 test('useSubscription should be unsubbed if not active product', async () => {
   getPurchases.mockResolvedValue([{ state: CANCELLED_PRODUCT }])
   getProducts.mockResolvedValue(['foo', 'bar'])
-  const { result, waitForNextUpdate } = renderHook(() =>
-    useSubscription()
+  const { result, waitForNextUpdate } = renderHook(
+    () => useSubscription(),
+    hookOptions
   )
   // Two updates [product, user]
   await waitForNextUpdate()
   await waitForNextUpdate()
   expect(result.current.user.isSubscribed).toBe(false)
 })
 
-test('useSubscription should get purchases after calling buy', async () => {
-  getPurchases.mockResolvedValue([])
-  getProducts.mockResolvedValue(['foo', 'bar'])
-  buy.mockResolvedValue(true)
-  const { result, waitForNextUpdate } = renderHook(() =>
-    useSubscription()
-  )
-  // Init calls
-  await waitForNextUpdate()
-  await waitForNextUpdate()
-  expect(result.current.user.isSubscribed).toBe(false)
-  expect(result.current.user.products).toEqual([])
-  // mock purchase again with purchased value
-  getPurchases
-    .mockReset()
-    .mockResolvedValue([{ state: ACTIVE_PRODUCT }])
-  act(() => {
-    result.current.buy('foo')
-  })
-  // Update calls
-  await waitForNextUpdate()
-  await waitForNextUpdate()
-  expect(result.current.user.isSubscribed).toBe(true)
-  expect(result.current.user.products).toEqual([
-    { state: ACTIVE_PRODUCT },
-  ])
-  expect(result.current.products).toEqual(['foo', 'bar'])
-})
-
 test('useSubscription a failure to buy should set purchaseError', async () => {
   getPurchases.mockResolvedValue([])
   getProducts.mockResolvedValue([])
   buy.mockRejectedValue(new Error('fail'))
-  const { result, waitForNextUpdate } = renderHook(() =>
-    useSubscription()
+  const { result, waitForNextUpdate } = renderHook(
+    () => useSubscription(),
+    hookOptions
   )
   // Init calls
   await waitForNextUpdate()

src/index.js

@@ -4,6 +4,7 @@ import { useColorScheme } from 'use-color-scheme'
 import App from './app'
 import { ErrorBox } from './components/error-box'
 import { Font } from './components/fonts'
+import { SubscriptionProvider } from './hooks/use-subscription'
 import { ColorThemeProvider } from './hooks/use-theme'
 
 import './lib/tracker'
@@ -13,9 +14,11 @@ const NewHomePage = () => {
   return (
     <ErrorBox>
       <Font />
-      <ColorThemeProvider value={scheme}>
-        <App />
-      </ColorThemeProvider>
+      <SubscriptionProvider>
+        <ColorThemeProvider value={scheme}>
+          <App />
+        </ColorThemeProvider>
+      </SubscriptionProvider>
     </ErrorBox>
   )
 }

src/lib/aggregation.js

@@ -1,3 +1,4 @@
+import { FOURTY_FIVE_MINUTES } from '../constants'
 import { shortURL } from './url'
 import { set } from './util'
 
@@ -30,7 +31,15 @@ export const toSiteInfo = (times, timers) =>
   Object.keys(times).reduce((accum, url) => {
     set(accum, url, accum[url] || {})
     set(accum[url], 'time', times[url])
-    set(accum[url], 'breakTimer', timers[url] || {})
+    set(
+      accum[url],
+      'breakTimer',
+      timers[url] || {
+        enabled: false,
+        time: FOURTY_FIVE_MINUTES,
+        url,
+      }
+    )
     return accum
   }, {})