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, + } +}