added reminder and usd amount

ensdomains · Sep 18, 2024 · 1fe89a9 · 1fe89a9
1 parent 73482ea
commit 1fe89a9
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 43 deletions.
diff --git a/src/components/pages/profile/[name]/registration/steps/Complete.tsx b/src/components/pages/profile/[name]/registration/steps/Complete.tsx
@@ -232,6 +232,7 @@ const useEthInvoice = (
 
     return (
       <Invoice
+        name={name}
         expiryDate={date}
         expiryTitle={t('invoice.expiry')}
         items={[
@@ -240,7 +241,7 @@ const useEthInvoice = (
         ]}
       />
     )
-  }, [isLoading, registrationValue, commitReceipt, registerReceipt, t])
+  }, [isLoading, registrationValue, commitReceipt, registerReceipt, t, name])
 
   if (isMoonpayFlow) return { InvoiceFilled: null, avatarSrc }
 

diff --git a/src/components/pages/profile/[name]/registration/steps/Invoice.tsx b/src/components/pages/profile/[name]/registration/steps/Invoice.tsx
@@ -1,11 +1,22 @@
+import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { Colors, mq, Skeleton, Typography } from '@ensdomains/thorin'
+import { CalendarSVG, Colors, Dropdown, mq, Skeleton, Typography } from '@ensdomains/thorin'
 
 import { CurrencyText } from '@app/components/@atoms/CurrencyText/CurrencyText'
-import { CurrencyDisplay } from '@app/types'
+import { useCalendarOptions } from '@app/hooks/useCalendarOptions'
 import { formatExpiry } from '@app/utils/utils'
 
