[OMN-189] : Settings View - Emails

packages/web/components/elements/DropdownElements.tsx

@@ -63,10 +63,17 @@ const StyledLabel = styled(Label, {
   cursor: 'default',
 })
 
+export type DropdownAlignment = 
+  | 'start'
+  | 'end'
+  | 'center'
+
 type DropdownProps = {
   labelText?: string
   triggerElement: React.ReactNode
-  children: React.ReactNode
+  children: React.ReactNode,
+  styledArrow?: boolean
+  align?: DropdownAlignment 
 }
 
 export const DropdownSeparator = styled(Separator, {
@@ -102,10 +109,11 @@ export function Dropdown(props: DropdownProps): JSX.Element {
           // remove focus from dropdown
           ;(document.activeElement as HTMLElement).blur()
         }}
+        align={props.align ? props.align : 'center'}
       >
         {props.labelText && <StyledLabel>{props.labelText}</StyledLabel>}
         {props.children}
-        <StyledArrow offset={20} />
+        {props.styledArrow && <StyledArrow offset={20} />}
       </DropdownContent>
     </Root>
   )

packages/web/components/elements/Tooltip.tsx

@@ -0,0 +1,77 @@
+import React, { FC } from 'react';
+import { styled, keyframes } from '@stitches/react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+const slideUpAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideRightAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateX(-2px)' },
+  '100%': { opacity: 1, transform: 'translateX(0)' },
+});
+
+const slideDownAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(-2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideLeftAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateX(2px)' },
+  '100%': { opacity: 1, transform: 'translateX(0)' },
+});
+
+const StyledContent = styled(TooltipPrimitive.Content, {
+  borderRadius: 4,
+  padding: '8px 13px',
+  fontSize: 12,
+  color: '#FFFFFF',
+  backgroundColor: '#1C1C1E',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    animationFillMode: 'forwards',
+    willChange: 'transform, opacity',
+    '&[data-state="delayed-open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+});
+
+const StyledArrow = styled(TooltipPrimitive.Arrow, {
+  fill: '#1C1C1E',
+});
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+export const TooltipContent = StyledContent;
+export const TooltipArrow = StyledArrow;
+
+
+type TooltipWrappedProps = {
+  tooltipContent: string,
+  tooltipSide ?: TooltipPrimitive.TooltipContentProps['side'],
+  align?: TooltipPrimitive.TooltipContentProps['align'],
+  alignOffset?: TooltipPrimitive.TooltipContentProps['alignOffset']
+  arrowStyles?: TooltipPrimitive.TooltipArrowProps['style']
+  style?: TooltipPrimitive.TooltipContentProps['style']
+}
+
+export const TooltipWrapped: FC<TooltipWrappedProps> = ({children, tooltipContent, tooltipSide, ...props}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {children}
+      </TooltipTrigger>
+      <TooltipContent sideOffset={5} side={tooltipSide} {...props} >
+        {tooltipContent}
+      <TooltipArrow style={props.arrowStyles} />
+      </TooltipContent>
+    </Tooltip>
+  )
+}

packages/web/components/elements/images/MoreOptionsIcon.tsx

@@ -1,3 +1,5 @@
+import { DotsThree, DotsThreeVertical } from 'phosphor-react'
+
 type Orientation = 'horizontal' | 'vertical'
 
 type MoreOptionsIconProps = {
@@ -7,48 +9,9 @@ type MoreOptionsIconProps = {
 }
 
 export function MoreOptionsIcon(props: MoreOptionsIconProps): JSX.Element {
-  const dots =
-    props.orientation == 'horizontal' ? (
-      <>
-        <circle
-          cx="7"
-          cy="12"
-          r="1.5"
-          transform="rotate(-90 7 12)"
-          fill={props.strokeColor}
-        />
-        <circle
-          cx="12"
-          cy="12"
-          r="1.5"
-          transform="rotate(-90 12 12)"
-          fill={props.strokeColor}
-        />
-        <circle
-          cx="17"
-          cy="12"
-          r="1.5"
-          transform="rotate(-90 17 12)"
-          fill={props.strokeColor}
-        />
-      </>
+  return props.orientation == 'horizontal' ? (
+      <DotsThree size={props.size} color={props.strokeColor}/>
     ) : (
-      <>
-        <circle cx="12" cy="6" r="1.5" fill={props.strokeColor} />
-        <circle cx="12" cy="12" r="1.5" fill={props.strokeColor} />
-        <circle cx="12" cy="18" r="1.5" fill={props.strokeColor} />
-      </>
+      <DotsThreeVertical size={props.size} color={props.strokeColor}/>
     )
-
-  return (
-    <svg
-      width={props.size}
-      height={props.size}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {dots}
-    </svg>
-  )
 }

packages/web/lib/networking/mutations/deleteNewsletterEmailMutation.ts

@@ -0,0 +1,31 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+export async function deleteNewsletterEmailMutation(
+  newsletterEmailId: string
+): Promise<string | undefined> {
+  const mutation = gql`
+    mutation DeleteNewsletterEmailMutation($newsletterEmailId: ID!) {
+      deleteNewsletterEmail(newsletterEmailId: $newsletterEmailId) {
+        ... on DeleteNewsletterEmailSuccess {
+          newsletterEmail {
+            id
+            address
+          }
+        }
+        ... on DeleteNewsletterEmailError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  try {
+    const data = await gqlFetcher(mutation, { newsletterEmailId })
+    console.log('delete email', data)
+    return 'data'
+  } catch (error) {
+    console.log('deleteNewsletterEmailMutation error', error)
+    return undefined
+  }
+}

packages/web/package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-id": "^0.1.1",
     "@radix-ui/react-popover": "^0.1.1",
     "@radix-ui/react-separator": "^0.1.0",
+    "@radix-ui/react-tooltip": "^0.1.7",
     "@segment/analytics-next": "^1.33.5",
     "@sentry/nextjs": "^6.16.1",
     "@stitches/react": "^1.2.5",

packages/web/pages/_app.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { Analytics, AnalyticsBrowser } from '@segment/analytics-next'
 import { segmentApiKey } from '../lib/appConfig'
+import { TooltipProvider } from '../components/elements/Tooltip'
 
 function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
   const router = useRouter()
@@ -48,7 +49,9 @@ function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
         defaultLocale="en"
         messages={englishTranslations}
       >
-        <Component {...pageProps} />
+        <TooltipProvider delayDuration={200}>
+          <Component {...pageProps} />
+        </TooltipProvider>
       </IntlProvider>
     </IdProvider>
   )