Adds Share action on mobile, and fixes some styles (#548)

* Adds Share action on mobile, and fixes some styles

* Update styles

src/components/appNavigation/__tests__/__snapshots__/AppNavigation.js.snap

@@ -857,7 +857,7 @@ exports[`AppNavigation matches snapshot 1`] = `
                         Object {
                           "color": "rgba(255,255,255,1.00)",
                           "fontFamily": "gooddollar",
-                          "fontSize": "16px",
+                          "fontSize": "14px",
                           "fontStyle": "normal",
                           "fontWeight": "normal",
                           "marginRight": "16px",
@@ -1256,7 +1256,7 @@ exports[`AppNavigation matches snapshot 1`] = `
                         Object {
                           "color": "rgba(255,255,255,1.00)",
                           "fontFamily": "gooddollar",
-                          "fontSize": "16px",
+                          "fontSize": "14px",
                           "fontStyle": "normal",
                           "fontWeight": "normal",
                           "marginLeft": "16px",

src/components/common/buttons/CustomButton.js

@@ -20,7 +20,7 @@ export type ButtonProps = {
   mode?: string,
   onPress: any,
   style?: any,
-  styles?: any,
+  styles: any,
   textStyle?: any,
   theme: DefaultTheme,
   uppercase?: boolean,
@@ -29,6 +29,7 @@ export type ButtonProps = {
 type TextContentProps = {
   children: any,
   dark?: boolean,
+  color?: string,
   styles: any,
   textStyle: any,
   uppercase?: boolean,
@@ -151,18 +152,17 @@ const CustomButton = (props: ButtonProps) => {
     <BaseButton
       dark={dark}
       mode={mode}
-      style={[styles.buttonStyle, style]}
       contentStyle={styles.contentStyle}
       theme={{ ...theme, roundness: 50 }}
       uppercase={uppercase}
       disabled={disabled || loading}
-      onPress={props.onPress}
-      color={color}
       {...buttonProps}
+      color={color}
+      style={[styles.buttonStyle, style]}
     >
       <View style={styles.contentWrapper}>
         {icon && (!iconAlignment || iconAlignment === 'left') && (
-          <IconButton icon={icon} theme={theme} dark={dark} size={iconSize} style={styles.leftIcon} />
+          <IconButton icon={icon} theme={theme} dark={dark} size={iconSize || 14} style={styles.leftIcon} />
         )}
         {loading && (
           <ActivityIndicator
@@ -176,7 +176,7 @@ const CustomButton = (props: ButtonProps) => {
           {children}
         </TextContent>
         {icon && iconAlignment === 'right' && (
-          <IconButton icon={icon} theme={theme} dark={dark} size={iconSize} style={styles.rightIcon} />
+          <IconButton icon={icon} theme={theme} dark={dark} size={iconSize || 14} style={styles.rightIcon} />
         )}
       </View>
     </BaseButton>

src/components/common/buttons/ShareButton.js

@@ -0,0 +1,47 @@
+// @flow
+import React from 'react'
+import { isMobile } from 'mobile-device-detect'
+import { useErrorDialog } from '../../../lib/undux/utils/dialog'
+import CustomButton from './CustomButton'
+import CopyButton from './CopyButton'
+
+type ShareButtonProps = {
+  share: any,
+  onPressDone?: Function,
+  actionText: string,
+  buttonProps: any,
+}
+
+const ShareButton = ({ share, onPressDone, actionText, ...buttonProps }: ShareButtonProps) => {
+  const [showErrorDialog] = useErrorDialog()
+
+  console.info('getPaymentLink', { share })
+  const shareAction = async () => {
+    try {
+      await navigator.share(share)
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        showErrorDialog(e)
+      }
+    }
+  }
+
+  if (isMobile && navigator.share) {
+    return (
+      <CustomButton onPress={shareAction} {...buttonProps}>
+        {actionText}
+      </CustomButton>
+    )
+  }
+  return (
+    <CopyButton toCopy={share.url} onPressDone={onPressDone} {...buttonProps}>
+      {actionText}
+    </CopyButton>
+  )
+}
+
+ShareButton.defaultProps = {
+  buttonProps: {},
+}
+
+export default ShareButton

src/components/common/index.js

@@ -18,6 +18,7 @@ import QRCode from './view/QRCode'
 import SaveButton from './buttons/SaveButton'
 import ScanQRButton from './buttons/ScanQRButton'
 import Section from './layout/Section'
+import ShareButton from './buttons/ShareButton'
 import Text from './view/Text'
 import UserAvatar from './view/UserAvatar'
 import Wrapper from './layout/Wrapper'
@@ -44,6 +45,7 @@ export {
   SaveButton,
   ScanQRButton,
   Section,
+  ShareButton,
   Text,
   UserAvatar,
   Wrapper,

src/components/common/modal/ModalActionsByFeedType.js

@@ -2,12 +2,12 @@
 import React, { useState } from 'react'
 import { View } from 'react-native'
 import CustomButton from '../buttons/CustomButton'
-import CopyButton from '../buttons/CopyButton'
+import ShareButton from '../buttons/ShareButton'
 import logger from '../../../lib/logger/pino-logger'
 import normalize from '../../../lib/utils/normalizeText'
 import userStorage from '../../../lib/gundb/UserStorage'
 import goodWallet from '../../../lib/wallet/GoodWallet'
-import { generateShareLink } from '../../../lib/share'
+import { generateSendShareObject, generateShareLink } from '../../../lib/share'
 import { useErrorDialog } from '../../../lib/undux/utils/dialog'
 import { withStyles } from '../../../lib/styles'
 
@@ -45,11 +45,13 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose }) => {
     handleModalClose()
   }
 
-  const getPaymentLink = () =>
-    generateShareLink('send', {
+  const getPaymentLink = () => {
+    const url = generateShareLink('send', {
       paymentCode: item.id,
       reason: item.data.message,
     })
+    return generateSendShareObject(url, item.data.amount, item.data.endpoint.fullName, '')
+  }
 
   const readMore = () => {
     log.info({ item, action: 'readMore' })
@@ -69,59 +71,72 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose }) => {
       return (
         <>
           <View style={styles.buttonsView}>
-            <CustomButton
-              mode="outlined"
-              style={[styles.button, { borderColor: theme.colors.red }]}
-              onPress={cancelPayment}
-              color={theme.colors.red}
-              loading={state.cancelPaymentLoading}
-              textStyle={styles.buttonTextStyle}
-            >
-              Cancel payment link
-            </CustomButton>
-            <CopyButton
-              mode="outlined"
-              style={styles.rightButton}
-              toCopy={getPaymentLink()}
-              iconColor={theme.colors.primary}
-              textStyle={styles.buttonTextStyle}
-            >
-              Copy link
-            </CopyButton>
+            <View style={styles.rightButtonContainer}>
+              <CustomButton
+                mode="outlined"
+                style={[styles.button, { borderColor: theme.colors.red }]}
+                onPress={cancelPayment}
+                color={theme.colors.red}
+                loading={state.cancelPaymentLoading}
+                textStyle={styles.buttonTextStyle}
+              >
+                Cancel payment link
+              </CustomButton>
+            </View>
+            <View style={styles.rightButtonContainer}>
+              <ShareButton
+                share={getPaymentLink()}
+                actionText="Share as link"
+                mode="outlined"
+                style={styles.rightButton}
+                iconColor={theme.colors.primary}
+                textStyle={styles.buttonTextStyle}
+              />
+            </View>
           </View>
           <View style={styles.buttonsView}>
-            <CustomButton mode="contained" style={styles.rightButton} onPress={handleModalClose}>
-              Ok
-            </CustomButton>
+            <View style={styles.rightButtonContainer}>
+              <CustomButton mode="contained" style={styles.rightButton} onPress={handleModalClose}>
+                Ok
+              </CustomButton>
+            </View>
           </View>
         </>
       )
     case 'message':
       return (
         <View style={styles.buttonsView}>
-          <CustomButton mode="outlined" style={styles.button} onPress={readMore}>
-            Read more
-          </CustomButton>
-          <CustomButton mode="contained" style={styles.rightButton} onPress={shareMessage}>
-            Share
-          </CustomButton>
+          <View style={styles.rightButtonContainer}>
+            <CustomButton mode="outlined" style={styles.button} onPress={readMore}>
+              Read more
+            </CustomButton>
+          </View>
+          <View style={styles.rightButtonContainer}>
+            <CustomButton mode="contained" style={styles.rightButton} onPress={shareMessage}>
+              Share
+            </CustomButton>
+          </View>
         </View>
       )
     case 'invite':
       return (
         <View style={styles.buttonsView}>
-          <CustomButton mode="text" style={styles.button} onPress={handleModalClose}>
-            Later
-          </CustomButton>
-          <CustomButton
-            mode="contained"
-            style={styles.rightButton}
-            onPress={invitePeople}
-            iconAlignment="right"
-            icon="invite"
-          >
-            Invite
-          </CustomButton>
+          <View style={styles.rightButtonContainer}>
+            <CustomButton mode="text" style={styles.button} onPress={handleModalClose}>
+              Later
+            </CustomButton>
+          </View>
+          <View style={styles.rightButtonContainer}>
+            <CustomButton
+              mode="contained"
+              style={styles.rightButton}
+              onPress={invitePeople}
+              iconAlignment="right"
+              icon="invite"
+            >
+              Invite
+            </CustomButton>
+          </View>
         </View>
       )
     case 'feedback':
@@ -160,9 +175,14 @@ const getStylesFromProps = ({ theme }) => ({
     minWidth: 96,
   },
   rightButton: {
+    minWidth: 96,
+  },
+  rightButtonContainer: {
     marginLeft: theme.sizes.default,
     marginTop: theme.sizes.default,
-    minWidth: 96,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'stretch',
   },
   buttonTextStyle: {
     fontSize: normalize(14),

src/components/dashboard/Confirmation.js

@@ -1,11 +1,13 @@
 // @flow
 import React, { useMemo } from 'react'
-import { isMobile } from 'mobile-device-detect'
 import GDStore from '../../lib/undux/GDStore'
 import { generateReceiveShareObject, generateSendShareObject } from '../../lib/share'
-import { BigGoodDollar, CopyButton, CustomButton, QRCode, Section, Wrapper } from '../common'
+import BigGoodDollar from '../common/view/BigGoodDollar'
+import QRCode from '../common/view/QRCode'
+import Section from '../common/layout/Section'
+import Wrapper from '../common/layout/Wrapper'
+import ShareButton from '../common/buttons/ShareButton'
 import TopBar from '../common/view/TopBar'
-import { useErrorDialog } from '../../lib/undux/utils/dialog'
 
 import { useScreenState } from '../appNavigation/stackNavigation'
 import { withStyles } from '../../lib/styles'
@@ -21,7 +23,6 @@ const ReceiveConfirmation = ({ screenProps, styles, ...props }: ReceiveProps) =>
   const profile = GDStore.useStore().get('profile')
   const [screenState] = useScreenState(screenProps)
   const { amount, code, reason, counterPartyDisplayName } = screenState
-  const [showErrorDialog] = useErrorDialog()
   const { params } = props.navigation.state
 
   const share = useMemo(
@@ -32,16 +33,6 @@ const ReceiveConfirmation = ({ screenProps, styles, ...props }: ReceiveProps) =>
     [code]
   )
 
-  const shareAction = async () => {
-    try {
-      await navigator.share(share)
-    } catch (e) {
-      if (e.name !== 'AbortError') {
-        showErrorDialog(e)
-      }
-    }
-  }
-  console.info({ styles })
   return (
     <Wrapper>
       <TopBar push={screenProps.push} hideBalance />
@@ -68,13 +59,7 @@ const ReceiveConfirmation = ({ screenProps, styles, ...props }: ReceiveProps) =>
           <Section.Text style={styles.textRow}>{reason}</Section.Text>
         </Section.Stack>
         <Section.Stack>
-          {isMobile && navigator.share ? (
-            <CustomButton onPress={shareAction}>Share as link</CustomButton>
-          ) : (
-            <CopyButton toCopy={share.url} onPressDone={screenProps.goToRoot}>
-              Share as link
-            </CopyButton>
-          )}
+          <ShareButton share={share} onPressDone={screenProps.goToRoot} actionText="Share as link" />
         </Section.Stack>
       </Section>
     </Wrapper>

src/components/dashboard/SendConfirmation.web.js

@@ -1,7 +1,9 @@
 // @flow
 import React from 'react'
 import { useScreenState } from '../appNavigation/stackNavigation'
-import { CopyButton, Section, Wrapper } from '../common'
+import CopyButton from '../common/buttons/CopyButton'
+import Section from '../common/layout/Section'
+import Wrapper from '../common/layout/Wrapper'
 import TopBar from '../common/view/TopBar'
 import { withStyles } from '../../lib/styles'
 import SummaryTable from '../common/view/SummaryTable'

src/components/dashboard/__tests__/__snapshots__/Dashboard.js.snap

@@ -857,7 +857,7 @@ exports[`Dashboard matches snapshot 1`] = `
                         Object {
                           "color": "rgba(255,255,255,1.00)",
                           "fontFamily": "gooddollar",
-                          "fontSize": "16px",
+                          "fontSize": "14px",
                           "fontStyle": "normal",
                           "fontWeight": "normal",
                           "marginRight": "16px",
@@ -1256,7 +1256,7 @@ exports[`Dashboard matches snapshot 1`] = `
                         Object {
                           "color": "rgba(255,255,255,1.00)",
                           "fontFamily": "gooddollar",
-                          "fontSize": "16px",
+                          "fontSize": "14px",
                           "fontStyle": "normal",
                           "fontWeight": "normal",
                           "marginLeft": "16px",