+const ReminderContainer = styled(Typography)(
+  ({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    gap: ${theme.space['1']};
+  `,
+)
+
 const Container = styled.div(
   ({ theme }) => css`
     display: grid;
@@ -65,13 +76,16 @@ export type InvoiceItem = {
 }
 
 type Props = {
+  name: string
   expiryTitle: string
   expiryDate: Date
   items: InvoiceItem[]
-  unit?: CurrencyDisplay
 }
 
-export const Invoice = ({ expiryTitle, expiryDate, unit = 'eth', items }: Props) => {
+export const Invoice = ({ name, expiryTitle, expiryDate, items }: Props) => {
+  const { t } = useTranslation('common')
+  const { makeEvent, options } = useCalendarOptions(`Renew ${name}`)
+
   return (
     <Container>
       {items.map(({ label, value, bufferPercentage }, inx) => (
@@ -81,7 +95,14 @@ export const Invoice = ({ expiryTitle, expiryDate, unit = 'eth', items }: Props)
           </Typography>
           <Skeleton loading={!value}>
             <Typography color="textPrimary" data-testid={`invoice-item-${inx}-amount`}>
-              <CurrencyText bufferPercentage={bufferPercentage} eth={value || 0n} currency={unit} />
+              <CurrencyText bufferPercentage={bufferPercentage} eth={value || 0n} currency="eth" />
+            </Typography>
+            <Typography
+              fontVariant="small"
+              color="textTertiary"
+              data-testid={`invoice-item-${inx}-amount-usd`}
+            >
+              <CurrencyText bufferPercentage={bufferPercentage} eth={value || 0n} currency="usd" />
             </Typography>
           </Skeleton>
         </LineItem>
@@ -94,6 +115,21 @@ export const Invoice = ({ expiryTitle, expiryDate, unit = 'eth', items }: Props)
         <Typography color="textPrimary" data-testid="invoice-item-expiry-date">
           {formatExpiry(expiryDate)}
         </Typography>
+        <Dropdown
+          shortThrow
+          keepMenuOnTop
+          width={220}
+          items={[
+            ...options.map((option) => ({
+              label: t(option.label, { ns: 'profile' }),
+              onClick: () => window.open(option.function(makeEvent(expiryDate)), '_blank'),
+            })),
+          ]}
+        >
+          <ReminderContainer color="accentPrimary" fontVariant="small">
+            <CalendarSVG /> <span>{t('action.setReminder')}</span>
+          </ReminderContainer>
+        </Dropdown>
       </LineItem>
     </Container>
   )

diff --git a/...omponents/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/ExpirySection.tsx b/...omponents/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/ExpirySection.tsx
@@ -1,53 +1,18 @@
-import { CalendarEvent, google, ics, office365, outlook, yahoo } from 'calendar-link'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import { Button, Card, Dropdown, mq } from '@ensdomains/thorin'
 
 import { cacheableComponentStyles } from '@app/components/@atoms/CacheableComponent'
+import { useCalendarOptions } from '@app/hooks/useCalendarOptions'
 import { useNameDetails } from '@app/hooks/useNameDetails'
 
 import { EarnifiDialog } from '../../../MoreTab/Miscellaneous/EarnifiDialog'
 import { ExpiryPanel } from './components/ExpiryPanel'
 import { useExpiryActions } from './hooks/useExpiryActions'
 import { useExpiryDetails } from './hooks/useExpiryDetails'
 
-const calendarOptions = [
-  {
-    value: 'google',
-    label: 'tabs.more.misc.reminderOptions.google',
-    function: google,
-  },
-  {
-    value: 'outlook',
-    label: 'tabs.more.misc.reminderOptions.outlook',
-    function: outlook,
-  },
-  {
-    value: 'office365',
-    label: 'tabs.more.misc.reminderOptions.office365',
-    function: office365,
-  },
-  {
-    value: 'yahoo',
-    label: 'tabs.more.misc.reminderOptions.yahoo',
-    function: yahoo,
-  },
-  {
-    value: 'ics',
-    label: 'tabs.more.misc.reminderOptions.ical',
-    function: ics,
-  },
-]
-
-const makeEvent = (name: string, expiryDate: Date): CalendarEvent => ({
-  title: `Renew ${name}`,
-  start: expiryDate,
-  duration: [10, 'minute'],
-  url: window.location.href,
-})
-
 const Header = styled.div(({ theme }) => [
   css`
     padding: ${theme.space['4']};
@@ -124,6 +89,7 @@ export const ExpirySection = ({ name, details }: Props) => {
     ownerData: details.ownerData,
     wrapperData: details.wrapperData,
   })
+  const { options: calendarOptions, makeEvent } = useCalendarOptions(`Renew ${name}`)
 
   const [showEarnifiDialog, setShowEarnifiDialog] = useState(false)
 
@@ -171,7 +137,7 @@ export const ExpirySection = ({ name, details }: Props) => {
                               label: t(option.label, { ns: 'profile' }),
                               onClick: () =>
                                 window.open(
-                                  option.function(makeEvent(name, action.expiryDate)),
+                                  option.function(makeEvent(action.expiryDate)),
                                   '_blank',
                                 ),
                             })),

diff --git a/src/hooks/useCalendarOptions.ts b/src/hooks/useCalendarOptions.ts
@@ -0,0 +1,43 @@
+import { CalendarEvent, google, ics, office365, outlook, yahoo } from 'calendar-link'
+
+const calendarOptions = [
+  {
+    value: 'google',
+    label: 'tabs.more.misc.reminderOptions.google',
+    function: google,
+  },
+  {
+    value: 'outlook',
+    label: 'tabs.more.misc.reminderOptions.outlook',
+    function: outlook,
+  },
+  {
+    value: 'office365',
+    label: 'tabs.more.misc.reminderOptions.office365',
+    function: office365,
+  },
+  {
+    value: 'yahoo',
+    label: 'tabs.more.misc.reminderOptions.yahoo',
+    function: yahoo,
+  },
+  {
+    value: 'ics',
+    label: 'tabs.more.misc.reminderOptions.ical',
+    function: ics,
+  },
+]
+
+export function useCalendarOptions(title: string) {
+  const makeEvent = (expiryDate: Date): CalendarEvent => ({
+    title,
+    start: expiryDate,
+    duration: [10, 'minute'],
+    url: window.location.href,
+  })
+
+  return {
+    makeEvent,
+    options: calendarOptions,
+  }
+}