refactor: receive screen

.storybook/storybook.requires.js

@@ -49,6 +49,7 @@ const getStories = () => {
     "./app/components/currency-keyboard/currency-keyboard.stories.tsx": require("../app/components/currency-keyboard/currency-keyboard.stories.tsx"),
     "./app/components/custom-modal/custom-modal.stories.tsx": require("../app/components/custom-modal/custom-modal.stories.tsx"),
     "./app/components/menu-select/menu-select.stories.tsx": require("../app/components/menu-select/menu-select.stories.tsx"),
+    "./app/components/button-group/button-group.stories.tsx": require("../app/components/button-group/button-group.stories.tsx"),
     "./app/components/modal-nfc/modal-nfc.stories.tsx": require("../app/components/modal-nfc/modal-nfc.stories.tsx"),
     "./app/components/set-default-account-modal/set-default-account-modal.stories.tsx": require("../app/components/set-default-account-modal/set-default-account-modal.stories.tsx"),
     "./app/components/set-lightning-address-modal/set-lightning-address-modal.stories.tsx": require("../app/components/set-lightning-address-modal/set-lightning-address-modal.stories.tsx"),
@@ -79,7 +80,7 @@ const getStories = () => {
     "./app/screens/home-screen/home-screen.stories.tsx": require("../app/screens/home-screen/home-screen.stories.tsx"),
     "./app/screens/phone-auth-screen/phone-flow.stories.tsx": require("../app/screens/phone-auth-screen/phone-flow.stories.tsx"),
     "./app/screens/phone-auth-screen/phone-validation.stories.tsx": require("../app/screens/phone-auth-screen/phone-validation.stories.tsx"),
-    "./app/screens/receive-bitcoin-screen/receive-wrapper.stories.tsx": require("../app/screens/receive-bitcoin-screen/receive-wrapper.stories.tsx"),
+    "./app/screens/receive-bitcoin-screen/receive-screen.stories.tsx": require("../app/screens/receive-bitcoin-screen/receive-screen.stories.tsx"),
     "./app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-detail-screen.stories.tsx": require("../app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-detail-screen.stories.tsx"),
     "./app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-result-screen.stories.tsx": require("../app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-result-screen.stories.tsx"),
     "./app/screens/send-bitcoin-screen/confirm-destination-modal.stories.tsx": require("../app/screens/send-bitcoin-screen/confirm-destination-modal.stories.tsx"),

__tests__/screens/receive.spec.tsx

@@ -2,12 +2,12 @@
 
 import { act, render } from "@testing-library/react-native"
 import { ContextForScreen } from "./helper"
-import ReceiveWrapperScreen from "@app/screens/receive-bitcoin-screen/receive-wrapper"
+import ReceiveScreen from "@app/screens/receive-bitcoin-screen/receive-wrapper"
 
 it("Receive", async () => {
   render(
     <ContextForScreen>
-      <ReceiveWrapperScreen />
+      <ReceiveScreen />
     </ContextForScreen>,
   )
   await act(async () => {})

app/components/amount-input/amount-input-button.tsx

@@ -12,6 +12,7 @@ export type AmountInputButtonProps = {
   disabled?: boolean
   secondaryValue?: string
   primaryTextTestProps?: string
+  showValuesIfDisabled?: boolean
 } & PressableProps
 
 export const AmountInputButton: React.FC<AmountInputButtonProps> = ({
@@ -22,6 +23,7 @@ export const AmountInputButton: React.FC<AmountInputButtonProps> = ({
   disabled,
   secondaryValue,
   primaryTextTestProps,
+  showValuesIfDisabled = true,
   ...props
 }) => {
   const {
@@ -46,6 +48,7 @@ export const AmountInputButton: React.FC<AmountInputButtonProps> = ({
       case disabled:
         colorStyles = {
           backgroundColor: colors.grey5,
+          opacity: 0.5,
         }
         break
       default:
@@ -65,13 +68,18 @@ export const AmountInputButton: React.FC<AmountInputButtonProps> = ({
     return [colorStyles, sizeStyles]
   }
 
+  if (!showValuesIfDisabled) {
+    value = ""
+    secondaryValue = ""
+  }
+
   const primaryText = value || placeholder || ""
 
   return (
     <Pressable {...props} style={pressableStyle} disabled={disabled}>
       <View style={styles.contentContainerStyle}>
         <Text
-          type="p1"
+          type="p2"
           color={error ? colors.error : undefined}
           numberOfLines={1}
           ellipsizeMode="middle"

app/components/amount-input/amount-input.tsx

@@ -22,6 +22,7 @@ export type AmountInputProps = {
   minAmount?: MoneyAmount<WalletOrDisplayCurrency>
   canSetAmount?: boolean
   isSendingMax?: boolean
+  showValuesIfDisabled?: boolean
 }
 
 export const AmountInput: React.FC<AmountInputProps> = ({
@@ -33,6 +34,7 @@ export const AmountInput: React.FC<AmountInputProps> = ({
   convertMoneyAmount,
   canSetAmount = true,
   isSendingMax = false,
+  showValuesIfDisabled = true,
 }) => {
   const [isSettingAmount, setIsSettingAmount] = React.useState(false)
   const { formatMoneyAmount, getSecondaryAmountIfCurrencyIsDifferent } =
@@ -117,10 +119,13 @@ export const AmountInput: React.FC<AmountInputProps> = ({
 
   return (
     <AmountInputButton
+      placeholder={LL.AmountInputButton.tapToSetAmount()}
+      iconName="pencil"
       value={formattedPrimaryAmount}
       secondaryValue={formattedSecondaryAmount}
       disabled={true}
       primaryTextTestProps={"Amount Input Button Amount"}
+      showValuesIfDisabled={showValuesIfDisabled}
       {...testProps("Amount Input Button")}
     />
   )

app/components/button-group/button-group.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Story, UseCase } from "../../../.storybook/views"
+import { ButtonGroup } from "."
+
+export default {
+  title: "ButtonGroup",
+  component: ButtonGroup,
+}
+
+export const Default = () => {
+  return (
+    <Story>
+      <UseCase text="Default">
+        <ButtonGroup
+          selectedId="paycode"
+          onPress={() => {}}
+          buttons={[
+            { id: "invoice", text: "Invoice", icon: "md-flash" },
+            { id: "paycode", text: "Paycode", icon: "md-at" },
+            { id: "onchain", text: "On-chain", icon: "logo-bitcoin" },
+          ]}
+        />
+      </UseCase>
+    </Story>
+  )
+}

app/components/button-group/button-group.tsx

@@ -0,0 +1,90 @@
+import React from "react"
+import { StyleProp, TouchableWithoutFeedback, View, ViewStyle } from "react-native"
+import { Text, makeStyles } from "@rneui/themed"
+import Icon from "react-native-vector-icons/Ionicons"
+
+type ButtonForButtonGroupProps = {
+  id: string
+  text: string
+  icon: string | React.ReactElement
+}
+
+const ButtonForButtonGroup: React.FC<
+  ButtonForButtonGroupProps & {
+    selected: boolean
+    onPress: () => void
+  }
+> = ({ text, icon, selected, onPress }) => {
+  const styles = useStyles(Boolean(selected))
+  return (
+    <TouchableWithoutFeedback onPress={onPress}>
+      <View style={styles.button}>
+        <Text style={styles.text}>{text}</Text>
+        {typeof icon === "string" ? <Icon style={styles.text} name={icon} /> : icon}
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+export type ButtonGroupProps = {
+  selectedId: string
+  buttons: ButtonForButtonGroupProps[]
+  style?: StyleProp<ViewStyle>
+  disabled?: boolean
+  onPress: (id: string) => void
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  buttons,
+  selectedId,
+  onPress,
+  style,
+  disabled,
+}) => {
+  const styles = useStyles()
+  const selectedButton = buttons.find(({ id }) => id === selectedId)
+
+  return (
+    <View style={[styles.buttonGroup, style]}>
+      {!disabled &&
+        buttons.map((props) => (
+          <ButtonForButtonGroup
+            key={props.id}
+            {...props}
+            onPress={() => {
+              if (selectedId !== props.id) {
+                onPress(props.id)
+              }
+            }}
+            selected={selectedId === props.id}
+          />
+        ))}
+      {disabled && selectedButton && (
+        <ButtonForButtonGroup {...selectedButton} selected={true} onPress={() => {}} />
+      )}
+    </View>
+  )
+}
+
+const useStyles = makeStyles(({ colors }, selected: boolean) => ({
+  button: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 10,
+    paddingVertical: 10,
+    marginHorizontal: 3,
+    borderRadius: 5,
+    backgroundColor: selected ? colors.grey5 : colors.grey4,
+  },
+  text: {
+    fontSize: 16,
+    color: selected ? colors.primary : colors.grey1,
+  },
+  buttonGroup: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+}))

app/components/button-group/index.ts

@@ -0,0 +1 @@
+export * from "./button-group"

app/components/note-input/index.ts

@@ -0,0 +1 @@
+export * from "./note-input"

app/components/note-input/note-input.tsx

@@ -0,0 +1,85 @@
+import React from "react"
+
+import { makeStyles } from "@rneui/themed"
+import { View, TextInput, StyleProp, ViewStyle } from "react-native"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import NoteIcon from "@app/assets/icons/note.svg"
+import { useTheme } from "@rneui/themed"
+
+export type NoteInputProps = {
+  onBlur?: (() => void) | undefined
+  onChangeText?: ((text: string) => void) | undefined
+  value?: string | undefined
+  editable?: boolean | undefined
+  style?: StyleProp<ViewStyle>
+}
+
+export const NoteInput: React.FC<NoteInputProps> = ({
+  onChangeText,
+  value,
+  editable,
+  onBlur,
+  style,
+}) => {
+  const styles = useStyles(Boolean(editable))
+  const {
+    theme: { colors },
+  } = useTheme()
+  const { LL } = useI18nContext()
+
+  return (
+    <View style={[styles.fieldBackground, style]}>
+      <View style={styles.noteContainer}>
+        <TextInput
+          style={styles.noteInput}
+          placeholder={"Add Note"}
+          placeholderTextColor={colors.black}
+          onChangeText={onChangeText}
+          onBlur={onBlur}
+          value={value}
+          editable={editable}
+          selectTextOnFocus
+          maxLength={500}
+        />
+        <View style={styles.noteIconContainer}>
+          <NoteIcon style={styles.noteIcon} />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const useStyles = makeStyles(({ colors }, editable: boolean) => ({
+  fieldBackground: {
+    flexDirection: "row",
+    borderStyle: "solid",
+    overflow: "hidden",
+    backgroundColor: colors.grey5,
+    paddingHorizontal: 10,
+    borderRadius: 10,
+    alignItems: "center",
+    height: 60,
+    opacity: editable ? 1 : 0.5,
+  },
+  fieldContainer: {
+    marginBottom: 12,
+  },
+  noteContainer: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  noteIconContainer: {
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  noteIcon: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  noteInput: {
+    flex: 1,
+    color: colors.black,
+    fontSize: 16,
+  },
+}))