Skip to content

Commit

Permalink
Merge pull request #2350 from Civolilah/cleanup/verify-popover
Browse files Browse the repository at this point in the history 
[Cleanup] Redesigning "Verify Email" Banner To Popover
  • Loading branch information
@beganovich
beganovich authored Feb 13, 2025
2 parents 25fda5d + 29e8099 commit 184295f
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 70 deletions.
28 changes: 16 additions & 12 deletions src/components/banners/ActivateCompany.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@
*/

import { useTranslation } from 'react-i18next';
import { Banner } from '../Banner';
import { Link } from 'react-router-dom';
import { buttonStyles } from './VerifyEmail';
import { Popover } from '@headlessui/react';
import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
import { useCurrentUser } from '$app/common/hooks/useCurrentUser';

export const buttonStyles =
'font-medium text-xs md:text-sm underline cursor-pointer';

export function ActivateCompany() {
const [t] = useTranslation();
const company = useCurrentCompany();
Expand All @@ -29,17 +31,19 @@ export function ActivateCompany() {
}

return (
<Banner variant="orange">
<div className="flex space-x-1">
<span>{t('company_disabled_warning')}.</span>
<Popover className="relative">
<div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
<div className="flex items-center justify-center space-x-1">
<span className="text-sm">{t('company_disabled_warning')}.</span>

<Link
className={buttonStyles}
to="/settings/account_management/overview"
>
{t('activate_company')}
</Link>
<Link
className="cursor-pointer text-sm font-semibold underline hover:no-underline"
to="/settings/account_management/overview"
>
{t('activate_company')}
</Link>
</div>
</div>
</Banner>
</Popover>
);
}
71 changes: 42 additions & 29 deletions src/components/banners/EInvoiceCredits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@

