@greatapps/common 1.1.675 → 1.1.677
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/account/ConfigurationsMyAccountModal.mjs +8 -6
- package/dist/components/account/ConfigurationsMyAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmDeleteAccountModal.mjs +20 -19
- package/dist/components/account/ConfirmDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs +10 -11
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs.map +1 -1
- package/dist/components/account/DeleteAccountModal.mjs +34 -28
- package/dist/components/account/DeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/DisableTwoFactorAuthModal.mjs +7 -5
- package/dist/components/account/DisableTwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs +8 -9
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/TwoFactorAuthModal.mjs +22 -23
- package/dist/components/account/TwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/constants.mjs +4 -4
- package/dist/components/account/constants.mjs.map +1 -1
- package/dist/components/account/hooks/useChangeEmailForm.mjs +5 -3
- package/dist/components/account/hooks/useChangeEmailForm.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePasswordForm.mjs +26 -3
- package/dist/components/account/hooks/useChangePasswordForm.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePhoneForm.mjs +18 -9
- package/dist/components/account/hooks/useChangePhoneForm.mjs.map +1 -1
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs +26 -3
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/hooks/useOtpVerification.mjs +19 -3
- package/dist/components/account/hooks/useOtpVerification.mjs.map +1 -1
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs +27 -4
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs +25 -28
- package/dist/components/account/sections/ChangeEmailModal.mjs.map +1 -1
- package/dist/components/account/sections/ChangePasswordSection.mjs +8 -6
- package/dist/components/account/sections/ChangePasswordSection.mjs.map +1 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs +24 -27
- package/dist/components/account/sections/ChangePhoneModal.mjs.map +1 -1
- package/dist/components/account/sections/MyProfileSection.mjs +37 -22
- package/dist/components/account/sections/MyProfileSection.mjs.map +1 -1
- package/dist/components/account/sections/PreferencesSection.mjs +48 -24
- package/dist/components/account/sections/PreferencesSection.mjs.map +1 -1
- package/dist/components/account/sections/SecuritySection.mjs +11 -9
- package/dist/components/account/sections/SecuritySection.mjs.map +1 -1
- package/dist/components/account/sections/TokenSection.mjs +24 -8
- package/dist/components/account/sections/TokenSection.mjs.map +1 -1
- package/dist/components/layouts/AppMobileNavBar.mjs +2 -148
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/NavBar.mjs +5 -3
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/components/layouts/NotificationsPopover.mjs +5 -3
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs +6 -4
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/UsersSelectorPopover.mjs +9 -7
- package/dist/components/layouts/UsersSelectorPopover.mjs.map +1 -1
- package/dist/components/modals/BuyCreditsModal.mjs +17 -18
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -1
- package/dist/components/modals/CreditsDisabledModal.mjs +6 -4
- package/dist/components/modals/CreditsDisabledModal.mjs.map +1 -1
- package/dist/components/modals/PaidPlanRequiredModal.mjs +5 -3
- package/dist/components/modals/PaidPlanRequiredModal.mjs.map +1 -1
- package/dist/components/modals/cards/AddCardModal.mjs +64 -46
- package/dist/components/modals/cards/AddCardModal.mjs.map +1 -1
- package/dist/components/modals/cards/CannotDeleteCardModal.mjs +9 -7
- package/dist/components/modals/cards/CannotDeleteCardModal.mjs.map +1 -1
- package/dist/components/modals/cards/CardFormFields.mjs +65 -51
- package/dist/components/modals/cards/CardFormFields.mjs.map +1 -1
- package/dist/components/modals/cards/DeleteCardModal.mjs +10 -8
- package/dist/components/modals/cards/DeleteCardModal.mjs.map +1 -1
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs +4 -2
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs.map +1 -1
- package/dist/components/navigation/OverdueInvoiceBanner.mjs +4 -2
- package/dist/components/navigation/OverdueInvoiceBanner.mjs.map +1 -1
- package/dist/components/navigation/PendingCancellationBanner.mjs +4 -6
- package/dist/components/navigation/PendingCancellationBanner.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +8 -6
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/UpcomingInvoiceBanner.mjs +4 -6
- package/dist/components/navigation/UpcomingInvoiceBanner.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/BottomLinks.mjs +5 -3
- package/dist/components/navigation/subcomponents/BottomLinks.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/CreditsCard.mjs +3 -1
- package/dist/components/navigation/subcomponents/CreditsCard.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/PlanCard.mjs +3 -1
- package/dist/components/navigation/subcomponents/PlanCard.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +5 -3
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/components/pages/NotFoundPage.mjs +5 -3
- package/dist/components/pages/NotFoundPage.mjs.map +1 -1
- package/dist/components/pages/notifications/Notifications.mjs +13 -10
- package/dist/components/pages/notifications/Notifications.mjs.map +1 -1
- package/dist/components/ui/buttons/CopyButton.mjs +9 -5
- package/dist/components/ui/buttons/CopyButton.mjs.map +1 -1
- package/dist/components/ui/data-display/CardItem.mjs +7 -5
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs +10 -8
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -1
- package/dist/components/ui/feedback/CircularProgress.mjs.map +1 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs +3 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map +1 -1
- package/dist/components/ui/form/ComboboxField.mjs +11 -6
- package/dist/components/ui/form/ComboboxField.mjs.map +1 -1
- package/dist/components/ui/form/DatePicker.mjs +5 -2
- package/dist/components/ui/form/DatePicker.mjs.map +1 -1
- package/dist/components/ui/form/DateRangePicker.mjs +5 -2
- package/dist/components/ui/form/DateRangePicker.mjs.map +1 -1
- package/dist/components/ui/form/PhoneInput.mjs +5 -3
- package/dist/components/ui/form/PhoneInput.mjs.map +1 -1
- package/dist/components/ui/form/SelectField.mjs +6 -3
- package/dist/components/ui/form/SelectField.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs +11 -18
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs +6 -15
- package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs.map +1 -1
- package/dist/i18n/config.mjs +13 -0
- package/dist/i18n/config.mjs.map +1 -0
- package/dist/i18n/country-language.mjs +74 -0
- package/dist/i18n/country-language.mjs.map +1 -0
- package/dist/i18n/messages/en-us.mjs +494 -0
- package/dist/i18n/messages/en-us.mjs.map +1 -0
- package/dist/i18n/messages/es-es.mjs +494 -0
- package/dist/i18n/messages/es-es.mjs.map +1 -0
- package/dist/i18n/messages/index.mjs +16 -0
- package/dist/i18n/messages/index.mjs.map +1 -0
- package/dist/i18n/messages/pt-br.mjs +507 -0
- package/dist/i18n/messages/pt-br.mjs.map +1 -0
- package/dist/i18n/normalize.mjs +12 -0
- package/dist/i18n/normalize.mjs.map +1 -0
- package/dist/i18n/resolve-locale.mjs +42 -0
- package/dist/i18n/resolve-locale.mjs.map +1 -0
- package/dist/i18n.mjs +14 -0
- package/dist/i18n.mjs.map +1 -0
- package/dist/index.mjs +19 -3
- package/dist/index.mjs.map +1 -1
- package/dist/modules/accounts/hooks/use-currency-formatter.hook.mjs +20 -0
- package/dist/modules/accounts/hooks/use-currency-formatter.hook.mjs.map +1 -0
- package/dist/modules/cards/hooks/handle-delete-card.hook.mjs +2 -1
- package/dist/modules/cards/hooks/handle-delete-card.hook.mjs.map +1 -1
- package/dist/modules/images/utils/validate-image.mjs +8 -8
- package/dist/modules/images/utils/validate-image.mjs.map +1 -1
- package/dist/modules/plans/hooks/list-plans.hook.mjs +2 -2
- package/dist/modules/plans/hooks/list-plans.hook.mjs.map +1 -1
- package/dist/modules/plans/types/plan.type.mjs +5 -1
- package/dist/modules/plans/types/plan.type.mjs.map +1 -1
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs +61 -35
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs.map +1 -1
- package/dist/modules/projects/services/projects.service.mjs +9 -0
- package/dist/modules/projects/services/projects.service.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/periodicity.mjs +20 -14
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -1
- package/dist/providers/auth.provider.mjs +9 -1
- package/dist/providers/auth.provider.mjs.map +1 -1
- package/dist/server.mjs +2 -0
- package/dist/server.mjs.map +1 -1
- package/dist/utils/format/currency.mjs +32 -4
- package/dist/utils/format/currency.mjs.map +1 -1
- package/dist/utils/intl/cookie-domain.mjs +17 -0
- package/dist/utils/intl/cookie-domain.mjs.map +1 -0
- package/dist/utils/intl/locale-cookie.mjs +13 -0
- package/dist/utils/intl/locale-cookie.mjs.map +1 -0
- package/dist/utils/intl/locales.mjs +3 -2
- package/dist/utils/intl/locales.mjs.map +1 -1
- package/package.json +7 -1
- package/src/components/account/ConfigurationsMyAccountModal.tsx +10 -6
- package/src/components/account/ConfirmDeleteAccountModal.tsx +22 -13
- package/src/components/account/ConfirmGlobalPreferencesModal.tsx +12 -10
- package/src/components/account/DeleteAccountModal.tsx +34 -24
- package/src/components/account/DisableTwoFactorAuthModal.tsx +11 -6
- package/src/components/account/IsntPossibleDeleteAccountModal.tsx +8 -6
- package/src/components/account/TwoFactorAuthModal.tsx +33 -29
- package/src/components/account/constants.ts +8 -5
- package/src/components/account/hooks/useChangeEmailForm.tsx +5 -3
- package/src/components/account/hooks/useChangePasswordForm.tsx +20 -6
- package/src/components/account/hooks/useChangePhoneForm.tsx +16 -10
- package/src/components/account/hooks/useDisableTwoFactorAuthForm.tsx +20 -6
- package/src/components/account/hooks/useOtpVerification.tsx +16 -4
- package/src/components/account/hooks/useTwoFactorAuthForm.tsx +21 -7
- package/src/components/account/sections/ChangeEmailModal.tsx +35 -21
- package/src/components/account/sections/ChangePasswordSection.tsx +10 -6
- package/src/components/account/sections/ChangePhoneModal.tsx +50 -22
- package/src/components/account/sections/MyProfileSection.tsx +37 -23
- package/src/components/account/sections/PreferencesSection.tsx +52 -25
- package/src/components/account/sections/SecuritySection.tsx +19 -10
- package/src/components/account/sections/TokenSection.tsx +22 -10
- package/src/components/layouts/AppMobileNavBar.tsx +1 -154
- package/src/components/layouts/NavBar.tsx +5 -3
- package/src/components/layouts/NotificationsPopover.tsx +5 -3
- package/src/components/layouts/ProfilePopover.tsx +6 -4
- package/src/components/layouts/UsersSelectorPopover.tsx +9 -7
- package/src/components/modals/BuyCreditsModal.tsx +18 -16
- package/src/components/modals/CreditsDisabledModal.tsx +6 -6
- package/src/components/modals/PaidPlanRequiredModal.tsx +5 -3
- package/src/components/modals/cards/AddCardModal.tsx +89 -62
- package/src/components/modals/cards/CannotDeleteCardModal.tsx +9 -8
- package/src/components/modals/cards/CardFormFields.tsx +93 -75
- package/src/components/modals/cards/DeleteCardModal.tsx +10 -8
- package/src/components/navigation/CancelledSubscriptionBanner.tsx +4 -2
- package/src/components/navigation/OverdueInvoiceBanner.tsx +4 -2
- package/src/components/navigation/PendingCancellationBanner.tsx +4 -2
- package/src/components/navigation/ProjectSelectorPopover.tsx +8 -6
- package/src/components/navigation/UpcomingInvoiceBanner.tsx +4 -2
- package/src/components/navigation/subcomponents/BottomLinks.tsx +5 -3
- package/src/components/navigation/subcomponents/CreditsCard.tsx +3 -1
- package/src/components/navigation/subcomponents/PlanCard.tsx +3 -1
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +5 -3
- package/src/components/pages/NotFoundPage.tsx +5 -3
- package/src/components/pages/notifications/Notifications.tsx +13 -10
- package/src/components/ui/buttons/CopyButton.tsx +10 -5
- package/src/components/ui/data-display/CardItem.tsx +7 -5
- package/src/components/ui/data-display/PaymentInfoCard.tsx +10 -8
- package/src/components/ui/feedback/CircularProgress.tsx +4 -0
- package/src/components/ui/feedback/DefaultCircularProgress.tsx +3 -1
- package/src/components/ui/form/ComboboxField.tsx +11 -6
- package/src/components/ui/form/DatePicker.tsx +5 -2
- package/src/components/ui/form/DateRangePicker.tsx +5 -2
- package/src/components/ui/form/PhoneInput.tsx +5 -3
- package/src/components/ui/form/SelectField.tsx +6 -3
- package/src/components/widgets/ImageUpload/ImageCropModal.tsx +19 -11
- package/src/components/widgets/ImageUpload/ImageTooSmallModal.tsx +6 -5
- package/src/i18n/config.ts +17 -0
- package/src/i18n/country-language.ts +60 -0
- package/src/i18n/messages/en-us.ts +514 -0
- package/src/i18n/messages/es-es.ts +515 -0
- package/src/i18n/messages/index.ts +24 -0
- package/src/i18n/messages/pt-br.ts +538 -0
- package/src/i18n/normalize.ts +15 -0
- package/src/i18n/resolve-locale.ts +77 -0
- package/src/i18n.ts +10 -0
- package/src/index.ts +13 -2
- package/src/modules/accounts/hooks/use-currency-formatter.hook.tsx +32 -0
- package/src/modules/cards/hooks/handle-delete-card.hook.ts +8 -3
- package/src/modules/images/utils/validate-image.ts +23 -8
- package/src/modules/plans/hooks/list-plans.hook.ts +2 -2
- package/src/modules/plans/types/plan.type.ts +4 -0
- package/src/modules/plans/utils/map-api-plan-to-ui.ts +109 -47
- package/src/modules/projects/services/projects.service.ts +12 -0
- package/src/modules/subscriptions/utils/periodicity.ts +29 -12
- package/src/providers/auth.provider.tsx +13 -1
- package/src/server.ts +2 -0
- package/src/utils/format/currency.ts +62 -7
- package/src/utils/intl/cookie-domain.ts +29 -0
- package/src/utils/intl/locale-cookie.ts +18 -0
- package/src/utils/intl/locales.ts +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/PendingCancellationBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertTriangle, IconX } from '@tabler/icons-react';\nimport { formatShortDate } from '../../infra/utils/date';\n\ninterface PendingCancellationBannerProps {\n limitDate?: Date | null;\n onReactivate?: () => void;\n}\n\nexport function PendingCancellationBanner({\n limitDate,\n onReactivate,\n}: PendingCancellationBannerProps) {\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n\n const formattedLimitDate = formatShortDate(limitDate);\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-yellow-400 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertTriangle size={16} className=\"text-zinc-950 shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-zinc-950\">\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/PendingCancellationBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertTriangle, IconX } from '@tabler/icons-react';\nimport { formatShortDate } from '../../infra/utils/date';\nimport { useTranslations } from 'next-intl';\n\ninterface PendingCancellationBannerProps {\n limitDate?: Date | null;\n onReactivate?: () => void;\n}\n\nexport function PendingCancellationBanner({\n limitDate,\n onReactivate,\n}: PendingCancellationBannerProps) {\n const translate = useTranslations();\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n\n const formattedLimitDate = formatShortDate(limitDate);\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-yellow-400 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertTriangle size={16} className=\"text-zinc-950 shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-zinc-950\">\n {translate('common.navigation.banners.pending.message', { limitDate: formattedLimitDate ?? '' })}\n </span>\n </div>\n <div className=\"flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start\">\n <button\n type=\"button\"\n className=\"flex items-center justify-center p-1.5 cursor-pointer\"\n onClick={onReactivate}\n >\n <span className=\"paragraph-xsmall-semibold text-zinc-950 underline\">\n {translate('common.navigation.banners.pending.reactivate')}\n </span>\n </button>\n <button type=\"button\" className=\"cursor-pointer shrink-0\" onClick={dismiss}>\n <IconX size={18} className=\"text-zinc-700\" />\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";AAoCQ,SACE,KADF;AAlCR,SAAS,UAAU,WAAW,mBAAmB;AACjD,SAAS,mBAAmB,aAAa;AACzC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAOzB,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,IAAI,GAAG,EAAE;AACpD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,MAAM,WAAW,KAAK,GAAG,CAAC,CAAC;AAEvD,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,qBAAqB,gBAAgB,SAAS;AAEpD,SACE,oBAAC,SAAI,WAAU,wGACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iOAAiO,WAAW,mCAAmC,mBAAmB;AAAA,MAE7S;AAAA,6BAAC,SAAI,WAAU,mDACb;AAAA,8BAAC,qBAAkB,MAAM,IAAI,WAAU,0BAAyB;AAAA,UAChE,oBAAC,UAAK,WAAU,2CACb,oBAAU,6CAA6C,EAAE,WAAW,sBAAsB,GAAG,CAAC,GACjG;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,+EACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,UAAK,WAAU,qDACb,oBAAU,8CAA8C,GAC3D;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,YAAO,MAAK,UAAS,WAAU,2BAA0B,SAAS,SACjE,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB,GAC7C;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback } from "react";
|
|
4
|
+
import { useTranslations } from "next-intl";
|
|
4
5
|
import {
|
|
5
6
|
Button,
|
|
6
7
|
Command,
|
|
@@ -39,6 +40,7 @@ function ProjectSelectorPopover({
|
|
|
39
40
|
onSearchChange,
|
|
40
41
|
children
|
|
41
42
|
}) {
|
|
43
|
+
const translate = useTranslations();
|
|
42
44
|
const handleListScroll = useCallback((event) => {
|
|
43
45
|
if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
|
|
44
46
|
const target = event.currentTarget;
|
|
@@ -67,10 +69,10 @@ function ProjectSelectorPopover({
|
|
|
67
69
|
}
|
|
68
70
|
},
|
|
69
71
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
|
|
70
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "
|
|
72
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: translate("common.navigation.projectSelector.title") }) }),
|
|
71
73
|
/* @__PURE__ */ jsxs(Command, { className: "gap-2", defaultValue: " ", shouldFilter: !onSearchChange, value: " ", onValueChange: () => {
|
|
72
74
|
}, children: [
|
|
73
|
-
/* @__PURE__ */ jsx(CommandInput, { placeholder: "
|
|
75
|
+
/* @__PURE__ */ jsx(CommandInput, { placeholder: translate("common.navigation.projectSelector.searchPlaceholder"), value: search, onValueChange: onSearchChange }),
|
|
74
76
|
/* @__PURE__ */ jsx(
|
|
75
77
|
CommandList,
|
|
76
78
|
{
|
|
@@ -84,12 +86,12 @@ function ProjectSelectorPopover({
|
|
|
84
86
|
] }) : projects.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4", children: [
|
|
85
87
|
/* @__PURE__ */ jsx(IconFolderOpen, { size: 28, className: "text-gray-300" }),
|
|
86
88
|
/* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-center text-gray-500", children: [
|
|
87
|
-
"
|
|
89
|
+
translate("common.navigation.projectSelector.emptyLine1"),
|
|
88
90
|
/* @__PURE__ */ jsx("br", {}),
|
|
89
|
-
"
|
|
91
|
+
translate("common.navigation.projectSelector.emptyLine2")
|
|
90
92
|
] })
|
|
91
93
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
92
|
-
/* @__PURE__ */ jsx(CommandEmpty, { children: "
|
|
94
|
+
/* @__PURE__ */ jsx(CommandEmpty, { children: translate("common.navigation.projectSelector.noResults") }),
|
|
93
95
|
projects.map((project) => {
|
|
94
96
|
const isSelected = selectedProject?.id === project.id;
|
|
95
97
|
return /* @__PURE__ */ jsx(
|
|
@@ -133,7 +135,7 @@ function ProjectSelectorPopover({
|
|
|
133
135
|
variant: "ghost",
|
|
134
136
|
className: "h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center",
|
|
135
137
|
onClick: onManageProjects,
|
|
136
|
-
children: "
|
|
138
|
+
children: translate("common.navigation.projectSelector.manageProjects")
|
|
137
139
|
}
|
|
138
140
|
)
|
|
139
141
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';\nimport {\n Button,\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n Popover,\n PopoverContent,\n PopoverTrigger,\n UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen } from '@tabler/icons-react';\nimport type { Project } from '../../modules/projects/types';\n\nexport interface ProjectSelectorPopoverProps {\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n titleRef?: RefObject<HTMLSpanElement | null>;\n projects: Project[];\n selectedProject: Project | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: Project) => void;\n onManageProjects?: () => void;\n search?: string;\n onSearchChange?: (value: string) => void;\n children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-2 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\n </div>\n );\n}\n\nexport function ProjectSelectorPopover({\n open,\n setOpen,\n titleRef,\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onManageProjects,\n search,\n onSearchChange,\n children,\n}: ProjectSelectorPopoverProps) {\n const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {\n if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n onLoadMore();\n }\n }, [hasNextPage, isFetchingNextPage, onLoadMore]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n {children ?? (\n <button className=\"cursor-pointer\">\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </button>\n )}\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[296px] max-h-[380px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n align=\"start\"\n sideOffset={8}\n onInteractOutside={(event: Event) => {\n if (titleRef?.current?.contains(event.target as Node)) {\n event.preventDefault();\n }\n }}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';\nimport { useTranslations } from 'next-intl';\nimport {\n Button,\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n Popover,\n PopoverContent,\n PopoverTrigger,\n UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen } from '@tabler/icons-react';\nimport type { Project } from '../../modules/projects/types';\n\nexport interface ProjectSelectorPopoverProps {\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n titleRef?: RefObject<HTMLSpanElement | null>;\n projects: Project[];\n selectedProject: Project | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: Project) => void;\n onManageProjects?: () => void;\n search?: string;\n onSearchChange?: (value: string) => void;\n children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-2 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\n </div>\n );\n}\n\nexport function ProjectSelectorPopover({\n open,\n setOpen,\n titleRef,\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onManageProjects,\n search,\n onSearchChange,\n children,\n}: ProjectSelectorPopoverProps) {\n const translate = useTranslations();\n const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {\n if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n onLoadMore();\n }\n }, [hasNextPage, isFetchingNextPage, onLoadMore]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n {children ?? (\n <button className=\"cursor-pointer\">\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </button>\n )}\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[296px] max-h-[380px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n align=\"start\"\n sideOffset={8}\n onInteractOutside={(event: Event) => {\n if (titleRef?.current?.contains(event.target as Node)) {\n event.preventDefault();\n }\n }}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">{translate('common.navigation.projectSelector.title')}</span>\n </div>\n <Command className=\"gap-2\" defaultValue=\" \" shouldFilter={!onSearchChange} value=\" \" onValueChange={() => {}}>\n <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={onSearchChange} />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 max-h-[227px]\"\n onScroll={handleListScroll}\n >\n {isLoading ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : projects.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n <IconFolderOpen size={28} className=\"text-gray-300\" />\n <span className=\"paragraph-small-medium text-center text-gray-500\">\n {translate('common.navigation.projectSelector.emptyLine1')}\n <br />\n {translate('common.navigation.projectSelector.emptyLine2')}\n </span>\n </div>\n ) : (\n <>\n <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>\n {projects.map((project) => {\n const isSelected = selectedProject?.id === project.id;\n return (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => onSelectProject(project)}\n >\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\n <div className=\"flex items-center gap-2 w-full\">\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </div>\n {isSelected && (\n <IconCheck className=\"size-4 text-gray-950\" />\n )}\n </div>\n </CommandItem>\n );\n })}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </>\n )}\n </CommandList>\n </Command>\n {onManageProjects && (\n <>\n <div className=\"border-t border-gray-200\" />\n <Button\n variant=\"ghost\"\n className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n onClick={onManageProjects}\n >\n {translate('common.navigation.projectSelector.manageProjects')}\n </Button>\n </>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":";AAuCM,SAsEU,UArER,KADF;AArCN,SAAuD,mBAAmB;AAC1E,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,iBAAiB,sBAAsB;AAoB3D,SAAS,sBAAsB;AAC7B,SACE,qBAAC,SAAI,WAAU,qDACb;AAAA,yBAAC,SAAI,WAAU,kCACb;AAAA,0BAAC,SAAI,WAAU,uCAAsC;AAAA,MACrD,oBAAC,SAAI,WAAU,6BAA4B;AAAA,OAC7C;AAAA,IACA,oBAAC,SAAI,WAAU,yCAAwC;AAAA,KACzD;AAEJ;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,YAAY,gBAAgB;AAClC,QAAM,mBAAmB,YAAY,CAAC,UAAmC;AACvE,QAAI,CAAC,eAAe,sBAAsB,CAAC,WAAY;AAEvD,UAAM,SAAS,MAAM;AACrB,UAAM,mBAAmB,OAAO,eAAe,OAAO,YAAY,OAAO;AAEzE,QAAI,oBAAoB,IAAI;AAC1B,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,aAAa,oBAAoB,UAAU,CAAC;AAEhD,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,wBAAC,kBAAe,SAAO,MACpB,sBACC,oBAAC,YAAO,WAAU,kBAChB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,qCAAqC,OAAO,6BAA6B,eAAe;AAAA;AAAA,IACrG,GACF,GAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,mBAAmB,CAAC,UAAiB;AACnC,cAAI,UAAU,SAAS,SAAS,MAAM,MAAc,GAAG;AACrD,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,QAEA,+BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,qCACb,8BAAC,UAAK,WAAU,4BAA4B,oBAAU,yCAAyC,GAAE,GACnG;AAAA,UACA,qBAAC,WAAQ,WAAU,SAAQ,cAAa,KAAI,cAAc,CAAC,gBAAgB,OAAM,KAAI,eAAe,MAAM;AAAA,UAAC,GACzG;AAAA,gCAAC,gBAAa,aAAa,UAAU,qDAAqD,GAAG,OAAO,QAAQ,eAAe,gBAAgB;AAAA,YAC3I;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,UAAU;AAAA,gBAET,sBACC,iCACE;AAAA,sCAAC,uBAAoB;AAAA,kBACrB,oBAAC,uBAAoB;AAAA,kBACrB,oBAAC,uBAAoB;AAAA,kBACrB,oBAAC,uBAAoB;AAAA,mBACvB,IACE,SAAS,WAAW,IACtB,qBAAC,SAAI,WAAU,6EACb;AAAA,sCAAC,kBAAe,MAAM,IAAI,WAAU,iBAAgB;AAAA,kBACpD,qBAAC,UAAK,WAAU,oDACb;AAAA,8BAAU,8CAA8C;AAAA,oBACzD,oBAAC,QAAG;AAAA,oBACH,UAAU,8CAA8C;AAAA,qBAC3D;AAAA,mBACF,IAEA,iCACE;AAAA,sCAAC,gBAAc,oBAAU,6CAA6C,GAAE;AAAA,kBACvE,SAAS,IAAI,CAAC,YAAY;AACzB,0BAAM,aAAa,iBAAiB,OAAO,QAAQ;AACnD,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,OAAO,GAAG,QAAQ,KAAK,IAAI,QAAQ,EAAE;AAAA,wBACrC,UAAU,CAAC,QAAQ,KAAK;AAAA,wBACxB,WAAW,aAAa,4BAA4B;AAAA,wBACpD,UAAU,MAAM,gBAAgB,OAAO;AAAA,wBAEvC,+BAAC,SAAI,WAAU,2DACb;AAAA,+CAAC,SAAI,WAAU,kCACb;AAAA;AAAA,8BAAC;AAAA;AAAA,gCACC,OAAO,QAAQ;AAAA,gCACf,MAAM,QAAQ;AAAA,gCACd,MAAM;AAAA;AAAA,4BACR;AAAA,4BACC,QAAQ;AAAA,6BACX;AAAA,0BACC,cACC,oBAAC,aAAU,WAAU,wBAAuB;AAAA,2BAEhD;AAAA;AAAA,sBAlBK,QAAQ;AAAA,oBAmBf;AAAA,kBAEJ,CAAC;AAAA,kBACA,sBACC,iCACE;AAAA,wCAAC,uBAAoB;AAAA,oBACrB,oBAAC,uBAAoB;AAAA,qBACvB;AAAA,mBAEJ;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA,UACC,oBACC,iCACE;AAAA,gCAAC,SAAI,WAAU,4BAA2B;AAAA,YAC1C;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBAER,oBAAU,kDAAkD;AAAA;AAAA,YAC/D;AAAA,aACF;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -3,7 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState, useEffect, useCallback } from "react";
|
|
4
4
|
import { IconAlertTriangle, IconX } from "@tabler/icons-react";
|
|
5
5
|
import { formatShortDate } from "../../infra/utils/date";
|
|
6
|
+
import { useTranslations } from "next-intl";
|
|
6
7
|
function UpcomingInvoiceBanner({ dueDate, onDetails }) {
|
|
8
|
+
const translate = useTranslations();
|
|
7
9
|
const [visible, setVisible] = useState(true);
|
|
8
10
|
const [animated, setAnimated] = useState(false);
|
|
9
11
|
useEffect(() => {
|
|
@@ -20,11 +22,7 @@ function UpcomingInvoiceBanner({ dueDate, onDetails }) {
|
|
|
20
22
|
children: [
|
|
21
23
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 w-full sm:w-auto", children: [
|
|
22
24
|
/* @__PURE__ */ jsx(IconAlertTriangle, { size: 16, className: "text-zinc-950 shrink-0" }),
|
|
23
|
-
/* @__PURE__ */
|
|
24
|
-
"Fatura em aberto. Pague at\xE9 ",
|
|
25
|
-
formattedDueDate,
|
|
26
|
-
" para evitar a suspens\xE3o das suas p\xE1ginas."
|
|
27
|
-
] })
|
|
25
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950", children: translate("common.navigation.banners.upcoming.message", { dueDate: formattedDueDate ?? "" }) })
|
|
28
26
|
] }),
|
|
29
27
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start", children: [
|
|
30
28
|
/* @__PURE__ */ jsx(
|
|
@@ -33,7 +31,7 @@ function UpcomingInvoiceBanner({ dueDate, onDetails }) {
|
|
|
33
31
|
type: "button",
|
|
34
32
|
className: "flex items-center justify-center p-1.5 cursor-pointer",
|
|
35
33
|
onClick: onDetails,
|
|
36
|
-
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950 underline", children: "
|
|
34
|
+
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950 underline", children: translate("common.navigation.banners.upcoming.details") })
|
|
37
35
|
}
|
|
38
36
|
),
|
|
39
37
|
/* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer shrink-0", onClick: dismiss, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-700" }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/UpcomingInvoiceBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertTriangle, IconX } from '@tabler/icons-react';\nimport { formatShortDate } from '../../infra/utils/date';\n\ninterface UpcomingInvoiceBannerProps {\n dueDate?: Date | null;\n onDetails?: () => void;\n}\n\nexport function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBannerProps) {\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n\n const formattedDueDate = formatShortDate(dueDate);\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-yellow-400 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertTriangle size={16} className=\"text-zinc-950 shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-zinc-950\">\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/UpcomingInvoiceBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertTriangle, IconX } from '@tabler/icons-react';\nimport { formatShortDate } from '../../infra/utils/date';\nimport { useTranslations } from 'next-intl';\n\ninterface UpcomingInvoiceBannerProps {\n dueDate?: Date | null;\n onDetails?: () => void;\n}\n\nexport function UpcomingInvoiceBanner({ dueDate, onDetails }: UpcomingInvoiceBannerProps) {\n const translate = useTranslations();\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n\n const formattedDueDate = formatShortDate(dueDate);\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-yellow-400 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertTriangle size={16} className=\"text-zinc-950 shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-zinc-950\">\n {translate('common.navigation.banners.upcoming.message', { dueDate: formattedDueDate ?? '' })}\n </span>\n </div>\n <div className=\"flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start\">\n <button\n type=\"button\"\n className=\"flex items-center justify-center p-1.5 cursor-pointer\"\n onClick={onDetails}\n >\n <span className=\"paragraph-xsmall-semibold text-zinc-950 underline\">{translate('common.navigation.banners.upcoming.details')}</span>\n </button>\n <button type=\"button\" className=\"cursor-pointer shrink-0\" onClick={dismiss}>\n <IconX size={18} className=\"text-zinc-700\" />\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";AAiCQ,SACE,KADF;AA/BR,SAAS,UAAU,WAAW,mBAAmB;AACjD,SAAS,mBAAmB,aAAa;AACzC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAOzB,SAAS,sBAAsB,EAAE,SAAS,UAAU,GAA+B;AACxF,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,IAAI,GAAG,EAAE;AACpD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,MAAM,WAAW,KAAK,GAAG,CAAC,CAAC;AAEvD,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,mBAAmB,gBAAgB,OAAO;AAEhD,SACE,oBAAC,SAAI,WAAU,wGACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iOAAiO,WAAW,mCAAmC,mBAAmB;AAAA,MAE7S;AAAA,6BAAC,SAAI,WAAU,mDACb;AAAA,8BAAC,qBAAkB,MAAM,IAAI,WAAU,0BAAyB;AAAA,UAChE,oBAAC,UAAK,WAAU,2CACb,oBAAU,8CAA8C,EAAE,SAAS,oBAAoB,GAAG,CAAC,GAC9F;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,+EACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,UAAK,WAAU,qDAAqD,oBAAU,4CAA4C,GAAE;AAAA;AAAA,UAC/H;AAAA,UACA,oBAAC,YAAO,MAAK,UAAS,WAAU,2BAA0B,SAAS,SACjE,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB,GAC7C;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -2,31 +2,33 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { IconHelp, IconBulb, IconStar } from "@tabler/icons-react";
|
|
4
4
|
import { useIsDefaultWhitelabel, useWhitelabel } from "../../../providers/whitelabel.provider";
|
|
5
|
+
import { useTranslations } from "next-intl";
|
|
5
6
|
function openFrillWidget() {
|
|
6
7
|
const widget = window.__frillNovidadesWidget;
|
|
7
8
|
widget?.open?.();
|
|
8
9
|
}
|
|
9
10
|
function BottomLinks() {
|
|
11
|
+
const translate = useTranslations();
|
|
10
12
|
const { whitelabel } = useWhitelabel();
|
|
11
13
|
const isMainWhitelabel = useIsDefaultWhitelabel();
|
|
12
14
|
const helpUrl = whitelabel?.url_help || "https://ajuda.greatsoftwares.com.br/pt-br/";
|
|
13
15
|
const links = [
|
|
14
16
|
...isMainWhitelabel ? [
|
|
15
17
|
{
|
|
16
|
-
label: "
|
|
18
|
+
label: translate("common.navigation.bottomLinks.news"),
|
|
17
19
|
icon: IconStar,
|
|
18
20
|
className: "novidades",
|
|
19
21
|
onClick: openFrillWidget
|
|
20
22
|
}
|
|
21
23
|
] : [],
|
|
22
24
|
{
|
|
23
|
-
label: "
|
|
25
|
+
label: translate("common.navigation.bottomLinks.helpCenter"),
|
|
24
26
|
icon: IconHelp,
|
|
25
27
|
href: helpUrl
|
|
26
28
|
},
|
|
27
29
|
...isMainWhitelabel ? [
|
|
28
30
|
{
|
|
29
|
-
label: "
|
|
31
|
+
label: translate("common.navigation.bottomLinks.sendSuggestions"),
|
|
30
32
|
icon: IconBulb,
|
|
31
33
|
href: "https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas"
|
|
32
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/BottomLinks.tsx"],"sourcesContent":["'use client';\n\nimport { IconHelp, IconBulb, IconStar, type TablerIcon } from '@tabler/icons-react';\nimport { useIsDefaultWhitelabel, useWhitelabel } from '../../../providers/whitelabel.provider';\n\ninterface BottomLink {\n label: string;\n icon: TablerIcon;\n href?: string;\n className?: string;\n onClick?: () => void;\n}\n\nfunction openFrillWidget() {\n const widget = (window as unknown as { __frillNovidadesWidget?: { open?: () => void } }).__frillNovidadesWidget;\n widget?.open?.();\n}\n\nexport function BottomLinks() {\n const { whitelabel } = useWhitelabel();\n const isMainWhitelabel = useIsDefaultWhitelabel();\n\n const helpUrl = whitelabel?.url_help || 'https://ajuda.greatsoftwares.com.br/pt-br/';\n\n const links: BottomLink[] = [\n ...(isMainWhitelabel\n ? [\n {\n label: '
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/BottomLinks.tsx"],"sourcesContent":["'use client';\n\nimport { IconHelp, IconBulb, IconStar, type TablerIcon } from '@tabler/icons-react';\nimport { useIsDefaultWhitelabel, useWhitelabel } from '../../../providers/whitelabel.provider';\nimport { useTranslations } from 'next-intl';\n\ninterface BottomLink {\n label: string;\n icon: TablerIcon;\n href?: string;\n className?: string;\n onClick?: () => void;\n}\n\nfunction openFrillWidget() {\n const widget = (window as unknown as { __frillNovidadesWidget?: { open?: () => void } }).__frillNovidadesWidget;\n widget?.open?.();\n}\n\nexport function BottomLinks() {\n const translate = useTranslations();\n const { whitelabel } = useWhitelabel();\n const isMainWhitelabel = useIsDefaultWhitelabel();\n\n const helpUrl = whitelabel?.url_help || 'https://ajuda.greatsoftwares.com.br/pt-br/';\n\n const links: BottomLink[] = [\n ...(isMainWhitelabel\n ? [\n {\n label: translate('common.navigation.bottomLinks.news'),\n icon: IconStar,\n className: 'novidades',\n onClick: openFrillWidget,\n },\n ]\n : []),\n {\n label: translate('common.navigation.bottomLinks.helpCenter'),\n icon: IconHelp,\n href: helpUrl,\n },\n ...(isMainWhitelabel\n ? [\n {\n label: translate('common.navigation.bottomLinks.sendSuggestions'),\n icon: IconBulb,\n href: 'https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas',\n },\n ]\n : []),\n ];\n\n const baseClassName =\n 'rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline bg-white hover:bg-gray-100 active:bg-gray-50';\n\n return (\n <div className=\"flex flex-col\">\n {links.map((link) =>\n link.href ? (\n <a\n key={link.label}\n href={link.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={`${baseClassName}${link.className ? ` ${link.className}` : ''}`}\n >\n <link.icon size={20} className=\"text-gray-400\" />\n <span className=\"paragraph-small-medium text-gray-500\">{link.label}</span>\n </a>\n ) : (\n <button\n key={link.label}\n type=\"button\"\n onClick={link.onClick}\n className={`${baseClassName} text-left${link.className ? ` ${link.className}` : ''}`}\n >\n <link.icon size={20} className=\"text-gray-400\" />\n <span className=\"paragraph-small-medium text-gray-500\">{link.label}</span>\n </button>\n )\n )}\n </div>\n );\n}\n"],"mappings":";AA4DU,SAOE,KAPF;AA1DV,SAAS,UAAU,UAAU,gBAAiC;AAC9D,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,uBAAuB;AAUhC,SAAS,kBAAkB;AACzB,QAAM,SAAU,OAAyE;AACzF,UAAQ,OAAO;AACjB;AAEO,SAAS,cAAc;AAC5B,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,mBAAmB,uBAAuB;AAEhD,QAAM,UAAU,YAAY,YAAY;AAExC,QAAM,QAAsB;AAAA,IAC1B,GAAI,mBACA;AAAA,MACE;AAAA,QACE,OAAO,UAAU,oCAAoC;AAAA,QACrD,MAAM;AAAA,QACN,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF,IACA,CAAC;AAAA,IACL;AAAA,MACE,OAAO,UAAU,0CAA0C;AAAA,MAC3D,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,GAAI,mBACA;AAAA,MACE;AAAA,QACE,OAAO,UAAU,+CAA+C;AAAA,QAChE,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF,IACA,CAAC;AAAA,EACP;AAEA,QAAM,gBACJ;AAEF,SACE,oBAAC,SAAI,WAAU,iBACZ,gBAAM;AAAA,IAAI,CAAC,SACV,KAAK,OACH;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,KAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAW,GAAG,aAAa,GAAG,KAAK,YAAY,IAAI,KAAK,SAAS,KAAK,EAAE;AAAA,QAExE;AAAA,8BAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,UAC/C,oBAAC,UAAK,WAAU,wCAAwC,eAAK,OAAM;AAAA;AAAA;AAAA,MAP9D,KAAK;AAAA,IAQZ,IAEA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,KAAK;AAAA,QACd,WAAW,GAAG,aAAa,aAAa,KAAK,YAAY,IAAI,KAAK,SAAS,KAAK,EAAE;AAAA,QAElF;AAAA,8BAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,UAC/C,oBAAC,UAAK,WAAU,wCAAwC,eAAK,OAAM;AAAA;AAAA;AAAA,MAN9D,KAAK;AAAA,IAOZ;AAAA,EAEJ,GACF;AAEJ;","names":[]}
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useAppNavigationContext } from "../AppNavigationContext";
|
|
4
4
|
import { Progress } from "../../../index";
|
|
5
|
+
import { useTranslations } from "next-intl";
|
|
5
6
|
import { useBuyCreditsModal } from "../../../store/useBuyCreditsModal";
|
|
6
7
|
import { useCreditsDisabledModal } from "../../../store/useCreditsDisabledModal";
|
|
7
8
|
import { useAuth } from "../../../providers/auth.provider";
|
|
8
9
|
function CreditsCard({ used, total, onClick }) {
|
|
10
|
+
const translate = useTranslations();
|
|
9
11
|
const { breakpoint } = useAppNavigationContext();
|
|
10
12
|
const { openModal } = useBuyCreditsModal();
|
|
11
13
|
const { openModal: openDisabledModal } = useCreditsDisabledModal();
|
|
@@ -26,7 +28,7 @@ function CreditsCard({ used, total, onClick }) {
|
|
|
26
28
|
onClick: handleClick,
|
|
27
29
|
children: [
|
|
28
30
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
29
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: "
|
|
31
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: translate("common.navigation.creditsCard.label") }),
|
|
30
32
|
/* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-white/50", children: [
|
|
31
33
|
used,
|
|
32
34
|
" / ",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/CreditsCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { Progress } from '../../../index';\r\nimport { useBuyCreditsModal } from '../../../store/useBuyCreditsModal';\r\nimport { useCreditsDisabledModal } from '../../../store/useCreditsDisabledModal';\r\nimport { useAuth } from '../../../providers/auth.provider';\r\n\r\nexport interface CreditsCardProps {\r\n used: number;\r\n total: number;\r\n onClick?: () => void;\r\n}\r\n\r\nexport function CreditsCard({ used, total, onClick }: CreditsCardProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const { openModal } = useBuyCreditsModal();\r\n const { openModal: openDisabledModal } = useCreditsDisabledModal();\r\n const { user } = useAuth();\r\n const canManage = user?.profile === 'owner' || user?.profile === 'admin';\r\n const handleClick = onClick ?? (() => {\r\n if (canManage) {\r\n openModal();\r\n } else {\r\n openDisabledModal();\r\n }\r\n });\r\n\r\n // Only renders in mobile overlay\r\n if (breakpoint !== 'mobile') return null;\r\n\r\n return (\r\n <div\r\n className=\"flex flex-col bg-gray-950 rounded-lg gap-4 w-full px-4 pt-4 pb-[18px] cursor-pointer\"\r\n onClick={handleClick}\r\n >\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-xsmall-semibold text-white\">
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/CreditsCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { Progress } from '../../../index';\r\nimport { useTranslations } from 'next-intl';\r\nimport { useBuyCreditsModal } from '../../../store/useBuyCreditsModal';\r\nimport { useCreditsDisabledModal } from '../../../store/useCreditsDisabledModal';\r\nimport { useAuth } from '../../../providers/auth.provider';\r\n\r\nexport interface CreditsCardProps {\r\n used: number;\r\n total: number;\r\n onClick?: () => void;\r\n}\r\n\r\nexport function CreditsCard({ used, total, onClick }: CreditsCardProps) {\r\n const translate = useTranslations();\r\n const { breakpoint } = useAppNavigationContext();\r\n const { openModal } = useBuyCreditsModal();\r\n const { openModal: openDisabledModal } = useCreditsDisabledModal();\r\n const { user } = useAuth();\r\n const canManage = user?.profile === 'owner' || user?.profile === 'admin';\r\n const handleClick = onClick ?? (() => {\r\n if (canManage) {\r\n openModal();\r\n } else {\r\n openDisabledModal();\r\n }\r\n });\r\n\r\n // Only renders in mobile overlay\r\n if (breakpoint !== 'mobile') return null;\r\n\r\n return (\r\n <div\r\n className=\"flex flex-col bg-gray-950 rounded-lg gap-4 w-full px-4 pt-4 pb-[18px] cursor-pointer\"\r\n onClick={handleClick}\r\n >\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-xsmall-semibold text-white\">{translate('common.navigation.creditsCard.label')}</span>\r\n <span className=\"paragraph-xsmall-medium text-white/50\">{used} / {total}</span>\r\n </div>\r\n <Progress className=\"bg-white/10 h-[6px]\" indicatorColor=\"bg-white\" value={Math.round((used / total) * 100)} />\r\n </div>\r\n );\r\n}\r\n"],"mappings":";AAuCQ,cACA,YADA;AArCR,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,eAAe;AAQjB,SAAS,YAAY,EAAE,MAAM,OAAO,QAAQ,GAAqB;AACtE,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,WAAW,IAAI,wBAAwB;AAC/C,QAAM,EAAE,UAAU,IAAI,mBAAmB;AACzC,QAAM,EAAE,WAAW,kBAAkB,IAAI,wBAAwB;AACjE,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,YAAY,MAAM,YAAY,WAAW,MAAM,YAAY;AACjE,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,WAAW;AACb,gBAAU;AAAA,IACZ,OAAO;AACL,wBAAkB;AAAA,IACpB;AAAA,EACF;AAGA,MAAI,eAAe,SAAU,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,UAAK,WAAU,wCAAwC,oBAAU,qCAAqC,GAAE;AAAA,UACzG,qBAAC,UAAK,WAAU,yCAAyC;AAAA;AAAA,YAAK;AAAA,YAAI;AAAA,aAAM;AAAA,WAC1E;AAAA,QACA,oBAAC,YAAS,WAAU,uBAAsB,gBAAe,YAAW,OAAO,KAAK,MAAO,OAAO,QAAS,GAAG,GAAG;AAAA;AAAA;AAAA,EAC/G;AAEJ;","names":[]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Button, Progress } from "../../../index";
|
|
4
|
+
import { useTranslations } from "next-intl";
|
|
4
5
|
function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }) {
|
|
6
|
+
const translate = useTranslations();
|
|
5
7
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-md p-4 gap-4 bg-gray-50", children: [
|
|
6
8
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
7
9
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: planName }),
|
|
@@ -14,7 +16,7 @@ function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }) {
|
|
|
14
16
|
variant: "secondary",
|
|
15
17
|
className: "paragraph-small-semibold text-gray-950",
|
|
16
18
|
onClick: onKnowPlans,
|
|
17
|
-
children: "
|
|
19
|
+
children: translate("common.navigation.planCard.knowPlans")
|
|
18
20
|
}
|
|
19
21
|
)
|
|
20
22
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/PlanCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Button, Progress } from '../../../index';\r\n\r\nexport interface PlanCardProps {\r\n planName: string;\r\n trialLabel: string;\r\n progressValue: number;\r\n onKnowPlans: () => void;\r\n}\r\n\r\nexport function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: PlanCardProps) {\r\n return (\r\n <div className=\"flex flex-col rounded-md p-4 gap-4 bg-gray-50\">\r\n <div className=\"flex flex-col gap-1\">\r\n <span className=\"paragraph-small-semibold text-gray-950\">{planName}</span>\r\n <span className=\"paragraph-xsmall-medium text-gray-600\">{trialLabel}</span>\r\n </div>\r\n <Progress value={progressValue} className=\"bg-(--color-progress-track)\" />\r\n <Button\r\n variant=\"secondary\"\r\n className=\"paragraph-small-semibold text-gray-950\"\r\n onClick={onKnowPlans}\r\n >\r\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/PlanCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Button, Progress } from '../../../index';\r\nimport { useTranslations } from 'next-intl';\r\n\r\nexport interface PlanCardProps {\r\n planName: string;\r\n trialLabel: string;\r\n progressValue: number;\r\n onKnowPlans: () => void;\r\n}\r\n\r\nexport function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: PlanCardProps) {\r\n const translate = useTranslations();\r\n return (\r\n <div className=\"flex flex-col rounded-md p-4 gap-4 bg-gray-50\">\r\n <div className=\"flex flex-col gap-1\">\r\n <span className=\"paragraph-small-semibold text-gray-950\">{planName}</span>\r\n <span className=\"paragraph-xsmall-medium text-gray-600\">{trialLabel}</span>\r\n </div>\r\n <Progress value={progressValue} className=\"bg-(--color-progress-track)\" />\r\n <Button\r\n variant=\"secondary\"\r\n className=\"paragraph-small-semibold text-gray-950\"\r\n onClick={onKnowPlans}\r\n >\r\n {translate('common.navigation.planCard.knowPlans')}\r\n </Button>\r\n </div>\r\n );\r\n}\r\n"],"mappings":";AAgBM,SACE,KADF;AAdN,SAAS,QAAQ,gBAAgB;AACjC,SAAS,uBAAuB;AASzB,SAAS,SAAS,EAAE,UAAU,YAAY,eAAe,YAAY,GAAkB;AAC5F,QAAM,YAAY,gBAAgB;AAClC,SACE,qBAAC,SAAI,WAAU,iDACb;AAAA,yBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,UAAK,WAAU,0CAA0C,oBAAS;AAAA,MACnE,oBAAC,UAAK,WAAU,yCAAyC,sBAAW;AAAA,OACtE;AAAA,IACA,oBAAC,YAAS,OAAO,eAAe,WAAU,+BAA8B;AAAA,IACxE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS;AAAA,QAER,oBAAU,sCAAsC;AAAA;AAAA,IACnD;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useRef, useEffect, useMemo } from "react";
|
|
4
|
+
import { useTranslations } from "next-intl";
|
|
4
5
|
import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
|
|
5
6
|
import { useAppNavigationContext } from "../AppNavigationContext";
|
|
6
7
|
import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
|
|
@@ -18,6 +19,7 @@ function ProjectSelector({
|
|
|
18
19
|
onSelectProject,
|
|
19
20
|
onManageProjects
|
|
20
21
|
}) {
|
|
22
|
+
const translate = useTranslations();
|
|
21
23
|
const isMainWhitelabel = useIsDefaultWhitelabel();
|
|
22
24
|
const { breakpoint } = useAppNavigationContext();
|
|
23
25
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
@@ -101,9 +103,9 @@ function ProjectSelector({
|
|
|
101
103
|
}
|
|
102
104
|
) }),
|
|
103
105
|
activeSection === "projects" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400", children: [
|
|
104
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "
|
|
106
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: translate("common.navigation.projectSelector.title") }) }),
|
|
105
107
|
/* @__PURE__ */ jsxs(Command, { className: "gap-2", shouldFilter: false, children: [
|
|
106
|
-
/* @__PURE__ */ jsx(CommandInput, { placeholder: "
|
|
108
|
+
/* @__PURE__ */ jsx(CommandInput, { placeholder: translate("common.navigation.projectSelector.searchPlaceholder"), value: search, onValueChange: setSearch }),
|
|
107
109
|
/* @__PURE__ */ jsxs(
|
|
108
110
|
CommandList,
|
|
109
111
|
{
|
|
@@ -117,7 +119,7 @@ function ProjectSelector({
|
|
|
117
119
|
}
|
|
118
120
|
},
|
|
119
121
|
children: [
|
|
120
|
-
/* @__PURE__ */ jsx(CommandEmpty, { children: "
|
|
122
|
+
/* @__PURE__ */ jsx(CommandEmpty, { children: translate("common.navigation.projectSelector.noResults") }),
|
|
121
123
|
showListSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
122
124
|
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
123
125
|
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, useMemo, RefObject } from 'react';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useIsDefaultWhitelabel, useDebounce } from '../../../index';\nimport { useInfiniteProjects } from '../../../modules/projects/hooks/list-infinite-projects.hook';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { Project } from '../../../modules/projects/types';\n\nexport interface ProjectSelectorProps {\n selectedProject: Project | null;\n onSelectProject: (project: Project) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-[8.8px]\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n selectedProject,\n onSelectProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const isMainWhitelabel = useIsDefaultWhitelabel();\n const { breakpoint } = useAppNavigationContext();\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n const [search, setSearch] = useState('');\n const debouncedSearch = useDebounce(search, 300);\n\n const { data, isLoading, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({\n sort: 'title',\n limit: 20,\n ...(debouncedSearch ? { search: debouncedSearch } : {}),\n });\n const projects = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);\n const showListSkeleton = isLoading || (isFetching && !isFetchingNextPage && !!debouncedSearch);\n\n const handlePopoverOpenChange: typeof setIsPopoverOpen = (value) => {\n setIsPopoverOpen((prev) => {\n const next = typeof value === 'function' ? value(prev) : value;\n if (!next) setSearch('');\n return next;\n });\n };\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover (aligned with NavBar logo + separator)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className={cn(\n !isMainWhitelabel ? \"mt-[14.5px] mb-[7px]\" : \"mt-[6.5px] mb-[3px]\"\n )}>\n <div className=\"flex items-center h-7\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={handlePopoverOpenChange}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n isLoading={showListSkeleton}\n isFetchingNextPage={isFetchingNextPage}\n hasNextPage={hasNextPage}\n onLoadMore={() => fetchNextPage()}\n onSelectProject={onSelectProject}\n onManageProjects={onManageProjects}\n search={search}\n onSearchChange={setSearch}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px]\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n </div>\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div\n className=\"flex items-center gap-1 cursor-pointer\"\n onClick={() => { const next = activeSection === 'projects' ? null : 'projects'; setActiveSection(next); if (!next) setSearch(''); }}\n >\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n }`}\n />\n </div>\n </div>\n {activeSection === 'projects' && (\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n </div>\n <Command className=\"gap-2\" shouldFilter={false}>\n <CommandInput placeholder=\"Busque aqui\" value={search} onValueChange={setSearch} />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n onScroll={(event) => {\n if (!hasNextPage || isFetchingNextPage || !fetchNextPage) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n fetchNextPage();\n }\n }}\n >\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {showListSkeleton ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : (\n projects.map((project) => (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => { onSelectProject(project); setActiveSection(null); setSearch(''); }}\n >\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </CommandItem>\n ))\n )}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </CommandList>\n </Command>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, useMemo, RefObject } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useIsDefaultWhitelabel, useDebounce } from '../../../index';\nimport { useInfiniteProjects } from '../../../modules/projects/hooks/list-infinite-projects.hook';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { Project } from '../../../modules/projects/types';\n\nexport interface ProjectSelectorProps {\n selectedProject: Project | null;\n onSelectProject: (project: Project) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-[8.8px]\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n selectedProject,\n onSelectProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const translate = useTranslations();\n const isMainWhitelabel = useIsDefaultWhitelabel();\n const { breakpoint } = useAppNavigationContext();\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n const [search, setSearch] = useState('');\n const debouncedSearch = useDebounce(search, 300);\n\n const { data, isLoading, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({\n sort: 'title',\n limit: 20,\n ...(debouncedSearch ? { search: debouncedSearch } : {}),\n });\n const projects = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);\n const showListSkeleton = isLoading || (isFetching && !isFetchingNextPage && !!debouncedSearch);\n\n const handlePopoverOpenChange: typeof setIsPopoverOpen = (value) => {\n setIsPopoverOpen((prev) => {\n const next = typeof value === 'function' ? value(prev) : value;\n if (!next) setSearch('');\n return next;\n });\n };\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover (aligned with NavBar logo + separator)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className={cn(\n !isMainWhitelabel ? \"mt-[14.5px] mb-[7px]\" : \"mt-[6.5px] mb-[3px]\"\n )}>\n <div className=\"flex items-center h-7\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={handlePopoverOpenChange}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n isLoading={showListSkeleton}\n isFetchingNextPage={isFetchingNextPage}\n hasNextPage={hasNextPage}\n onLoadMore={() => fetchNextPage()}\n onSelectProject={onSelectProject}\n onManageProjects={onManageProjects}\n search={search}\n onSearchChange={setSearch}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px]\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n </div>\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div\n className=\"flex items-center gap-1 cursor-pointer\"\n onClick={() => { const next = activeSection === 'projects' ? null : 'projects'; setActiveSection(next); if (!next) setSearch(''); }}\n >\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n }`}\n />\n </div>\n </div>\n {activeSection === 'projects' && (\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">{translate('common.navigation.projectSelector.title')}</span>\n </div>\n <Command className=\"gap-2\" shouldFilter={false}>\n <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={setSearch} />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n onScroll={(event) => {\n if (!hasNextPage || isFetchingNextPage || !fetchNextPage) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n fetchNextPage();\n }\n }}\n >\n <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>\n {showListSkeleton ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : (\n projects.map((project) => (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => { onSelectProject(project); setActiveSection(null); setSearch(''); }}\n >\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </CommandItem>\n ))\n )}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </CommandList>\n </Command>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from "next/image";
|
|
4
4
|
import { useEffect } from "react";
|
|
5
|
+
import { useTranslations } from "next-intl";
|
|
5
6
|
import { useRouter } from "next/navigation";
|
|
6
7
|
import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
|
|
7
8
|
import { Button } from "../ui/buttons/Button";
|
|
@@ -14,6 +15,7 @@ function GreatAppsLogo() {
|
|
|
14
15
|
] });
|
|
15
16
|
}
|
|
16
17
|
function NotFoundPage() {
|
|
18
|
+
const translate = useTranslations();
|
|
17
19
|
const router = useRouter();
|
|
18
20
|
useEffect(() => {
|
|
19
21
|
hideCrisp();
|
|
@@ -27,8 +29,8 @@ function NotFoundPage() {
|
|
|
27
29
|
/* @__PURE__ */ jsx("div", { className: "-mt-1 w-full border-t border-zinc-100" }),
|
|
28
30
|
/* @__PURE__ */ jsx("div", { className: "-mt-[25px]", children: isGreatApps ? /* @__PURE__ */ jsx(GreatAppsLogo, {}) : whitelabelLogo ? /* @__PURE__ */ jsx(Image, { src: whitelabelLogo, alt: whitelabel?.name || "", width: 50, height: 50, className: "rounded-xl object-contain" }) : null })
|
|
29
31
|
] }),
|
|
30
|
-
/* @__PURE__ */ jsx("h1", { className: "max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]", children: "
|
|
31
|
-
/* @__PURE__ */ jsx("p", { className: "max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0", children: "
|
|
32
|
+
/* @__PURE__ */ jsx("h1", { className: "max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]", children: translate("common.notFound.title") }),
|
|
33
|
+
/* @__PURE__ */ jsx("p", { className: "max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0", children: translate("common.notFound.description") }),
|
|
32
34
|
/* @__PURE__ */ jsx(
|
|
33
35
|
Button,
|
|
34
36
|
{
|
|
@@ -41,7 +43,7 @@ function NotFoundPage() {
|
|
|
41
43
|
router.push("/");
|
|
42
44
|
}
|
|
43
45
|
},
|
|
44
|
-
children: "
|
|
46
|
+
children: translate("common.notFound.backToHome")
|
|
45
47
|
}
|
|
46
48
|
)
|
|
47
49
|
] }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/pages/NotFoundPage.tsx"],"sourcesContent":["'use client';\n\nimport Image from \"next/image\";\nimport { useEffect } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport { useWhitelabel, useIsDefaultWhitelabel } from \"../../providers/whitelabel.provider\";\nimport { Button } from \"../ui/buttons/Button\";\nimport { hideCrisp } from \"../embeds/CrispEmbed\";\n\nfunction GreatAppsLogo() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 68 68\" fill=\"none\">\n <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" fill=\"#09090B\" />\n <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" stroke=\"white\" strokeWidth=\"9\" />\n <path d=\"M38.0883 19.5377C38.6909 19.5377 39.1795 20.0264 39.1795 20.6289V25.5892C39.1795 25.9865 39.106 26.3827 38.9364 26.7421C38.4857 27.6992 37.5451 28.2674 36.5452 28.2674H29.9031C28.9993 28.2674 28.2663 29.0004 28.2663 29.9042V37.5427C28.2663 38.4465 28.9993 39.1795 29.9031 39.1795H37.5415C38.4453 39.1795 39.1783 38.4465 39.1783 37.5427V30.9693C39.1783 30.4522 39.3053 29.9374 39.5804 29.5009C40.0596 28.7406 40.8768 28.2899 41.7462 28.2686H46.8168C47.4193 28.2686 47.908 28.7561 47.908 29.3586V37.8238C47.908 38.692 47.5629 39.5246 46.9497 40.139L40.1379 46.9508C39.5235 47.5652 38.6909 47.9091 37.8226 47.9091H29.3587C28.7561 47.9091 28.2674 47.4205 28.2674 46.8179L28.2674 41.8126C28.2674 41.114 27.9899 40.4439 27.4965 39.9504C27.0031 39.457 26.3329 39.1795 25.6343 39.1795H20.629C20.0265 39.1795 19.5378 38.6908 19.5378 38.0883L19.5378 29.6231C19.5378 28.7549 19.8829 27.9222 20.4961 27.3078L27.468 20.3371C27.9792 19.8259 28.6731 19.5377 29.3966 19.5377H38.0871H38.0883Z\" fill=\"white\" />\n </svg>\n );\n}\n\nexport function NotFoundPage() {\n const router = useRouter();\n\n useEffect(() => {\n hideCrisp();\n }, []);\n const { whitelabel } = useWhitelabel();\n const isGreatApps = useIsDefaultWhitelabel();\n const whitelabelLogo = whitelabel?.logo\n ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`\n : null;\n\n return (\n <div className=\"relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white\">\n <div className=\"flex flex-col items-center gap-[22px] text-center\">\n <div className=\"relative flex flex-col items-center\">\n <Image src=\"/images/404.svg\" alt=\"404\" width={440} height={173} priority unoptimized />\n\n <div className=\"-mt-1 w-full border-t border-zinc-100\" />\n\n <div className=\"-mt-[25px]\">\n {isGreatApps ? (\n <GreatAppsLogo />\n ) : whitelabelLogo ? (\n <Image src={whitelabelLogo} alt={whitelabel?.name || ''} width={50} height={50} className=\"rounded-xl object-contain\" />\n ) : null}\n </div>\n </div>\n\n <h1 className=\"max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]\">\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/pages/NotFoundPage.tsx"],"sourcesContent":["'use client';\n\nimport Image from \"next/image\";\nimport { useEffect } from \"react\";\nimport { useTranslations } from \"next-intl\";\nimport { useRouter } from \"next/navigation\";\nimport { useWhitelabel, useIsDefaultWhitelabel } from \"../../providers/whitelabel.provider\";\nimport { Button } from \"../ui/buttons/Button\";\nimport { hideCrisp } from \"../embeds/CrispEmbed\";\n\nfunction GreatAppsLogo() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 68 68\" fill=\"none\">\n <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" fill=\"#09090B\" />\n <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" stroke=\"white\" strokeWidth=\"9\" />\n <path d=\"M38.0883 19.5377C38.6909 19.5377 39.1795 20.0264 39.1795 20.6289V25.5892C39.1795 25.9865 39.106 26.3827 38.9364 26.7421C38.4857 27.6992 37.5451 28.2674 36.5452 28.2674H29.9031C28.9993 28.2674 28.2663 29.0004 28.2663 29.9042V37.5427C28.2663 38.4465 28.9993 39.1795 29.9031 39.1795H37.5415C38.4453 39.1795 39.1783 38.4465 39.1783 37.5427V30.9693C39.1783 30.4522 39.3053 29.9374 39.5804 29.5009C40.0596 28.7406 40.8768 28.2899 41.7462 28.2686H46.8168C47.4193 28.2686 47.908 28.7561 47.908 29.3586V37.8238C47.908 38.692 47.5629 39.5246 46.9497 40.139L40.1379 46.9508C39.5235 47.5652 38.6909 47.9091 37.8226 47.9091H29.3587C28.7561 47.9091 28.2674 47.4205 28.2674 46.8179L28.2674 41.8126C28.2674 41.114 27.9899 40.4439 27.4965 39.9504C27.0031 39.457 26.3329 39.1795 25.6343 39.1795H20.629C20.0265 39.1795 19.5378 38.6908 19.5378 38.0883L19.5378 29.6231C19.5378 28.7549 19.8829 27.9222 20.4961 27.3078L27.468 20.3371C27.9792 19.8259 28.6731 19.5377 29.3966 19.5377H38.0871H38.0883Z\" fill=\"white\" />\n </svg>\n );\n}\n\nexport function NotFoundPage() {\n const translate = useTranslations();\n const router = useRouter();\n\n useEffect(() => {\n hideCrisp();\n }, []);\n const { whitelabel } = useWhitelabel();\n const isGreatApps = useIsDefaultWhitelabel();\n const whitelabelLogo = whitelabel?.logo\n ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`\n : null;\n\n return (\n <div className=\"relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white\">\n <div className=\"flex flex-col items-center gap-[22px] text-center\">\n <div className=\"relative flex flex-col items-center\">\n <Image src=\"/images/404.svg\" alt=\"404\" width={440} height={173} priority unoptimized />\n\n <div className=\"-mt-1 w-full border-t border-zinc-100\" />\n\n <div className=\"-mt-[25px]\">\n {isGreatApps ? (\n <GreatAppsLogo />\n ) : whitelabelLogo ? (\n <Image src={whitelabelLogo} alt={whitelabel?.name || ''} width={50} height={50} className=\"rounded-xl object-contain\" />\n ) : null}\n </div>\n </div>\n\n <h1 className=\"max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]\">\n {translate('common.notFound.title')}\n </h1>\n\n <p className=\"max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0\">\n {translate('common.notFound.description')}\n </p>\n\n <Button\n variant=\"secondary\"\n className=\"h-10!\"\n onClick={() => {\n if (window.history.length > 1) {\n router.back();\n } else {\n router.push('/');\n }\n }}\n >\n {translate('common.notFound.backToHome')}\n </Button>\n </div>\n </div>\n );\n}\n"],"mappings":";AAYI,SACE,KADF;AAVJ,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,eAAe,8BAA8B;AACtD,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,SAAS,gBAAgB;AACvB,SACE,qBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACtF;AAAA,wBAAC,UAAK,GAAE,OAAM,GAAE,OAAM,OAAM,WAAU,QAAO,WAAU,IAAG,WAAU,MAAK,WAAU;AAAA,IACnF,oBAAC,UAAK,GAAE,OAAM,GAAE,OAAM,OAAM,WAAU,QAAO,WAAU,IAAG,WAAU,QAAO,SAAQ,aAAY,KAAI;AAAA,IACnG,oBAAC,UAAK,GAAE,m9BAAk9B,MAAK,SAAQ;AAAA,KACz+B;AAEJ;AAEO,SAAS,eAAe;AAC7B,QAAM,YAAY,gBAAgB;AAClC,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACd,cAAU;AAAA,EACZ,GAAG,CAAC,CAAC;AACL,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,cAAc,uBAAuB;AAC3C,QAAM,iBAAiB,YAAY,OAC/B,GAAG,QAAQ,IAAI,uBAAuB,IAAI,WAAW,IAAI,KACzD;AAEJ,SACE,oBAAC,SAAI,WAAU,mGACb,+BAAC,SAAI,WAAU,qDACb;AAAA,yBAAC,SAAI,WAAU,uCACb;AAAA,0BAAC,SAAM,KAAI,mBAAkB,KAAI,OAAM,OAAO,KAAK,QAAQ,KAAK,UAAQ,MAAC,aAAW,MAAC;AAAA,MAErF,oBAAC,SAAI,WAAU,yCAAwC;AAAA,MAEvD,oBAAC,SAAI,WAAU,cACZ,wBACC,oBAAC,iBAAc,IACb,iBACF,oBAAC,SAAM,KAAK,gBAAgB,KAAK,YAAY,QAAQ,IAAI,OAAO,IAAI,QAAQ,IAAI,WAAU,6BAA4B,IACpH,MACN;AAAA,OACF;AAAA,IAEA,oBAAC,QAAG,WAAU,4JACX,oBAAU,uBAAuB,GACpC;AAAA,IAEA,oBAAC,OAAE,WAAU,oEACV,oBAAU,6BAA6B,GAC1C;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS,MAAM;AACb,cAAI,OAAO,QAAQ,SAAS,GAAG;AAC7B,mBAAO,KAAK;AAAA,UACd,OAAO;AACL,mBAAO,KAAK,GAAG;AAAA,UACjB;AAAA,QACF;AAAA,QAEC,oBAAU,4BAA4B;AAAA;AAAA,IACzC;AAAA,KACF,GACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { IconBell, IconCheck, IconLoader2 } from "@tabler/icons-react";
|
|
4
|
+
import { useTranslations } from "next-intl";
|
|
4
5
|
import { Button } from "../../ui/buttons/Button";
|
|
5
6
|
import {
|
|
6
7
|
Tabs,
|
|
@@ -26,6 +27,7 @@ function NotificationsList({
|
|
|
26
27
|
hasNextPage,
|
|
27
28
|
fetchNextPage
|
|
28
29
|
}) {
|
|
30
|
+
const translate = useTranslations();
|
|
29
31
|
const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
|
|
30
32
|
const handleScroll = (e) => {
|
|
31
33
|
const target = e.currentTarget;
|
|
@@ -36,7 +38,7 @@ function NotificationsList({
|
|
|
36
38
|
}
|
|
37
39
|
};
|
|
38
40
|
if (notifications.length === 0 && !isFetchingNextPage) {
|
|
39
|
-
return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-zinc-200 bg-white", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-16 gap-2", children: /* @__PURE__ */ jsx("span", { className: "paragraph-medium-regular text-zinc-500", children: "
|
|
41
|
+
return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-zinc-200 bg-white", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-16 gap-2", children: /* @__PURE__ */ jsx("span", { className: "paragraph-medium-regular text-zinc-500", children: translate("common.notifications.page.empty") }) }) });
|
|
40
42
|
}
|
|
41
43
|
return /* @__PURE__ */ jsxs(
|
|
42
44
|
"div",
|
|
@@ -60,7 +62,7 @@ function NotificationsList({
|
|
|
60
62
|
}),
|
|
61
63
|
isUnread: notification.status === 1,
|
|
62
64
|
showBorder: index < notifications.length - 1,
|
|
63
|
-
actions: detailsUrl ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", className: "h-8! px-3! paragraph-small-semibold", children: /* @__PURE__ */ jsx(Link, { href: detailsUrl, children: "
|
|
65
|
+
actions: detailsUrl ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", className: "h-8! px-3! paragraph-small-semibold", children: /* @__PURE__ */ jsx(Link, { href: detailsUrl, children: translate("common.notifications.page.details") }) }) : void 0
|
|
64
66
|
},
|
|
65
67
|
notification.id
|
|
66
68
|
);
|
|
@@ -71,6 +73,7 @@ function NotificationsList({
|
|
|
71
73
|
);
|
|
72
74
|
}
|
|
73
75
|
function NotificationPageContent() {
|
|
76
|
+
const translate = useTranslations();
|
|
74
77
|
const unreadNotifications = useInfiniteMessages({
|
|
75
78
|
readed: false,
|
|
76
79
|
type: "notification",
|
|
@@ -86,18 +89,18 @@ function NotificationPageContent() {
|
|
|
86
89
|
const handleMarkAllAsRead = () => {
|
|
87
90
|
markAllAsRead(void 0, {
|
|
88
91
|
onSuccess: () => {
|
|
89
|
-
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "
|
|
92
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translate("common.notifications.page.markAllSuccess"), toastId: t }));
|
|
90
93
|
},
|
|
91
94
|
onError: () => {
|
|
92
|
-
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: "
|
|
95
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: translate("common.notifications.page.markAllError"), toastId: t }));
|
|
93
96
|
}
|
|
94
97
|
});
|
|
95
98
|
};
|
|
96
99
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:gap-8", children: [
|
|
97
100
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
|
|
98
101
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
99
|
-
/* @__PURE__ */ jsx("h1", { className: "title-large-semibold text-gray-950", children: "
|
|
100
|
-
/* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-gray-600 hidden lg:block", children: "
|
|
102
|
+
/* @__PURE__ */ jsx("h1", { className: "title-large-semibold text-gray-950", children: translate("common.notifications.page.title") }),
|
|
103
|
+
/* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-gray-600 hidden lg:block", children: translate("common.notifications.page.subtitle") })
|
|
101
104
|
] }),
|
|
102
105
|
/* @__PURE__ */ jsxs(
|
|
103
106
|
Button,
|
|
@@ -108,8 +111,8 @@ function NotificationPageContent() {
|
|
|
108
111
|
disabled: isMarkingAll || totalUnread === 0,
|
|
109
112
|
children: [
|
|
110
113
|
isMarkingAll ? /* @__PURE__ */ jsx(IconLoader2, { size: 20, className: "animate-spin" }) : /* @__PURE__ */ jsx(IconCheck, { size: 20 }),
|
|
111
|
-
/* @__PURE__ */ jsx("span", { className: "lg:block hidden", children: "
|
|
112
|
-
/* @__PURE__ */ jsx("span", { className: "lg:hidden", children: "
|
|
114
|
+
/* @__PURE__ */ jsx("span", { className: "lg:block hidden", children: translate("common.notifications.page.markAllReadDesktop") }),
|
|
115
|
+
/* @__PURE__ */ jsx("span", { className: "lg:hidden", children: translate("common.notifications.page.markAllReadMobile") })
|
|
113
116
|
]
|
|
114
117
|
}
|
|
115
118
|
)
|
|
@@ -122,7 +125,7 @@ function NotificationPageContent() {
|
|
|
122
125
|
children: [
|
|
123
126
|
/* @__PURE__ */ jsxs(TabsList, { className: "h-auto pb-0 bg-transparent", children: [
|
|
124
127
|
/* @__PURE__ */ jsxs(TabsTrigger, { className: "gap-2", value: "all", children: [
|
|
125
|
-
"
|
|
128
|
+
translate("common.notifications.page.tabAll"),
|
|
126
129
|
" ",
|
|
127
130
|
/* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
|
|
128
131
|
"(",
|
|
@@ -131,7 +134,7 @@ function NotificationPageContent() {
|
|
|
131
134
|
] })
|
|
132
135
|
] }),
|
|
133
136
|
/* @__PURE__ */ jsxs(TabsTrigger, { className: "gap-2", value: "unreads", disabled: totalUnread === 0, children: [
|
|
134
|
-
"
|
|
137
|
+
translate("common.notifications.page.tabUnread"),
|
|
135
138
|
" ",
|
|
136
139
|
/* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
|
|
137
140
|
"(",
|