Merge pull request #1845 from GW2Treasures/feature/wintersday-wizards…

…-vault

Improve wintersday pages

apps/web/app/[language]/festival/wintersday/(index)/page.tsx

@@ -1,32 +1,73 @@
+import { Gw2Accounts } from '@/components/Gw2Api/Gw2Accounts';
 import { Trans } from '@/components/I18n/Trans';
+import { ItemInventoryTable } from '@/components/Item/ItemInventoryTable';
 import { ItemTable } from '@/components/ItemTable/ItemTable';
 import { ItemTableColumnsButton } from '@/components/ItemTable/ItemTableColumnsButton';
 import { ItemTableContext } from '@/components/ItemTable/ItemTableContext';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { pageView } from '@/lib/pageView';
 import { Headline } from '@gw2treasures/ui/components/Headline/Headline';
 import type { Metadata } from 'next';
+import { requiredScopes } from '../helper';
+import { db } from '@/lib/prisma';
+import { linkProperties } from '@/lib/linkProperties';
+import { cache } from '@/lib/cache';
+import { ItemLink } from '@/components/Item/ItemLink';
+import type { PageProps } from '@/lib/next';
+import { getTranslate } from '@/lib/translate';
+import { Fragment } from 'react';
 
 const itemIds = [
   86601,
   86627,
   77604,
 ];
 
+const loadData = cache(async function loadData() {
+  const [items] = await Promise.all([
+    db.item.findMany({
+      where: { id: { in: itemIds }},
+      select: linkProperties
+    })
+  ]);
+
+  return { items };
+}, ['wintersday-items'], { revalidate: 60 * 60 });
+
+
 export default async function WintersdayPage() {
+  const { items } = await loadData();
   await pageView('festival/wintersday');
 
   return (
     <PageLayout>
       <ItemTableContext id="wintersday">
+        <p><Trans id="festival.wintersday.intro"/></p>
         <p><Trans id="festival.wintersday.description"/></p>
         <Headline actions={<ItemTableColumnsButton/>} id="items"><Trans id="navigation.items"/></Headline>
         <ItemTable query={{ where: { id: { in: itemIds }}}} defaultColumns={['item', 'rarity', 'type', 'buyPrice', 'buyPriceTrend', 'sellPrice', 'sellPriceTrend']}/>
       </ItemTableContext>
+
+      <Gw2Accounts requiredScopes={requiredScopes} loading={null} loginMessage={<Trans id="festival.wintersday.items.login"/>} authorizationMessage={<Trans id="festival.wintersday.items.authorize"/>}>
+        {items.map((item) => (
+          <Fragment key={item.id}>
+            <Headline id={item.id.toString()}><ItemLink item={item}/></Headline>
+            <ItemInventoryTable itemId={item.id}/>
+          </Fragment>
+        ))}
+      </Gw2Accounts>
+
     </PageLayout>
   );
 }
 
-export const metadata: Metadata = {
-  title: 'Wintersday'
-};
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: {
+      absolute: `${t('festival.wintersday')} · gw2treasures.com`
+    }
+  };
+}

apps/web/app/[language]/festival/wintersday/achievements/page.tsx

@@ -13,6 +13,7 @@ import { Notice } from '@gw2treasures/ui/components/Notice/Notice';
 import type { Metadata } from 'next';
 import { requiredScopes } from '../helper';
 import { pageView } from '@/lib/pageView';
+import { getTranslate } from '@/lib/translate';
 
 const achievementIds = [
   5005,
@@ -89,6 +90,12 @@ export default async function WintersdayAchievementsPage({ params }: PageProps)
   );
 }
 
-export const metadata: Metadata = {
-  title: 'Achievements'
-};
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: t('navigation.achievements')
+  };
+}
+

apps/web/app/[language]/festival/wintersday/layout.tsx

