@popsure/dirty-swan 0.66.30 → 0.67.0

package/dist/esm/index.js

@@ -448,7 +448,7 @@ import './_commonjsHelpers-BFTU3MAI.js';
 import './style-inject.es-tgCJW-Cu.js';
 import './index-DLQEsiym.js';
 import './index-BClARCFl.js';
-import './index-BYyiyH6K.js';
+import './index-DbXDuiSV.js';
 import './index-CNcEE5dn.js';
 import './index-hWqCLhoS.js';
 import './index-DZVEBgCf.js';

package/dist/esm/lib/components/autocompleteAddress/index.d.ts

@@ -27,12 +27,14 @@ export interface AutocompleteAddressProps {
         additionalInformation?: string;
         postcode?: string;
         city?: string;
+        country?: string;
+        countrySearch?: string;
     };
     manualAddressEntryTexts?: {
         preText?: string;
         cta?: string;
     };
-    countryCode?: string;
+    countryCode?: string | null;
 }
 declare const AutocompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, inputProps, countryCode }: AutocompleteAddressProps) => JSX.Element;
 export { AutocompleteAddress };

package/dist/esm/lib/components/autocompleteAddress/index.stories.d.ts

@@ -42,6 +42,17 @@ declare const story: {
                 };
             };
         };
