feat(GenericError): add generic error flyout and nabu error

packages/blockchain-wallet-v4-frontend/src/components/Badge/IconBadge/IconBadge.stories.tsx

@@ -20,9 +20,5 @@ const Template: ComponentStory<IconBadgeComponent> = (args) => (
 export const Default = Template.bind({})
 Default.args = {
   backgroundColor: 'orange',
-  children: (
-    <Icon label='' size='sm' color='orange600'>
-      <IconActivity />
-    </Icon>
-  )
+  children: <IconActivity />
 }

packages/blockchain-wallet-v4-frontend/src/components/Badge/IconBadge/IconBadge.tsx

@@ -1,4 +1,16 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
 import { BaseBadge } from '../BaseBadge'
 import { IconBadgeComponent } from './IconBadge.types'
 
-export const IconBadge: IconBadgeComponent = BaseBadge
+export const IconBadge = styled<IconBadgeComponent>(({ color, ...props }) => (
+  <BaseBadge {...props} />
+))`
+  ${({ color, size = 32, theme }) => css`
+    height: ${size}px;
+    width: ${size}px;
+    font-size: ${size}px;
+    color: ${color ? theme[color] || color : 'inherit'};
+  `}
+`

packages/blockchain-wallet-v4-frontend/src/components/Badge/IconBadge/IconBadge.types.ts

@@ -2,6 +2,8 @@ import { FC } from 'react'
 
 import { BaseBadgeProps } from '../BaseBadge'
 
-export type IconBadgeProps = BaseBadgeProps
+export type IconBadgeProps = BaseBadgeProps & {
+  color?: string
+}
 
 export type IconBadgeComponent = FC<IconBadgeProps>

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ActionsList/ActionsList.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { Flex } from 'components/Flex'
+
+import { ActionsListComponent } from './ActionsList.types'
+
+const ActionsList: ActionsListComponent = ({ children }) => (
+  <Flex gap={16} flexDirection='column'>
+    {children}
+  </Flex>
+)
+
+export default ActionsList

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ActionsList/ActionsList.types.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+type ActionsListProps = {}
+
+type ActionsListComponent = FC<ActionsListProps>
+
+export type { ActionsListComponent, ActionsListProps }

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ActionsList/index.ts

@@ -0,0 +1,2 @@
+export { default as ActionsList } from './ActionsList'
+export type { ActionsListComponent, ActionsListProps } from './ActionsList.types'

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ErrorContent/ErrorContent.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { ErrorContent, ErrorContentComponent } from '.'
+
+export default {
+  component: ErrorContent,
+  title: 'Components/GenericError/ErrorContent'
+} as ComponentMeta<ErrorContentComponent>
+
+const Template: ComponentStory<ErrorContentComponent> = (args) => <ErrorContent {...args} />
+
+export const Generic = Template.bind({})
+Generic.args = {
+  message:
+    'Here’s some explainer text that helps the user understand the problem, with a potential link for the user to tap to learn more.',
+  title: 'Error Title'
+}

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ErrorContent/ErrorContent.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Text } from 'blockchain-info-components'
+import { Flex } from 'components/Flex'
+
+import { ErrorContentComponent } from './ErrorContent.types'
+
+const ErrorContent: ErrorContentComponent = ({ message, title }) => {
+  return (
+    <Flex alignItems='center' justifyContent='center' flexDirection='column' gap={8}>
+      <Text
+        color='grey900'
+        weight={600}
+        size='20px'
+        lineHeight='30px'
+        style={{ textAlign: 'center' }}
+      >
+        {title}
+      </Text>
+
+      <Text
+        color='grey600'
+        weight={500}
+        size='14px'
+        lineHeight='20px'
+        style={{ textAlign: 'center' }}
+      >
+        {message}
+      </Text>
+    </Flex>
+  )
+}
+
+export default ErrorContent

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ErrorContent/ErrorContent.types.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react'
+
+type ErrorContentProps = {
+  children?: never
+  message?: ReactNode
+  title: ReactNode
+}
+
+type ErrorContentComponent = FC<ErrorContentProps>
+
+export type { ErrorContentComponent, ErrorContentProps }

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ErrorContent/index.ts

