diff --git a/.changeset/long-taxis-drop.md b/.changeset/long-taxis-drop.md
new file mode 100644
index 0000000000..e7245495e5
--- /dev/null
+++ b/.changeset/long-taxis-drop.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+fixes bug where storedetails had state value of true by default without visually showing it
diff --git a/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx b/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx
index 4eaea89e83..7b4c42a85c 100644
--- a/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx
+++ b/packages/lib/src/components/internal/StoreDetails/StoreDetails.test.tsx
@@ -5,25 +5,42 @@ import StoreDetails from './StoreDetails';
test('StoredDetails defaults to false, toggles to true', async () => {
const user = userEvent.setup();
+ let value;
- const onChangeMock = jest.fn();
+ const onChangeMock = jest.fn(event => (value = event));
render();
const checkbox = await screen.findByRole('checkbox');
+ // check for the checked status in the DOM
expect(checkbox).not.toBeChecked();
+ // also check for the emitted value from onChange
+ expect(value).toBe(false);
await user.click(checkbox);
expect(checkbox).toBeChecked();
+ expect(value).toBe(true);
});
test('StoredDetails storeDetails prop true does nothing LEGACY TEST', async () => {
// I wanted to capture this buggy feature,
const user = userEvent.setup();
+ let value;
- const onChangeMock = jest.fn();
+ const onChangeMock = jest.fn(event => (value = event));
render();
const checkbox = await screen.findByRole('checkbox');
+ // buggy behaviour should be fixed, but we improve test coverage before that
+ // the checkbox will not be visibly "checked"
expect(checkbox).not.toBeChecked();
+ // correct behaviour
+ expect(value).toBe(true);
await user.click(checkbox);
expect(checkbox).toBeChecked();
+ // it will emit "true" again because it will start reading the DOM
+ expect(value).toBe(true);
+
+ await user.click(checkbox);
+ // now it's all correct
+ expect(checkbox).not.toBeChecked();
+ expect(value).toBe(false);
});
diff --git a/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx b/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx
index 067eefe4fc..421b5dc5fc 100644
--- a/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx
+++ b/packages/lib/src/components/internal/StoreDetails/StoreDetails.tsx
@@ -6,7 +6,7 @@ import Checkbox from '../FormFields/Checkbox';
/**
* "Store details" generic checkbox
*/
-function StoreDetails({ storeDetails = true, ...props }) {
+function StoreDetails({ storeDetails = false, ...props }) {
const { i18n } = useCoreContext();
const [value, setValue] = useState(storeDetails);