feat: add prop to enable animations

gr4vy · Oct 18, 2023 · 9b48fee · 9b48fee
1 parent f3fa983
commit 9b48fee
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 1 deletion.
diff --git a/apps/example-cdn/index.test.ts b/apps/example-cdn/index.test.ts
@@ -60,7 +60,7 @@ test('embed is able to load on the page', async ({ page }) => {
   // assert
   const iframe = page.frameLocator('iframe').locator('body')
   await expect(await iframe.innerText()).toBe(
-    '{"amount":1299,"currency":"USD","apiHost":"api.demo.gr4vy.app","gr4vyId":"demo","token":"123456","store":"ask","country":"US","display":"all","apiUrl":"https://api.demo.gr4vy.app","requireSecurityCode":false,"showDeleteButton":false,"supportedApplePayVersion":0,"supportedGooglePayVersion":1,"hasBeforeTransaction":false}'
+    '{"amount":1299,"currency":"USD","apiHost":"api.demo.gr4vy.app","gr4vyId":"demo","token":"123456","store":"ask","country":"US","display":"all","apiUrl":"https://api.demo.gr4vy.app","requireSecurityCode":false,"showDeleteButton":false,"enableAnimations":false,"supportedApplePayVersion":0,"supportedGooglePayVersion":1,"hasBeforeTransaction":false}'
   )
   await expect(await page.locator('.gr4vy__skeleton')).not.toBeVisible()
   await expect(await (await page.locator('iframe').boundingBox()).height).toBe(

diff --git a/packages/embed/README.md b/packages/embed/README.md
@@ -97,6 +97,7 @@ The options for this integration are as follows.
 | `merchantAccountId`       | `default`    | An optional merchant account ID.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `billingAddressFields`    | `Object`     | An optional object with billing details requirements. <br /> All properties are optional. Example: `{ address: { houseNumberOrName: true, line1: true, city: true, postalCode: true, state: true, country: true }, emailAddress: true, firstName: true, lastName: true, taxId: true }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | `antiFraudFingerprint`    | `string`     | An optional string to use as the device fingerprint. Leave unset to opt-in to Gr4vy's automatic anti-fraud functionality.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `enableAnimations`        | `false`      | An optional boolean to turn on animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
 ### Theming
 

diff --git a/packages/embed/src/create-config.test.ts b/packages/embed/src/create-config.test.ts
@@ -53,6 +53,7 @@ test('default configuration', () => {
     currency: 'GBP',
     display: 'all',
     element: mockElement,
+    enableAnimations: false,
     form: mockForm,
     iframeHost: 'embed.test.gr4vy.app',
     iframeUrl: `https://embed.test.gr4vy.app`,

diff --git a/packages/embed/src/create-config.ts b/packages/embed/src/create-config.ts
@@ -24,6 +24,7 @@ export const createConfig = (setupConfig: SetupConfig) => {
     : setupConfig.element
 
   return {
+    enableAnimations: false,
     requireSecurityCode: false,
     showDeleteButton: false,
     store: 'ask',

diff --git a/packages/embed/src/index.ts b/packages/embed/src/index.ts
@@ -56,6 +56,7 @@ export const optionKeys = [
   'merchantAccountId',
   'billingAddressFields',
   'antiFraudFingerprint',
+  'enableAnimations',
 ]
 
 // Map of cleanup callbacks

diff --git a/packages/embed/src/types.ts b/packages/embed/src/types.ts
@@ -50,6 +50,7 @@ export type Config = {
   merchantAccountId?: string
   billingAddressFields?: BillingAddressFields
   antiFraudFingerprint?: string
+  enableAnimations?: boolean
 }
 
 export type BillingAddressFields = {