feat(catalog): catalogo modern Hippiehotel in albero separato (catalog-modern)

2026-06-20 07:26:19 +00:00 · 2026-06-07 23:00:06 +02:00
parent 3cd6c5a518
commit 21d3a62b7a
73 changed files with 6931 additions and 4 deletions
@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { SanitizeHtml } from '../../../../../api';
+import { Column, Grid, Text } from '../../../../../common';
+import { useCatalogData } from '../../../../../hooks';
+import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
+import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
+import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
+import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
+import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
+import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
+import { CatalogLayoutProps } from './CatalogLayout.types';
+
+export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
+{
+    const { page = null } = props;
+    const { currentOffer = null } = useCatalogData();
+
+    return (
+        <Grid>
+            <Column overflow="hidden" size={ 7 }>
+                <CatalogItemGridWidgetView />
+            </Column>
+            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
+                { !currentOffer &&
+                    <>
+                        { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
+                        <Text center dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(0)) } } />
+                    </> }
+                { currentOffer &&
+                    <>
+                        <div className="relative overflow-hidden">
+                            <CatalogViewProductWidgetView />
+                            <CatalogGuildBadgeWidgetView className="bottom-1 inset-e-1" position="absolute" />
+                        </div>
+                        <Column grow gap={ 1 }>
+                            <Text truncate>{ currentOffer.localizationName }</Text>
+                            <div className="grow!">
+                                <CatalogGuildSelectorWidgetView />
+                            </div>
+                            <div className="flex justify-end">
+                                <CatalogTotalPriceWidget alignItems="end" />
+                            </div>
+                            <CatalogPurchaseWidgetView />
+                        </Column>
+                    </> }
+            </Column>
+        </Grid>
+    );
+};