Payment Success Modal. (#36)

* add in most of the wiring of the success modal

* add in modal data

* add in some tests

* turn off subscription feature

* add active product test and more test and fix some existing

* remove wait ref

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Mujo",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "private": true,
   "dependencies": {
     "@babel/core": "7.4.3",

public/manifest.json

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

src/app.js

@@ -194,6 +194,7 @@ const App = () => {
       ) : null}
       {upsellModal && (
         <InfoModal
+          changeModal={setUpsellModal}
           context={upsellModal}
           isOpen={true}
           onRequestClose={() => {

src/components/info-modal/index.js

@@ -8,12 +8,18 @@ import { Modal } from '../modal'
 import { Description } from './description'
 import { getModalData } from './modal-data'
 
-export const InfoModal = ({ isOpen, onRequestClose, context }) => {
+export const InfoModal = ({
+  isOpen,
+  onRequestClose,
+  context,
+  changeModal,
+}) => {
   const { highlight, backgroundSecondary } = useTheme()
   const subDetails = useSubscription()
   const { title, description, button } = getModalData(
     context,
-    subDetails
+    subDetails,
+    { changeModal }
   )
   return (
     <Modal

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

@@ -1,14 +1,17 @@
 import {
   MAX_BREAKTIMER_MODAL,
   SUB_DETAILS_MODAL,
+  SUB_SUCCESS_MODAL,
 } from '../../constants'
 import { identity } from '../../lib/functional'
 import { maxBreaktimers } from './max-breaktimers'
 import { subscriptionDetails } from './subscription-details'
+import { subscriptionSuccess } from './subscription-success'
 
 const modals = {
   [MAX_BREAKTIMER_MODAL]: maxBreaktimers,
   [SUB_DETAILS_MODAL]: subscriptionDetails,
+  [SUB_SUCCESS_MODAL]: subscriptionSuccess,
 }
 
 export const getModalData = (context, subDetails) => {

src/components/info-modal/subscription-details.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { CURRENT_SUB_SKU } from '../../constants'
-import { first } from '../../lib/functional'
+import { CURRENT_SUB_SKU, SUB_SUCCESS_MODAL } from '../../constants'
+import { first, noop } from '../../lib/functional'
 import { PurchaseError } from './purchase-error'
 
 // const mockProduct = {
@@ -25,15 +25,22 @@ import { PurchaseError } from './purchase-error'
 //   ],
 // }
 
-export const subscriptionDetails = (context, subDetails) => {
+export const subscriptionDetails = (
+  context,
+  subDetails,
+  { changeModal }
+) => {
   const sku = context.sku || CURRENT_SUB_SKU
+  const callback = context.callback || noop
   const product = subDetails.getProduct(sku)
 
   if (!product) {
     // TODO: logging monitoring
     return {
       title: 'Unable to subscribe at this time',
-      description: ['Please contact support'],
+      description: [
+        'Please contact support at jacoblowe2.0@gmail.com',
+      ],
     }
   }
 
@@ -68,8 +75,10 @@ export const subscriptionDetails = (context, subDetails) => {
       children: `Subscribe at ${formatter.format(
         price.valueMicros / 1000 / 1000
       )}/mo`,
-      onClick: () => {
-        subDetails.buy(sku)
+      onClick: async () => {
+        await subDetails.buy(sku)
+        changeModal({ name: SUB_SUCCESS_MODAL })
+        callback() // set initial action
       },
     },
   }

src/components/info-modal/subscription-details.test.js

@@ -0,0 +1,73 @@
+import { subscriptionDetails } from './subscription-details'
+
+const stampSubDetails = isSub => ({
+  user: { isSubscriber: isSub, products: [] },
+  products: [],
+  getProduct: jest.fn(),
+  buy: jest.fn(),
+})
+
+test('subscriptionDetails should return error when no product is found', () => {
+  const context = {}
+  const subDetails = stampSubDetails()
+  const callback = jest.fn()
+  expect(
+    subscriptionDetails(context, subDetails, callback).title
+  ).toMatch('Unable to subscribe')
+})
+
+test('subscriptionDetails should return detail when there is a product', () => {
+  const context = {}
+  const subDetails = stampSubDetails()
+  const callback = jest.fn()
+  subDetails.getProduct.mockReturnValue({
+    sku: 'foo',
+    prices: [
+      {
+        valueMicros: '990000',
+        currencyCode: 'USD',
+        regionCode: 'US',
+      },
+    ],
+    localeData: [
+      {
+        title: 'Foo',
+        description: 'Foo bar baz',
+        languageCode: 'all',
+      },
+    ],
+  })
+  expect(
+    subscriptionDetails(context, subDetails, callback).button.children
+  ).toMatch('$0.99/mo') // correct pricing format
+})
+
+test('subscriptionDetails should call buy when button is clicked', async () => {
+  const context = { sku: 'foo', callback: jest.fn() }
+  const subDetails = stampSubDetails()
+  const changeModal = jest.fn()
+  subDetails.getProduct.mockReturnValue({
+    sku: 'foo',
+    prices: [
+      {
+        valueMicros: '990000',
+        currencyCode: 'USD',
+        regionCode: 'US',
+      },
+    ],
+    localeData: [
+      {
+        title: 'Foo',
+        description: 'Foo bar baz',
+        languageCode: 'all',
+      },
+    ],
+  })
+  subDetails.buy.mockResolvedValue(true)
+  const options = { changeModal }
+  const modal = subscriptionDetails(context, subDetails, options)
+  await modal.button.onClick()
+  expect(subDetails.buy).toBeCalledWith('foo')
+  expect(context.callback).toBeCalled()
+  expect(changeModal).toBeCalled()
+})

src/components/info-modal/subscription-success.js

@@ -0,0 +1,7 @@
+export const subscriptionSuccess = (context, subDetails) => ({
+  title: 'Thanks for purchasing a subscription',
+  description: [
+    'Your support is greatly appreciated!',
+    'Please contact jacoblowe2.0@gmail.com with any comment or questions.',
+  ],
+})

src/constants.js

@@ -51,6 +51,11 @@ export const SUBSCRIBE_FEATURE = false
 // Upsell modals
 export const MAX_BREAKTIMER_MODAL = 'breakTimerMax'
 export const SUB_DETAILS_MODAL = 'subscriptionDetails'
+export const SUB_SUCCESS_MODAL = 'subSuccess'
+
+// Product States
+export const ACTIVE_PRODUCT = 'ACTIVE'
+export const CANCELLED_PRODUCT = 'CANCELLED'
 
 // OPTIONAL permissions requested
 export const SCREEN_TIME_PERMISSIONS = {

src/e2e.test.js

@@ -5,7 +5,6 @@ import {
   SITE_TIME_KEY,
   APP_READY_KEY,
 } from './constants'
-import { wait } from './lib/async-helpers'
 
 const TEST_TIMEOUT = 10000 // extend test timeout sinces its E2E
 
@@ -26,6 +25,7 @@ beforeAll(async () => {
       width: 1280,
       height: 800,
     },
+    slowMo: 100,
   })
 })
 
@@ -110,7 +110,7 @@ test(
       SITE_TIME_KEY,
       screenTimeMock
     )
-    await wait(500)
+    // await wait(500)
     const el = await page.$('[data-testid="graph"]')
     expect(el).not.toBe(null)
     // const screenshot = await page.screenshot()

src/hooks/use-extension.js

@@ -134,6 +134,7 @@ export const useExtension = () => {
           setUpsellModal({
             name: SUB_DETAILS_MODAL,
             sku: CURRENT_SUB_SKU,
+            callback: () => setBreakTimer(url, time, enabled),
           }),
       })
       return

src/hooks/use-subscription.js

@@ -1,13 +1,17 @@
 import { useState, useEffect, useCallback } from 'react'
+import { ACTIVE_PRODUCT } from '../constants'
 import { compose, first } from '../lib/functional'
 import {
   buy as buyProduct,
   getPurchases,
   getProducts,
 } from '../lib/payment'
 
+export const activeProducts = products =>
+  products.filter(product => product.state === ACTIVE_PRODUCT)
+
 export const userFactory = (products = []) => ({
-  isSubscribed: !!products.length,
+  isSubscribed: !!activeProducts(products).length,
   products,
   has: product => products.includes(product),
 })
@@ -27,6 +31,11 @@ export const useSubscription = () => {
   const [user, setUser] = useState(userFactory())
   const [purchaseError, setPurchaseError] = useState(null)
 
+  const getProduct = useCallback(
+    sku => first(products.filter(product => product.sku === sku)),
+    [products]
+  )
+
   const buy = useCallback(
     async sku => {
       setPurchaseError(null) // reset error
@@ -35,15 +44,14 @@ export const useSubscription = () => {
       } catch (e) {
         return setPurchaseError(e)
       }
+      // eager update user
+      setUser(
+        Object.assign({}, user, { products: [getProduct(sku)] })
+      )
       // rehydrate user
       return hydrate({ setProducts, setUser })
     },
-    [setPurchaseError, setUser, setProducts]
-  )
-
-  const getProduct = useCallback(
-    sku => first(products.filter(product => product.sku === sku)),
-    [products]
+    [user, getProduct]
   )
 
   useEffect(() => {

src/hooks/use-subscription.test.js

@@ -1,5 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
-import { useSubscription } from './use-subscription'
+import { ACTIVE_PRODUCT, CANCELLED_PRODUCT } from '../constants'
+import { useSubscription, activeProducts } from './use-subscription'
 
 jest.mock('../lib/payment')
 /* eslint-disable-next-line import-order-alphabetical/order */
@@ -11,8 +12,16 @@ beforeEach(() => {
   buy.mockReset()
 })
 
+test('activeProduct should filter to only active products', () => {
+  const products = [
+    { state: ACTIVE_PRODUCT },
+    { state: CANCELLED_PRODUCT },
+  ]
+  expect(activeProducts(products)).toHaveLength(1)
+})
+
 test('useSubscription should initialize products and purchases', async () => {
-  getPurchases.mockResolvedValue(['foo'])
+  getPurchases.mockResolvedValue([{ state: ACTIVE_PRODUCT }])
   getProducts.mockResolvedValue(['foo', 'bar'])
   const { result, waitForNextUpdate } = renderHook(() =>
     useSubscription()
@@ -21,10 +30,24 @@ test('useSubscription should initialize products and purchases', async () => {
   await waitForNextUpdate()
   await waitForNextUpdate()
   expect(result.current.user.isSubscribed).toBe(true)
-  expect(result.current.user.products).toEqual(['foo'])
+  expect(result.current.user.products).toEqual([
+    { state: ACTIVE_PRODUCT },
+  ])
   expect(result.current.products).toEqual(['foo', 'bar'])
 })
 
+test('useSubscription should be unsubbed if not active product', async () => {
+  getPurchases.mockResolvedValue([{ state: CANCELLED_PRODUCT }])
+  getProducts.mockResolvedValue(['foo', 'bar'])
+  const { result, waitForNextUpdate } = renderHook(() =>
+    useSubscription()
+  )
+  // 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'])
@@ -38,15 +61,19 @@ test('useSubscription should get purchases after calling buy', async () => {
   expect(result.current.user.isSubscribed).toBe(false)
   expect(result.current.user.products).toEqual([])
   // mock purchase again with purchased value
-  getPurchases.mockReset().mockResolvedValue(['foo'])
+  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(['foo'])
+  expect(result.current.user.products).toEqual([
+    { state: ACTIVE_PRODUCT },
+  ])
   expect(result.current.products).toEqual(['foo', 'bar'])
 })