import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
import { useTranslation } from 'react-i18next';
import { Banner } from '../Banner';
import { buttonStyles } from './VerifyEmail';
import { Link, useLocation } from 'react-router-dom';
import {
useEInvoiceHealthCheck,
Expand All @@ -25,17 +23,19 @@ import { useQueryClient } from 'react-query';
import { request } from '$app/common/helpers/request';
import { endpoint } from '$app/common/helpers';
import { atom, useAtom } from 'jotai';
import { Popover } from '@headlessui/react';

export const EINVOICE_CREDITS_MIN_THRESHOLD = 15;

export function EInvoiceCredits() {
const company = useCurrentCompany();
const quota = useQuota();
const [t] = useTranslation();

const [isVisible, setVisible] = useState(false);
const quota = useQuota();
const company = useCurrentCompany();

const { data: healthcheck } = useEInvoiceHealthCheck();
const { t } = useTranslation();

const [isVisible, setVisible] = useState<boolean>(false);

if (
!company.legal_entity_id ||
Expand All @@ -58,15 +58,20 @@ export function EInvoiceCredits() {
text={t('notification_no_credits')}
/>

<Banner variant="red">
<div className="flex space-x-1">
<span>{t('notification_no_credits')}</span>

<span className={buttonStyles} onClick={() => setVisible(true)}>
{t('learn_more')}
</span>
<Popover className="relative">
<div className="max-w-max rounded-lg bg-red-300 px-6 py-4 shadow-lg">
<div className="flex items-center justify-center space-x-1">
<span className="text-sm">{t('notification_no_credits')}</span>

<span
className="cursor-pointer text-sm font-semibold underline hover:no-underline"
onClick={() => setVisible(true)}
>
{t('learn_more')}
</span>
</div>
</div>
</Banner>
</Popover>
</>
);
}
Expand All @@ -80,15 +85,20 @@ export function EInvoiceCredits() {
text={t('notification_credits_low')}
/>

<Banner variant="orange">
<div className="flex space-x-1">
<span>{t('notification_credits_low')}</span>

<span className={buttonStyles} onClick={() => setVisible(true)}>
{t('learn_more')}
</span>
<Popover className="relative">
<div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
<div className="flex items-center justify-center space-x-1">
<span className="text-sm">{t('notification_credits_low')}</span>

<span
className="cursor-pointer text-sm font-semibold underline hover:no-underline"
onClick={() => setVisible(true)}
>
{t('learn_more')}
</span>
</div>
</div>
</Banner>
</Popover>
</>
);
}
Expand All @@ -105,9 +115,9 @@ interface DialogProps {
function Dialog({ isVisible, setVisible, text }: DialogProps) {
const { t } = useTranslation();

const accentColor = useAccentColor();
const quota = useQuota();
const location = useLocation();
const accentColor = useAccentColor();

useEffect(() => {
setVisible(false);
Expand Down Expand Up @@ -136,11 +146,12 @@ const retriesAtom = atom(0);
const statusAtom = atom<'pending' | 'error' | 'success'>('pending');

function RegenerateToken() {
const { t } = useTranslation();
const [t] = useTranslation();

const refresh = useRefreshCompanyUsers();
const queryClient = useQueryClient();

const refresh = useRefreshCompanyUsers();

const [status, setStatus] = useAtom(statusAtom);
const [retries, setRetries] = useAtom(retriesAtom);

Expand Down Expand Up @@ -185,10 +196,12 @@ function RegenerateToken() {
}

return (
<Banner variant="red">
<div className="flex space-x-1">
<span>{t('einvoice_token_not_found')}</span>
<Popover className="relative">
<div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
<div className="flex items-center justify-center space-x-1">
<span className="text-sm">{t('einvoice_token_not_found')}</span>
</div>
</div>
</Banner>
</Popover>
);
}
26 changes: 17 additions & 9 deletions src/components/banners/VerifyEmail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
*/

import { useTranslation } from 'react-i18next';
import { Banner } from '../Banner';
import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
import { toast } from '$app/common/helpers/toast/toast';
import { request } from '$app/common/helpers/request';
import { endpoint, isHosted } from '$app/common/helpers';
import { Popover } from '@headlessui/react';

export const buttonStyles =
'font-medium text-xs md:text-sm underline cursor-pointer';
Expand Down Expand Up @@ -42,14 +42,22 @@ export function VerifyEmail() {
}

return (
<Banner variant="orange">
<div className="flex space-x-1">
<span>{t('confirm_your_email_address')}.</span>

<button className={buttonStyles} onClick={resend}>
{t('resend_email')}
</button>
<Popover className="relative">
<div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
<div className="flex items-center justify-center space-x-1">
<span className="text-sm">{t('confirm_your_email_address')}.</span>

<div
className="cursor-pointer text-sm font-semibold underline hover:no-underline"
onClick={(event) => {
event.stopPropagation();
resend();
}}
>
{t('resend_email')}
</div>
</div>
</div>
</Banner>
</Popover>
);
}
39 changes: 23 additions & 16 deletions src/components/banners/VerifyPhone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
*/

import { useTranslation } from 'react-i18next';
import { Banner } from '../Banner';
import { buttonStyles } from './VerifyEmail';
import { Modal } from '../Modal';
import { useEffect, useState } from 'react';
import { ValidationBag } from '$app/common/interfaces/validation-bag';
Expand All @@ -32,6 +30,7 @@ import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
import { $refetch } from '$app/common/hooks/useRefetch';
import { useColorScheme } from '$app/common/colors';
import { Popover } from '@headlessui/react';

interface VerificationProps {
visible: boolean;
Expand Down Expand Up @@ -146,8 +145,13 @@ function Verification({ visible, onClose }: VerificationProps) {
visible={visible}
onClose={onClose}
>
<div className="flex flex-col mb-1"
style={{ backgroundColor: colors.$2, color: colors.$3, colorScheme: colors.$0 }}
<div
className="flex flex-col mb-1"
style={{
backgroundColor: colors.$2,
color: colors.$3,
colorScheme: colors.$0,
}}
>
<PhoneInput
international
Expand Down Expand Up @@ -189,7 +193,8 @@ function Verification({ visible, onClose }: VerificationProps) {

export function VerifyPhone() {
const [t] = useTranslation();
const [isVerificationVisible, setIsVerificationVisible] = useState(false);
const [isVerificationVisible, setIsVerificationVisible] =
useState<boolean>(false);

const user = useCurrentUser();
const account = useCurrentAccount();
Expand All @@ -213,18 +218,20 @@ export function VerifyPhone() {

return (
<>
<Banner variant="orange">
<div className="flex space-x-1">
<span>{t('verify_phone_number_help')}.</span>

<button
className={buttonStyles}
onClick={() => setIsVerificationVisible(true)}
>
{t('verify_phone_number')}
</button>
<Popover className="relative">
<div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
<div className="flex items-center justify-center space-x-1">
<span className="text-sm">{t('verify_phone_number_help')}.</span>

<button
className="cursor-pointer text-sm font-semibold underline hover:no-underline"
onClick={() => setIsVerificationVisible(true)}
>
{t('verify_phone_number')}
</button>
</div>
</div>
</Banner>
</Popover>

<Verification
visible={isVerificationVisible}
Expand Down
10 changes: 6 additions & 4 deletions src/components/layouts/Default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,10 +407,12 @@ export function Default(props: Props) {

return (
<div>
<ActivateCompany />
<VerifyEmail />
<VerifyPhone />
<EInvoiceCredits />
<div className="fixed bottom-4 right-4 z-50 flex items-end flex-col-reverse space-y-4 space-y-reverse">
<ActivateCompany />
<VerifyEmail />
<VerifyPhone />
<EInvoiceCredits />
</div>

<MobileSidebar
navigation={navigation}
Expand Down

0 comments on commit 184295f

Please sign in to comment.