Implement PBL store selector internal component

Author: samuelsarabia-adyen

src/components/internal/FormFields/Select/Select.tsx

@@ -30,6 +30,7 @@ const Select = <T extends SelectItem>({
     placeholder,
     uniqueId,
     renderListItem,
+    renderButtonContent,
     isCollatingErrors,
     setToTargetWidth,
     withoutCollapseIndicator = false,
@@ -330,6 +331,7 @@ const Select = <T extends SelectItem>({
                 multiSelect={multiSelect}
                 placeholder={placeholder}
                 readonly={readonly}
+                renderButtonContent={renderButtonContent}
                 selectListId={selectListId}
                 showList={showList}
                 toggleButtonRef={toggleButtonRef}

src/components/internal/FormFields/Select/components/SelectButton.tsx

@@ -87,7 +87,9 @@ const SelectButton = <T extends SelectItem>(props: SelectButtonProps<T> & { appl
             id={props.id}
             {...(showList && filterable ? {} : { 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'] })}
         >
-            {showList && filterable ? (
+            {props.renderButtonContent ? (
+                props.renderButtonContent({ item: buttonActiveItem })
+            ) : showList && filterable ? (
                 <input
                     aria-autocomplete="list"
                     aria-label={props['aria-label']}

src/components/internal/Icon/Icon.tsx

@@ -12,6 +12,7 @@ const icons = {
     'chevron-left': () => import('../../../images/icons/chevron-left.svg?component'),
     'chevron-right': () => import('../../../images/icons/chevron-right.svg?component'),
     'chevron-up': () => import('../../../images/icons/chevron-up.svg?component'),
+    'chevron-up-down': () => import('../../../images/icons/chevron-up-down.svg?component'),
     copy: () => import('../../../images/icons/copy.svg?component'),
     'cross-circle-fill': () => import('../../../images/icons/cross-circle-fill.svg?component'),
     cross: () => import('../../../images/icons/cross.svg?component'),

src/components/internal/StoreSelector/StoreSelector.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render, screen } from '@testing-library/preact';
+import { beforeEach, describe, test, expect, vi } from 'vitest';
+import { StoreSelector } from './StoreSelector';
+import { STORES } from '../../../../mocks/mock-data';
+
+const mockStores = STORES.map(({ storeCode, description }) => ({ id: storeCode, name: storeCode, storeCode, description }));
+
+describe('StoreSelector', () => {
+    const mockSetSelectedStoreId = vi.fn();
+
+    beforeEach(() => {
+        mockSetSelectedStoreId.mockClear();
+    });
+
+    test('should render null when stores array is empty', () => {
+        const { container } = render(<StoreSelector stores={[]} selectedStoreId={undefined} setSelectedStoreId={mockSetSelectedStoreId} />);
+        expect(container.firstChild).toBeNull();
+    });
+
+    test('should not render a button when there is only one store', () => {
+        render(<StoreSelector stores={mockStores.slice(0, 1)} selectedStoreId={mockStores[0]?.id} setSelectedStoreId={mockSetSelectedStoreId} />);
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    test('should render Select component when there are multiple stores', () => {
+        render(<StoreSelector stores={mockStores} selectedStoreId={mockStores[0]?.id} setSelectedStoreId={mockSetSelectedStoreId} />);
+
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    test('should render with correct props passed to Select component', () => {
+        render(<StoreSelector stores={mockStores} selectedStoreId={mockStores[1]?.id} setSelectedStoreId={mockSetSelectedStoreId} />);
+
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+
+        expect(button).toHaveTextContent('STORE_LON_001');
+        expect(button).toHaveTextContent('Main Store - London');
+    });
+
+    test('should render button content correctly when data.item exists', () => {
+        render(<StoreSelector stores={mockStores} selectedStoreId={mockStores[0]?.id} setSelectedStoreId={mockSetSelectedStoreId} />);
+
+        expect(screen.getByText('STORE_NY_001')).toBeInTheDocument();
+        expect(screen.getByText('Main Store - New York')).toBeInTheDocument();
+    });
+
+    test('should pass correct props to Select component', () => {
+        render(<StoreSelector stores={mockStores} selectedStoreId={mockStores[0]?.id} setSelectedStoreId={mockSetSelectedStoreId} />);
+
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+
+        expect(button).toHaveTextContent('STORE_NY_001');
+        expect(button).toHaveTextContent('Main Store - New York');
+    });
+});

src/components/internal/StoreSelector/StoreSelector.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import Select from '../FormFields/Select';
+import { StoreSelectorButtonContent } from './StoreSelectorButton/StoreSelectorButton';
+import { StoreSelectorItem } from './StoreSelectorItem/StoreSelectorItem';
+import { StoreSelectorItemParams, StoreSelectorProps } from './types';
+import { SelectChangeEvent } from '../FormFields/Select/types';
+import { containerQueries, useResponsiveContainer } from '../../../hooks/useResponsiveContainer';
+
+export const StoreSelector = ({ stores, selectedStoreId, setSelectedStoreId }: StoreSelectorProps) => {
+    const isMobileContainer = useResponsiveContainer(containerQueries.down.xs);
+    const handleStoreChange = useCallback(
+        ({ target }: SelectChangeEvent) => {
+            setSelectedStoreId(target.value);
+        },
+        [setSelectedStoreId]
+    );
+
+    const renderButtonContent = (data: { item?: StoreSelectorItemParams }) => {
+        if (!data.item) {
+            return null;
+        }
+        return <StoreSelectorButtonContent name={data.item.storeCode} description={data.item.description} />;
+    };
+
+    if (stores && stores.length === 1) {
+        return <StoreSelectorItem name={stores[0]?.storeCode} description={stores[0]?.description} />;
+    }
+
+    const canRenderSelector = stores && stores.length > 1;
+    if (!canRenderSelector) return null;
+
+    return (
+        <Select
+            filterable={false}
+            items={stores}
+            multiSelect={false}
+            onChange={handleStoreChange}
+            renderButtonContent={renderButtonContent}
+            renderListItem={data => <StoreSelectorItem name={data.item.name} description={data.item.description} />}
+            selected={selectedStoreId}
+            setToTargetWidth={isMobileContainer}
+            showOverlay={false}
+            withoutCollapseIndicator={true}
+        />
+    );
+};

src/components/internal/StoreSelector/StoreSelectorButton/StoreSelectorButton.scss

@@ -0,0 +1,32 @@
+@use '../../../../style';
+
+.adyen-pe-store-selector-button {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    &__labels {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    &__name,
+    &__description {
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__description {
+        color: style.token(color-label-secondary);
+    }
+
+    &__icon {
+        font-size: 16px;
+    }
+}

src/components/internal/StoreSelector/StoreSelectorButton/StoreSelectorButton.tsx

@@ -0,0 +1,24 @@
+import Typography from '../../Typography/Typography';
+import { TypographyElement, TypographyVariant } from '../../Typography/types';
+import Icon from '../../Icon';
+import './StoreSelectorButton.scss';
+
+interface StoreSelectorButtonContentProps {
+    name?: string;
+    description?: string;
+}
+
+export const StoreSelectorButtonContent = ({ name, description }: StoreSelectorButtonContentProps) => (
+    <div className="adyen-pe-store-selector-button">
+        <div className="adyen-pe-store-selector-button__labels">
+            <Typography el={TypographyElement.SPAN} variant={TypographyVariant.BODY} className="adyen-pe-store-selector-button__name">
+                {name}
+            </Typography>
+            <Typography el={TypographyElement.SPAN} variant={TypographyVariant.CAPTION} className="adyen-pe-store-selector-button__description">
+                {description}
+            </Typography>
+        </div>
+
+        <Icon name="chevron-up-down" size="medium" className="adyen-pe-store-selector-button__icon" />
+    </div>
+);

src/components/internal/StoreSelector/StoreSelectorItem/StoreSelectorItem.scss

@@ -0,0 +1,14 @@
+@use '../../../../style';
+
+.adyen-pe-store-selector-item {
+    display: flex;
+    flex-direction: column;
+
+    &__name {
+        text-align: left;
+    }
+
+    &__description {
+        color: style.token(color-label-secondary);
+    }
+}

src/components/internal/StoreSelector/StoreSelectorItem/StoreSelectorItem.tsx

@@ -0,0 +1,19 @@
+import Typography from '../../Typography/Typography';
+import { TypographyElement, TypographyVariant } from '../../Typography/types';
+import './StoreSelectorItem.scss';
+
+interface StoreSelectorItemProps {
+    name?: string;
+    description?: string;
+}
+
+export const StoreSelectorItem = ({ name, description }: StoreSelectorItemProps) => (
+    <div className="adyen-pe-store-selector-item">
+        <Typography el={TypographyElement.SPAN} variant={TypographyVariant.BODY} className="adyen-pe-store-selector-item__name">
+            {name}
+        </Typography>
+        <Typography el={TypographyElement.SPAN} variant={TypographyVariant.CAPTION} className="adyen-pe-store-selector-item__description">
+            {description}
+        </Typography>
+    </div>
+);

src/components/internal/StoreSelector/index.ts

@@ -0,0 +1 @@
+export * from './StoreSelector';