@@ -14,13 +14,14 @@ const endsAt = new Date('2025-01-02T17:00:00.000Z');
 
 export default function WintersdayLayout({ children }: LayoutProps) {
   return (
-    <HeroLayout color="#7993a9" hero={(<Snow><Headline id="wintersday" actions={<>Time remaining: <ResetTimer reset={endsAt}/></>}>Wintersday</Headline></Snow>)} skipLayout
+    <HeroLayout color="#7993a9" hero={(<Snow><Headline id="wintersday" actions={<>Time remaining: <ResetTimer reset={endsAt}/></>}><Trans id="festival.wintersday"/></Headline></Snow>)} skipLayout
       navBar={(
         <NavBar base="/festival/wintersday/" items={[
           { segment: '(index)', href: '/festival/wintersday', label: <Trans id="festival.wintersday"/> },
           { segment: 'achievements', label: <Trans id="navigation.achievements"/> },
           { segment: 'skins', label: <Trans id="navigation.skins"/> },
           { segment: 'minis', label: <Trans id="festival.wintersday.minis"/> },
+          { segment: 'wizards-vault', label: <Trans id="navigation.wizardsVault"/> },
         ]}/>
       )}
     >

apps/web/app/[language]/festival/wintersday/minis/page.tsx

@@ -8,6 +8,8 @@ import { db } from '@/lib/prisma';
 import type { Metadata } from 'next';
 import { requiredScopes } from '../helper';
 import { pageView } from '@/lib/pageView';
+import { getTranslate } from '@/lib/translate';
+import type { PageProps } from '@/lib/next';
 
 const miniIds = [
   115, // Mini Princess Doll
@@ -76,6 +78,11 @@ export default async function WintersdayAchievementsPage() {
   );
 }
 
-export const metadata: Metadata = {
-  title: 'Minis'
-};
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: t('festival.wintersday.minis')
+  };
+}

apps/web/app/[language]/festival/wintersday/skins/page.tsx

@@ -8,6 +8,8 @@ import { db } from '@/lib/prisma';
 import type { Metadata } from 'next';
 import { requiredScopes } from '../helper';
 import { pageView } from '@/lib/pageView';
+import type { PageProps } from '@/lib/next';
+import { getTranslate } from '@/lib/translate';
 
 const skinIds = [
   // weapons
@@ -103,6 +105,11 @@ export default async function WintersdayAchievementsPage() {
   );
 }
 
-export const metadata: Metadata = {
-  title: 'Skins'
-};
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: t('navigation.skins')
+  };
+}

apps/web/app/[language]/festival/wintersday/wizards-vault/page.tsx

@@ -0,0 +1,64 @@
+import { Gw2Accounts } from '@/components/Gw2Api/Gw2Accounts';
+import { Trans } from '@/components/I18n/Trans';
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { cache } from '@/lib/cache';
+import { db } from '@/lib/prisma';
+import type { Metadata } from 'next';
+import { requiredScopes } from '../helper';
+import { pageView } from '@/lib/pageView';
+import Link from 'next/link';
+import { WizardsVaultObjective } from '@/components/WizardsVault/WizardsVaultObjective';
+import type { PageProps } from '@/lib/next';
+import { getTranslate } from '@/lib/translate';
+import { Icon } from '@gw2treasures/ui';
+import { Notice } from '@gw2treasures/ui/components/Notice/Notice';
+
+const objectiveIds: number[] = [
+  // TODO: add objective ids
+];
+
+const loadData = cache(async function loadData() {
+  const [objectives] = await Promise.all([
+    db.wizardsVaultObjective.findMany({
+      where: { OR: [{ id: { in: objectiveIds }}, { name_en: { startsWith: '(Festival)' }, removedFromApi: false }] },
+    })
+  ]);
+
+  return { objectives };
+}, ['wintersday-wizards-vault-objectives'], { revalidate: 60 * 5 });
+
+
+export default async function WintersdayAchievementsPage({ params }: PageProps) {
+  const { language } = await params;
+  const { objectives } = await loadData();
+  await pageView('festival/wintersday/wizwards-vault');
+
+  return (
+    <PageLayout>
+      <Gw2Accounts requiredScopes={requiredScopes} loading={null} loginMessage={<Trans id="festival.wintersday.wizards-vault.login"/>} authorizationMessage={<Trans id="festival.wintersday.wizards-vault.authorize"/>}/>
+
+      <p><Trans id="festival.wintersday.wizards-vault.description"/></p>
+
+      {objectives.length > 0 ? objectives.map((objective) => (
+        <WizardsVaultObjective key={objective.id} objective={objective} language={language}/>
+      )) : (
+        <Notice>No Wizard&apos;s Vault objectives for wintersday are available in the Guild Wars 2 API yet.</Notice>
+      )}
+
+      <p style={{ border: '1px solid var(--color-border)', marginTop: 48, padding: 16 }}>
+        <Icon icon="wizards-vault"/>{' '}
+        Visit the <Link href="/wizards-vault">Wizard&apos;s Vault page</Link> to view all your active Wizard&apos;s Vault objectives.
+      </p>
+
+    </PageLayout>
+  );
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: t('navigation.wizardsVault')
+  };
+}

