fix(recurring buy): fix close and keep buttons on recurring buy detai…

…ls modal
blockchain · Aug 17, 2021 · eba4f5c · eba4f5c
1 parent e19d709
commit eba4f5c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 22 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,19 +1,10 @@
 module.exports = {
-  stories: ['../packages/blockchain-wallet-v4-frontend/src/components/**/*.stories.@(tsx)'],
+  stories: ['../packages/blockchain-wallet-v4-frontend/src/components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-dark-mode'
   ],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-    }
-  },
   refs: {
     'new-core': {
       title: 'New Core Components',

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -31,3 +31,13 @@ const withIconsAndFonts = () => (story) => {
 }
 addDecorator(withTheme())
 addDecorator(withIconsAndFonts())
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyDetails.stories.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyDetails.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { IntlProvider } from 'react-intl'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 import { SBPaymentTypes } from '../../../../blockchain-wallet-v4/src/network/api/simpleBuy/types'
 import { RecurringBuyPeriods } from '../../data/types'
@@ -33,6 +34,10 @@ export default {
     )
   ],
   title: 'Flyouts/RecurringBuyDetails'
-}
+} as ComponentMeta<typeof RecurringBuyDetails>
 
-export const Default = (args) => <RecurringBuyDetails {...args} />
+export const Template: ComponentStory<typeof RecurringBuyDetails> = (args) => (
+  <RecurringBuyDetails {...args} />
+)
+
+export const Default = Template.bind({})
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyDetails.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyDetails.tsx
@@ -32,6 +32,9 @@ const RecurringBuyDetails = ({
   removeClick,
   standardAmount
 }: Props) => {
+  const closeClickCallback = useCallback(() => {
+    closeClick()
+  }, [closeClick])
   const removeClickCallback = useCallback(() => {
     removeClick(id)
   }, [removeClick, id])
@@ -46,7 +49,7 @@ const RecurringBuyDetails = ({
   const amountString = `${Exchange.getSymbol(currency)}${standardAmount}`
   return (
     <Container>
-      <Header data-e2e='recurringBuyDetailsClose' mode='close' onClick={closeClick}>
+      <Header data-e2e='recurringBuyDetailsClose' mode='close' onClick={closeClickCallback}>
         <FormattedMessage id='copy.recurring_buy' defaultMessage='Recurring Buy' />
       </Header>
       <Content mode='top'>

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyRemoveConfirm.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyRemoveConfirm.tsx
@@ -16,6 +16,9 @@ const RecurringBuyRemoveConfirm = memo(
       setSubmitting(true)
       removeClick(id)
     }, [setSubmitting, removeClick, id])
+    const closeCallback = useCallback(() => {
+      close()
+    }, [close])
 
     return (
       <Container>
@@ -62,7 +65,7 @@ const RecurringBuyRemoveConfirm = memo(
                 data-e2e='removeRecurringBuyKeepButton'
                 nature='light'
                 fullwidth
-                onClick={close}
+                onClick={closeCallback}
                 disabled={submitting}
               >
                 <FormattedMessage id='buttons.keep' defaultMessage='Keep' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Details/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Details/index.tsx
@@ -13,21 +13,13 @@ const Success = ({ activeDetails, close: closeClick, removeClick }: Props) => {
   if (!activeDetails) return null
   const { id, nextPayment, paymentMethod, period } = activeDetails
   const detailProps = {
-    // for future use
     closeClick,
-
     complete: false,
-
     crypto: activeDetails.destinationCurrency,
-
     currency: activeDetails.inputCurrency,
-
     id,
-
     nextPayment,
-
     paymentMethod,
-
     period,
     removeClick,
     standardAmount: convertBaseToStandard(activeDetails.inputCurrency, activeDetails.inputValue)