From 805d0fe815f923cb6c101ee0697b74f2ee1307ec Mon Sep 17 00:00:00 2001
From: Alexey Padalko <korhaliv@protonmail.com>
Date: Thu, 21 Mar 2019 18:48:59 +0200
Subject: [PATCH] feat(ui): mark items with autopay enabled

---
 app/components/Autopay/AutopayCardView.js   |  5 +--
 app/components/Autopay/AutopayLimitBadge.js | 35 +++++++++++++++++++++
 app/reducers/autopay.js                     | 10 ++++--
 3 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 app/components/Autopay/AutopayLimitBadge.js

diff --git a/app/components/Autopay/AutopayCardView.js b/app/components/Autopay/AutopayCardView.js
index 4108b5085b6..68fa00e8c34 100644
--- a/app/components/Autopay/AutopayCardView.js
+++ b/app/components/Autopay/AutopayCardView.js
@@ -5,6 +5,7 @@ import { themeGet } from 'styled-system'
 import { Box, Flex } from 'rebass'
 import { Card, Heading } from 'components/UI'
 import AutopayAddButton from './AutopayAddButton'
+import AutopayLimitBadge from './AutopayLimitBadge'
 
 const CardWithBg = styled(Card)`
   position: relative;
@@ -47,7 +48,7 @@ const TextOverlay = styled(Overlay)`
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 `
 
-const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...rest }) => (
+const AutopayCardView = ({ merchant: { image, nickname, pubkey, isActive }, onClick, ...rest }) => (
   <Box {...rest} onClick={() => onClick(`${pubkey}`)}>
     <CardWithBg mb="12px" src={image}>
       <GradientOverlay />
@@ -57,7 +58,7 @@ const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...re
         </Heading.h1>
       </TextOverlay>
       <Overlay alignItems="flex-end" justifyContent="center" mt="12px">
-        <AutopayAddButton />
+        {isActive ? <AutopayLimitBadge /> : <AutopayAddButton />}
       </Overlay>
     </CardWithBg>
   </Box>
diff --git a/app/components/Autopay/AutopayLimitBadge.js b/app/components/Autopay/AutopayLimitBadge.js
new file mode 100644
index 00000000000..5025dd79e5c
--- /dev/null
+++ b/app/components/Autopay/AutopayLimitBadge.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Card, Flex, Box } from 'rebass'
+import { themeGet } from 'styled-system'
+import styled, { withTheme } from 'styled-components'
+import { tint } from 'polished'
+import Check from 'components/Icon/Check'
+
+const Gradient = styled(Card)`
+  background: linear-gradient(
+    to bottom,
+    ${props => tint(0.2, props.theme.colors[props.bg])},
+    ${props => props.theme.colors[props.bg]}
+  );
+`
+
+const AutopayLimitBadge = props => {
+  return (
+    <Gradient
+      bg="lightningOrange"
+      borderRadius="50%"
+      boxShadow={`0 0 24px 0 ${themeGet('colors.lightningOrange')(props)}`}
+      css={{ height: '35px' }}
+      width={35}
+      {...props}
+    >
+      <Flex alignItems="center" css={{ height: '100%' }} justifyContent="center">
+        <Box color="white">
+          <Check height={20} width={20} />
+        </Box>
+      </Flex>
+    </Gradient>
+  )
+}
+
+export default withTheme(AutopayLimitBadge)
diff --git a/app/reducers/autopay.js b/app/reducers/autopay.js
index d309933a930..ea59ac08621 100644
--- a/app/reducers/autopay.js
+++ b/app/reducers/autopay.js
@@ -137,12 +137,16 @@ autopaySelectors.selectedMerchant = createSelector(
 autopaySelectors.filteredMerchants = createSelector(
   autopaySelectors.merchants,
   autopaySelectors.searchQuery,
-  (merchants, searchQuery) => {
+  autopaySelectors.autopayList,
+  (merchants, searchQuery, autopayList) => {
+    const addIsActive = m => ({ ...m, isActive: [m.pubkey] in autopayList })
     if (!searchQuery) {
-      return merchants
+      return merchants.map(addIsActive)
     }
     const cleanedSearchQuery = searchQuery.toLowerCase()
-    return merchants.filter(m => m.nickname.toLowerCase().includes(cleanedSearchQuery))
+    return merchants
+      .filter(m => m.nickname.toLowerCase().includes(cleanedSearchQuery))
+      .map(addIsActive)
   }
 )