@@ -0,0 +1,2 @@
+export { default as ErrorContent } from './ErrorContent'
+export type { ErrorContentComponent, ErrorContentProps } from './ErrorContent.types'

packages/blockchain-wallet-v4-frontend/src/components/GenericError/GenericErrorLayout/GenericErrorLayout.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { Button, Icon } from 'blockchain-info-components'
+
+import {
+  ActionsList,
+  ErrorContent,
+  GenericErrorLayout,
+  GenericErrorLayoutComponent,
+  ImageWithSeverity
+} from '..'
+
+export default {
+  component: GenericErrorLayout,
+  title: 'Components/GenericError/GenericErrorLayout'
+} as ComponentMeta<GenericErrorLayoutComponent>
+
+const Template: ComponentStory<GenericErrorLayoutComponent> = (args) => (
+  <GenericErrorLayout {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  actions: (
+    <ActionsList>
+      <Button data-e2e='hello' nature='primary' fullwidth>
+        Primary
+      </Button>
+      <Button data-e2e='hello' nature='empty-blue'>
+        Minimal
+      </Button>
+    </ActionsList>
+  ),
+  children: (
+    <>
+      <ImageWithSeverity>
+        <Icon size='72px' name='BTC' />
+      </ImageWithSeverity>
+
+      <ErrorContent
+        title='Error Title'
+        message='Here’s some explainer text that helps the user understand the problem, with a potential link for the user to tap to learn more.'
+      />
+    </>
+  )
+}

packages/blockchain-wallet-v4-frontend/src/components/GenericError/GenericErrorLayout/GenericErrorLayout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Flex } from 'components/Flex'
+
+import { GenericErrorLayoutComponent } from './GenericErrorLayout.types'
+
+const GenericErrorLayout: GenericErrorLayoutComponent = ({ actions, children }) => (
+  <Flex flexDirection='column' gap={40}>
+    <Flex gap={24} flexDirection='column' alignItems='stretch' justifyContent='center'>
+      {children}
+    </Flex>
+
+    {actions}
+  </Flex>
+)
+
+export default GenericErrorLayout

packages/blockchain-wallet-v4-frontend/src/components/GenericError/GenericErrorLayout/GenericErrorLayout.types.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react'
+
+type GenericErrorLayoutProps = {
+  actions?: ReactNode
+}
+
+type GenericErrorLayoutComponent = FC<GenericErrorLayoutProps>
+
+export type { GenericErrorLayoutComponent, GenericErrorLayoutProps }

packages/blockchain-wallet-v4-frontend/src/components/GenericError/GenericErrorLayout/index.ts

@@ -0,0 +1,5 @@
+export { default as GenericErrorLayout } from './GenericErrorLayout'
+export type {
+  GenericErrorLayoutComponent,
+  GenericErrorLayoutProps
+} from './GenericErrorLayout.types'

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ImageWithSeverity/ImageWithSeverity.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { Icon } from 'blockchain-info-components'
+
+import { ImageWithSeverity, ImageWithSeverityComponent } from '.'
+
+export default {
+  component: ImageWithSeverity,
+  title: 'Components/GenericError/ImageWithSeverity'
+} as ComponentMeta<ImageWithSeverityComponent>
+
+const Template: ComponentStory<ImageWithSeverityComponent> = (args) => (
+  <ImageWithSeverity {...args} />
+)
+
+export const BTC = Template.bind({})
+BTC.args = {
+  children: <Icon size='72px' name='BTC' />
+}

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ImageWithSeverity/ImageWithSeverity.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { IconAlert } from '@blockchain-com/icons'
+import { useRecord } from 'hooks'
+
+import { BadgePlacement, IconBadge } from 'components/Badge'
+import { Flex } from 'components/Flex'
+
+import { ImageWithSeverityComponent } from './ImageWithSeverity.types'
+
+const ImageWithSeverity: ImageWithSeverityComponent = ({ children, severity = 'warning' }) => {
+  const [severityBadge] = useRecord(severity, {
+    warning: (
+      <IconBadge color='orange600'>
+        <IconAlert />
+      </IconBadge>
+    )
+  })
+
+  return (
+    <Flex justifyContent='center'>
+      <BadgePlacement shape='circle' badge={severityBadge}>
+        {children}
+      </BadgePlacement>
+    </Flex>
+  )
+}
+
+export default ImageWithSeverity

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ImageWithSeverity/ImageWithSeverity.types.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react'
+
+type ImageWithSeverityProps = {
+  children: ReactNode
+  severity?: 'warning'
+}
+
+type ImageWithSeverityComponent = FC<ImageWithSeverityProps>
+
+export type { ImageWithSeverityComponent, ImageWithSeverityProps }

