diff --git a/src/components/pages/profile/[name]/registration/steps/Complete.tsx b/src/components/pages/profile/[name]/registration/steps/Complete.tsx
index 321353cf3..e5774dddf 100644
--- 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 (
)
- }, [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
index 8ed766625..9af693035 100644
--- 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 (
{items.map(({ label, value, bufferPercentage }, inx) => (
@@ -81,7 +95,14 @@ export const Invoice = ({ expiryTitle, expiryDate, unit = 'eth', items }: Props)
-
+
+
+
+
@@ -94,6 +115,21 @@ export const Invoice = ({ expiryTitle, expiryDate, unit = 'eth', items }: Props)
{formatExpiry(expiryDate)}
+ ({
+ label: t(option.label, { ns: 'profile' }),
+ onClick: () => window.open(option.function(makeEvent(expiryDate)), '_blank'),
+ })),
+ ]}
+ >
+
+ {t('action.setReminder')}
+
+
)
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/ExpirySection.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/ExpirySection.tsx
index 47f366c94..21b3592d5 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/ExpirySection.tsx
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/ExpirySection.tsx
@@ -1,4 +1,3 @@
-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'
@@ -6,6 +5,7 @@ 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'
@@ -13,41 +13,6 @@ 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
new file mode 100644
index 000000000..97cfb963f
--- /dev/null
+++ 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,
+ }
+}