+        countryCode: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
     };
     args: {
         apiKey: string;
@@ -62,6 +73,9 @@ export declare const AutocompleteAddressStory: {
 export declare const WithAddress: {
     render: ({ apiKey, onAddressChange, placeholders, }: AutocompleteAddressProps) => JSX.Element;
 };
+export declare const Worldwide: {
+    render: ({ apiKey, onAddressChange }: AutocompleteAddressProps) => JSX.Element;
+};
 export declare const WithLocalisationEntryText: {
     render: ({ apiKey, onAddressChange }: AutocompleteAddressProps) => JSX.Element;
 };

package/dist/esm/lib/components/table/components/TableCell/ButtonCell/ButtonCell.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/util/images/index.stories.js

@@ -6,7 +6,7 @@ import '../../components/dateSelector/index.js';
 import '../../components/signaturePad/index.js';
 import '../../index-BClARCFl.js';
 import { Input } from '../../components/input/index.js';
-import '../../index-BYyiyH6K.js';
+import '../../index-DbXDuiSV.js';
 import '../../index-DYcCCrfR.js';
 import { Button } from '../../components/button/index.js';
 import '../../index-DZVEBgCf.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.66.30",
+  "version": "0.67.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/autocompleteAddress/index.stories.tsx

@@ -45,7 +45,19 @@ const story = {
       table: {
         type: {
           summary:
-            '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }',
+            '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; country?: string; countrySearch?: string; }',
+        },
+      },
+    },
+    countryCode: {
+      description:
+        'Alpha-2 country code to restrict the search to. Pass `null` to search worldwide and let the user pick the country when entering the address manually.',
+      table: {
+        type: {
+          summary: 'string | null',
+        },
+        defaultValue: {
+          summary: 'DE',
         },
       },
     },
@@ -59,7 +71,7 @@ const story = {
     docs: {
       description: {
         component:
-          'This component is for now only restricted to "address" types and will restrict every query to Germany.',
+          'This component is restricted to "address" types and restricts every query to Germany by default. Use `countryCode` to restrict it to another country, or `null` to search worldwide.',
       },
     },
   },
@@ -117,6 +129,16 @@ export const WithAddress = {
   ),
 };
 
+export const Worldwide = {
+  render: ({ apiKey, onAddressChange }: AutocompleteAddressProps) => (
+    <AutocompleteAddress
+      apiKey={apiKey}
+      countryCode={null}
+      onAddressChange={onAddressChange}
+    />
+  ),
+};
+
 export const WithLocalisationEntryText = {
   render: ({ apiKey, onAddressChange }: AutocompleteAddressProps) => (
     <AutocompleteAddress

package/src/lib/components/autocompleteAddress/index.test.tsx

@@ -13,13 +13,15 @@ const address = {
 
 const setup = (
   address: Partial<Address> | undefined = undefined,
-  onAddressChange: (address: Partial<Address>) => void = () => {}
+  onAddressChange: (address: Partial<Address>) => void = () => {},
+  countryCode?: string | null
 ) => {
   return render(
     <AutocompleteAddress
       address={address}
       apiKey={''}
       onAddressChange={onAddressChange}
+      countryCode={countryCode}
     />
   );
 };
@@ -90,6 +92,62 @@ describe('AutocompleteAddress component', () => {
     expect(callback).toHaveBeenCalledWith(address);
   });
 
+  it('Should not show a country field when restricted to a country', async () => {
+    const { findByText, queryByTestId, user } = setup();
+
+    await user.click(await findByText('enter address manually'));
+
+    expect(queryByTestId('autocomplete-country')).not.toBeInTheDocument();
+  });
+
+  it('Should let the user pick the country when searching worldwide', async () => {
+    const callback = jest.fn();
+    const { findByText, getByRole, getByTestId, user } = setup(
+      undefined,
+      callback,
+      null
+    );
+
+    await user.click(await findByText('enter address manually'));
+
+    await user.type(getByTestId('autocomplete'), 'Calle Mayor');
+    await user.type(getByTestId('autocomplete-house-number'), '1');
+    await user.type(getByTestId('autocomplete-postcode'), '28013');
+    await user.type(getByTestId('autocomplete-city'), 'Madrid');
+
+    expect(callback).toHaveBeenLastCalledWith(
+      expect.objectContaining({ country: undefined })
+    );
+
+    await user.click(getByRole('button', { name: 'Country' }));
+    await user.type(getByRole('textbox', { name: 'Search country' }), 'Spain');
+    await user.click(getByRole('radio', { name: 'Spain' }));
+
+    expect(callback).toHaveBeenLastCalledWith({
+      street: 'Calle Mayor',
+      houseNumber: '1',
+      postcode: '28013',
+      city: 'Madrid',
+      country: 'ES',
+    });
+  });
+
+  it('Should keep the country of a worldwide address when editing it', async () => {
+    const callback = jest.fn();
+    const { getByTestId, user } = setup(
+      { ...address, country: 'ES' },
+      callback,
+      null
+    );
+
+    await user.type(getByTestId('autocomplete-house-number'), '1');
+
+    expect(callback).toHaveBeenLastCalledWith(
+      expect.objectContaining({ houseNumber: '40001', country: 'ES' })
+    );
+    expect(getByTestId('autocomplete-country')).toHaveTextContent('Spain');
+  });
+
   it('Should prefill fields if an address is provided', async () => {
     const { getByDisplayValue } = setup(address);
 

package/src/lib/components/autocompleteAddress/index.tsx

@@ -1,11 +1,20 @@
-import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash.debounce';
 import { Input } from '../input';
+import { SearchableDropdown } from '../searchableDropdown';
 import {
   Address,
   Alpha2CountryCode,
   countryNameFromAlphaCode,
+  getAllCountries,
 } from '@popsure/public-models';
 
 import { geocoderAddressComponentToPartialAddress } from './util';
@@ -76,12 +85,14 @@ export interface AutocompleteAddressProps {
     additionalInformation?: string;
     postcode?: string;
     city?: string;
+    country?: string;
+    countrySearch?: string;
   };
   manualAddressEntryTexts?: {
     preText?: string;
     cta?: string;
   };
-  countryCode?: string;
+  countryCode?: string | null;
 }
 
 const AutocompleteAddress = ({
@@ -112,6 +123,16 @@ const AutocompleteAddress = ({
     null
   );
 
+  const isWorldwide = countryCode === null;
+
+  const countryOptions = useMemo(
+    () =>
+      isWorldwide
+        ? getAllCountries().map(({ code, name }) => ({ id: code, label: name }))
+        : [],
+    [isWorldwide]
+  );
+
   useEffect(() => {
     if (address) {
       if (autocompleteElement.current && address.street) {
@@ -133,7 +154,7 @@ const AutocompleteAddress = ({
 
     autocomplete.current = new google.maps.places.Autocomplete(reference, {
       types: ['address'],
-      componentRestrictions: { country: countryCode },
+      ...(countryCode && { componentRestrictions: { country: countryCode } }),
     });
 
     autocomplete.current.addListener('place_changed', onPlaceChanged);
@@ -227,21 +248,27 @@ const AutocompleteAddress = ({
     setManualAddressEntry(true);
   };
 
+  const updateManualAddress = (
+    changes: Partial<Address>,
+    { updatePlace } = { updatePlace: true }
+  ) => {
+    const newAddress = {
+      ...address,
+      ...changes,
+      country: countryCode ?? changes.country ?? address?.country,
+    };
+    setAddress(newAddress);
+    onAddressChange(newAddress);
+
+    if (updatePlace) {
+      debouncedSetPlace(newAddress);
+    }
+  };
+
   const onManualAddressChange =
     ({ updatePlace } = { updatePlace: true }) =>
-    (e: ChangeEvent<HTMLInputElement>) => {
-      const newAddress = {
-        ...address,
-        [e.target.name]: e.target.value,
-        country: countryCode,
-      };
-      setAddress(newAddress);
-      onAddressChange(newAddress);
-
-      if (updatePlace) {
-        debouncedSetPlace(newAddress);
-      }
-    };
+    (e: ChangeEvent<HTMLInputElement>) =>
+      updateManualAddress({ [e.target.name]: e.target.value }, { updatePlace });
 
   return (
     <>
@@ -341,6 +368,21 @@ const AutocompleteAddress = ({
                 {...inputProps?.city}
               />
             </div>
+            {isWorldwide && (
+              <div className="mt16" data-testid="autocomplete-country">
+                <SearchableDropdown
+                  options={countryOptions}
+                  value={address?.country ?? null}
+                  onChange={(country) => updateManualAddress({ country })}
+                  searchable
+                  bordered
+                  showChevron
+                  groupName="autocomplete-country"
+                  triggerPlaceholder={placeholders?.country || 'Country'}
+                  placeholder={placeholders?.countrySearch || 'Search country'}
+                />
+              </div>
+            )}
           </>
         )}
       </div>

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '../../../../../util/testUtils';
+import { ButtonCell } from './ButtonCell';
+
+describe('ButtonCell', () => {
+  it('exposes its test id on the button so clicking it selects the cell', async () => {
+    const onClick = jest.fn();
+    const { user } = render(
+      <ButtonCell
+        buttonCaption="Extended"
+        price="€9.34/mo"
+        onClick={onClick}
+        dataTestId="plan-table-EXTENDED"
+      />
+    );
+
+    const button = screen.getByTestId('plan-table-EXTENDED');
+    await user.click(button);
+
+    expect(button.tagName).toBe('BUTTON');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx

@@ -30,7 +30,6 @@ export const ButtonCell = ({
         styles.wrapper,
         className,
       )}
-      data-testid={dataTestId}
     >
       <button
         className={classNames('w100 wmx5', styles.buttonCell, {
@@ -40,6 +39,7 @@ export const ButtonCell = ({
         type="button"
         onClick={onClick}
         disabled={disabled}
+        data-testid={dataTestId}
       >
         <div className="d-flex fd-column ai-start">
           <span className="p-p fw-bold">{buttonCaption}</span>