packages/blockchain-wallet-v4-frontend/src/components/GenericError/ImageWithSeverity/index.ts

@@ -0,0 +1,2 @@
+export { default as ImageWithSeverity } from './ImageWithSeverity'
+export type { ImageWithSeverityComponent, ImageWithSeverityProps } from './ImageWithSeverity.types'

packages/blockchain-wallet-v4-frontend/src/components/GenericError/index.ts

@@ -0,0 +1,4 @@
+export * from './ActionsList'
+export * from './ErrorContent'
+export * from './GenericErrorLayout'
+export * from './ImageWithSeverity'

packages/blockchain-wallet-v4-frontend/src/components/GenericNabuError/GenericNabuError.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { NabuError } from 'services/errors'
+
+import GenericNabuError from './GenericNabuError'
+import { GenericNabuErrorComponent } from './GenericNabuError.types'
+
+const genericNabuError = new NabuError({
+  message:
+    'Here’s some explainer text that helps the user understand the problem, with a potential link for the user to tap to learn more.',
+  title: 'Error Title'
+})
+
+const paymentFailureError = new NabuError({
+  message:
+    'There was an issue with your bank. Please try again or use a different payment method. If this keeps happening, please contact support.',
+  title: 'Payment Failed'
+})
+
+export default {
+  argTypes: {
+    error: {
+      mapping: {
+        'Payment failure': paymentFailureError,
+        generic: genericNabuError
+      },
+      options: ['generic', 'Payment failure']
+    }
+  },
+  component: GenericNabuError,
+  title: 'Components/GenericNabuError'
+} as ComponentMeta<GenericNabuErrorComponent>
+
+const Template: ComponentStory<GenericNabuErrorComponent> = (args) => <GenericNabuError {...args} />
+
+export const Generic = Template.bind({})
+Generic.args = {
+  error: genericNabuError
+}
+
+export const paymnetFailure = Template.bind({})
+paymnetFailure.args = {
+  error: paymentFailureError
+}

packages/blockchain-wallet-v4-frontend/src/components/GenericNabuError/GenericNabuError.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { ErrorContent, GenericErrorLayout, ImageWithSeverity } from 'components/GenericError'
+
+import { GenericNabuErrorComponent } from './GenericNabuError.types'
+
+const GenericNabuError: GenericNabuErrorComponent = ({ error }) => {
+  const iconSrc = error.icon
+
+  return (
+    <GenericErrorLayout>
+      {!!iconSrc && (
+        <ImageWithSeverity>
+          <img alt='' style={{ height: 72, width: 72 }} src={iconSrc} />
+        </ImageWithSeverity>
+      )}
+
+      <ErrorContent title={error.title} message={error.message} />
+    </GenericErrorLayout>
+  )
+}
+
+export default GenericNabuError

packages/blockchain-wallet-v4-frontend/src/components/GenericNabuError/GenericNabuError.types.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+import { NabuError } from 'services/errors'
+
+type GenericNabuErrorProps = {
+  error: NabuError
+}
+
+type GenericNabuErrorComponent = FC<GenericNabuErrorProps>
+
+export type { GenericNabuErrorComponent, GenericNabuErrorProps }

packages/blockchain-wallet-v4-frontend/src/components/GenericNabuError/index.ts

@@ -0,0 +1,2 @@
+export { default as GenericNabuError } from './GenericNabuError'
+export type { GenericNabuErrorComponent, GenericNabuErrorProps } from './GenericNabuError.types'