apps/web/components/Gw2Api/Gw2AccountName.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import type { Gw2Account } from './types';
 import { Tip } from '@gw2treasures/ui/components/Tip/Tip';
+import commonStyles from '@gw2treasures/ui/common.module.css';
 
 interface Gw2AccountNameProps {
   account: Gw2Account;
@@ -10,16 +11,16 @@ interface Gw2AccountNameProps {
 export const Gw2AccountName: FC<Gw2AccountNameProps> = ({ account, long }) => {
   // if the account does not have a displayName, always just return the name
   if(!account.displayName) {
-    return account.name;
+    return <span className={commonStyles.nowrap}>{account.name}</span>;
   }
 
   if(long) {
-    return `${account.displayName} (${account.name})`;
+    return <span className={commonStyles.nowrap}>{account.displayName} ({account.name})</span>;
   }
 
   return (
     <Tip tip={account.name}>
-      <span>{account.displayName}</span>
+      <span className={commonStyles.nowrap}>{account.displayName}</span>
     </Tip>
   );
 };

apps/web/components/Gw2Api/Gw2Accounts.tsx

@@ -11,7 +11,7 @@ import { useUser } from '../User/use-user';
 import { Gw2AccountLoginNotice } from './Gw2AccountLoginNotice';
 
 export interface Gw2AccountsProps {
-  children?: (accounts: Gw2Account[], scopes: Scope[]) => ReactElement;
+  children?: ((accounts: Gw2Account[], scopes: Scope[]) => ReactElement) | ReactNode;
   requiredScopes: Scope[];
   optionalScopes?: Scope[];
   options?: GetAccountsOptions;
@@ -58,5 +58,9 @@ const Gw2AccountsInternal: FC<Gw2AccountsProps> = ({ children, requiredScopes, o
     );
   }
 
-  return children?.(accounts.accounts, accounts.scopes);
+  if(typeof children === 'function') {
+    return children?.(accounts.accounts, accounts.scopes);
+  }
+
+  return children;
 };

apps/web/components/Item/ItemInventoryTable.tsx

@@ -39,7 +39,7 @@ export const ItemInventoryTable: FC<WardrobeProps> = ({ itemId }) => {
         <Table>
           <thead>
             <tr>
-              <Table.HeaderCell>Account</Table.HeaderCell>
+              <Table.HeaderCell small>Account</Table.HeaderCell>
               <Table.HeaderCell>Location</Table.HeaderCell>
               <Table.HeaderCell align="right">Count</Table.HeaderCell>
             </tr>

apps/web/components/WizardsVault/WizardsVaultObjective.module.css

@@ -1,3 +1,7 @@
+.wrapper + .wrapper {
+  margin-top: 64px;
+}
+
 .objective {
   background-color: var(--color-background-light);
   border: 1px solid var(--color-border-dark);

apps/web/components/WizardsVault/WizardsVaultObjective.tsx

@@ -13,7 +13,7 @@ interface WizardsVaultObjectiveProps {
 
 export const WizardsVaultObjective: FC<WizardsVaultObjectiveProps> = ({ objective, language }) => {
   return (
-    <>
+    <div className={styles.wrapper}>
       <div className={styles.objective}>
         <div className={styles.title}>
           {localizedName(objective, language)}
@@ -23,6 +23,6 @@ export const WizardsVaultObjective: FC<WizardsVaultObjectiveProps> = ({ objectiv
       </div>
 
       <WizardsVaultObjectiveTable objectiveId={objective.id}/>
-    </>
+    </div>
   );
 };

apps/web/translations/de.json

@@ -295,5 +295,13 @@
   "fractal.uncategorized": "Nicht kategorisiert",
   "fractal.underground_facility": "Untergrundeinrichtung",
   "fractal.urban_battleground": "Urbanes Schlachtfeld",
-  "fractal.volcanic": "Vulkanisches Fraktal"
+  "fractal.volcanic": "Vulkanisches Fraktal",
+  "festival.wintersday": "Wintertag",
+  "festival.wintersday.intro": "Die Glocken klingen, Schneebälle fliegen und das fantastische Golem-Luftschiff von Spielzeugmacher Tixx macht Halt über Götterfels – in Tyria wird einmal mehr das traditionelle Wintertag-Fest gefeiert.",
+  "festival.wintersday.description": "Verfolge während des Wintertags deine Fortschritte auf allen deinen Konten auf gw2treasures.com.",
+  "festival.wintersday.achievements.description": "Diese Erfolge sind nur während des Wintertags verfügbar.",
+  "festival.wintersday.skins.description": "Diese Skins sind nur während des Wintertags verfügbar.",
+  "festival.wintersday.minis": "Miniaturen",
+  "festival.wintersday.minis.description": "Diese Miniaturen sind nur während des Wintertags verfügbar.",
+  "festival.wintersday.wizards-vault.description": "Diese Aufgaben im Gewölbe des Zauberers sind nur während dest Wintertags verfügbar."
 }

apps/web/translations/en.json

@@ -307,7 +307,10 @@
   "fractal.urban_battleground": "Urban Battleground",
   "fractal.volcanic": "Volcanic",
   "festival.wintersday": "Wintersday",
-  "festival.wintersday.description": "Bells are ringing, snowballs are flying, and Toymaster Tixx’s fantastic golem-shaped airship is hovering over Divinity’s Reach—the traditional Tyrian celebration of Wintersday is here again!",
+  "festival.wintersday.intro": "Bells are ringing, snowballs are flying, and Toymaster Tixx’s fantastic golem-shaped airship is hovering over Divinity’s Reach—the traditional Tyrian celebration of Wintersday is here again!",
+  "festival.wintersday.description": "Keep track of your progress on all your accounts during Wintersday on gw2treasures.com.",
+  "festival.wintersday.items.authorize": "You need to authorize gw2treasures.com to be able to see your accounts inventories.",
+  "festival.wintersday.items.login": "You need to login to be able to see your accounts inventories.",
   "festival.wintersday.achievements.description": "These achievements are only available during wintersday.",
   "festival.wintersday.achievements.authorize": "You need to authorize gw2treasures.com to be able to see your accounts achievement progress.",
   "festival.wintersday.achievements.login": "You need to login to be able to see your accounts achievement progress.",
@@ -317,5 +320,8 @@
   "festival.wintersday.minis": "Minis",
   "festival.wintersday.minis.description": "These minis are only available during wintersday.",
   "festival.wintersday.minis.authorize": "You need to authorize gw2treasures.com to be able to see your accounts mini unlocks.",
-  "festival.wintersday.minis.login": "You need to login to be able to see your accounts mini unlocks."
+  "festival.wintersday.minis.login": "You need to login to be able to see your accounts mini unlocks.",
+  "festival.wintersday.wizards-vault.description": "These are all the Wizard's Vault objectives only active during Wintersday.",
+  "festival.wintersday.wizards-vault.authorize": "You need to authorize gw2treasures.com to be able to see your accounts Wizard's Vault progress.",
+  "festival.wintersday.wizards-vault.login": "You need to login to be able to see your accounts Wizard's Vault progress."
 }

packages/ui/common.module.css

@@ -0,0 +1,3 @@
+.nowrap {
+  white-space: nowrap;
+}

packages/ui/index.ts

@@ -5,3 +5,6 @@ export * from './icons';
 
 // lib
 export * from './lib';
+
+import commonStyles from './common.module.css';
+export { commonStyles };

packages/ui/package.json

@@ -12,6 +12,7 @@
     "icons/",
     "lib/",
     "reset.module.css",
+    "common.module.css",
     "index.ts",
     "types.d.ts",
     "tsconfig.json",

packages/ui/tsconfig.json

@@ -4,6 +4,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "**/*.module.css",
     ".next/types/**/*.ts"
   ],
 }