Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@paypal/checkout-components
Advanced tools
@paypal/checkout-components - npm Package Compare versions
Comparing version 5.0.311 to 5.0.312-alpha-cfcd972.0
| { | ||
| "name": "@paypal/checkout-components", | ||
| "version": "5.0.311", | ||
| "version": "5.0.312-alpha-cfcd972.0", | ||
| "description": "PayPal Checkout components, for integrating checkout products.", | ||
@@ -122,4 +122,4 @@ "main": "index.js", | ||
| "lint-staged": { | ||
| "**/{src,test,scripts}/**/*.{js,jsx,json,sh}": "prettier --write" | ||
| "**/*": "prettier --write --ignore-unknown" | ||
| } | ||
| } |
@@ -58,2 +58,10 @@ /* @flow */ | ||
| }, | ||
| { | ||
| name: "tagline", | ||
| value: "true", | ||
| }, | ||
| { | ||
| name: "height", | ||
| value: "40", | ||
| }, | ||
| ], | ||
@@ -82,2 +90,3 @@ }, | ||
| hostedButtonId: "B1234567890", | ||
| style: expect.objectContaining({ tagline: true }), | ||
| }) | ||
@@ -155,3 +164,63 @@ ); | ||
| }); | ||
| test("tagline is rendered based on hosted button response", async () => { | ||
| const renderMock = vi.fn(); | ||
| const Buttons = vi.fn(() => ({ | ||
| render: renderMock, | ||
| isEligible: vi.fn(() => false), | ||
| })); | ||
| // $FlowIssue | ||
| getButtonsComponent.mockImplementationOnce(() => Buttons); | ||
| const HostedButtons = getHostedButtonsComponent(); | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve({ | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "shape", | ||
| value: "rect", | ||
| }, | ||
| { | ||
| name: "layout", | ||
| value: "vertical", | ||
| }, | ||
| { | ||
| name: "color", | ||
| value: "gold", | ||
| }, | ||
| { | ||
| name: "button_text", | ||
| value: "paypal", | ||
| }, | ||
| { | ||
| name: "button_type", | ||
| value: "FIXED_PRICE", | ||
| }, | ||
| { | ||
| name: "tagline", | ||
| value: "false", | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }) | ||
| ); | ||
| await HostedButtons({ | ||
| hostedButtonId: "B1234567890", | ||
| }).render("#example"); | ||
| expect(Buttons).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| hostedButtonId: "B1234567890", | ||
| style: expect.objectContaining({ tagline: false }), | ||
| }) | ||
| ); | ||
| expect(Buttons).toHaveBeenCalledTimes(1); | ||
| expect(renderMock).toHaveBeenCalledTimes(1); | ||
| expect.assertions(3); | ||
| }); | ||
| }); | ||
| /* eslint-enable no-restricted-globals, promise/no-native */ |
@@ -24,3 +24,3 @@ /* @flow */ | ||
| hostedButtonId: string, | ||
| fundingSources: $ReadOnlyArray<FundingSources>, | ||
| fundingSources?: $ReadOnlyArray<FundingSources>, | ||
| |}; | ||
@@ -38,2 +38,9 @@ | ||
| export type EligibleHostedButtons = "paypal" | "venmo" | "paylater"; | ||
| export type HostedButtonPreferences = {| | ||
| buttonPreferences: $ReadOnlyArray<EligibleHostedButtons & "default">, | ||
| eligibleFundingMethods: $ReadOnlyArray<EligibleHostedButtons>, | ||
| |}; | ||
| export type HostedButtonDetailsParams = | ||
@@ -48,3 +55,8 @@ (HostedButtonsComponentProps) => Promise<{| | ||
| label: string, | ||
| height: ?number, | ||
| tagline: boolean, | ||
| |}, | ||
| version: ?string, | ||
| buttonContainerId: ?string, | ||
| preferences?: HostedButtonPreferences, | ||
| |}>; | ||
@@ -51,0 +63,0 @@ |
@@ -93,3 +93,4 @@ /* @flow */ | ||
| const { body } = response; | ||
| const variables = body.button_details.link_variables; | ||
| const { link_variables: variables, preferences } = body.button_details; | ||
| return { | ||
@@ -101,5 +102,15 @@ style: { | ||
| label: getButtonVariable(variables, "button_text"), | ||
| tagline: getButtonVariable(variables, "tagline") === "true", | ||
| height: parseInt(getButtonVariable(variables, "height"), 10) || undefined, | ||
| }, | ||
| version: body.version, | ||
| buttonContainerId: body.button_container_id, | ||
| html: body.html, | ||
| htmlScript: body.html_script, | ||
| ...(preferences && { | ||
| preferences: { | ||
| buttonPreferences: preferences.button_preferences, | ||
| eligibleFundingMethods: preferences.eligible_funding_methods, | ||
| }, | ||
| }), | ||
| }; | ||
@@ -106,0 +117,0 @@ }; |
@@ -40,31 +40,2 @@ /* @flow */ | ||
| const getHostedButtonDetailsResponse = { | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "business", | ||
| value: merchantId, | ||
| }, | ||
| { | ||
| name: "shape", | ||
| value: "rect", | ||
| }, | ||
| { | ||
| name: "layout", | ||
| value: "vertical", | ||
| }, | ||
| { | ||
| name: "color", | ||
| value: "gold", | ||
| }, | ||
| { | ||
| name: "button_text", | ||
| value: "paypal", | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
| const mockCreateAccessTokenRequest = () => | ||
@@ -78,20 +49,241 @@ // eslint-disable-next-line compat/compat | ||
| test("getHostedButtonDetails", async () => { | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve(getHostedButtonDetailsResponse) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| fundingSources: [], | ||
| }).then(({ style }) => { | ||
| expect(style).toEqual({ | ||
| layout: "vertical", | ||
| shape: "rect", | ||
| color: "gold", | ||
| label: "paypal", | ||
| describe("getHostedButtonDetails", () => { | ||
| const getHostedButtonDetailsResponse = { | ||
| v1: { | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "business", | ||
| value: merchantId, | ||
| }, | ||
| { | ||
| name: "shape", | ||
| value: "rect", | ||
| }, | ||
| { | ||
| name: "layout", | ||
| value: "vertical", | ||
| }, | ||
| { | ||
| name: "color", | ||
| value: "gold", | ||
| }, | ||
| { | ||
| name: "button_text", | ||
| value: "paypal", | ||
| }, | ||
| { | ||
| name: "tagline", | ||
| value: "true", | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }, | ||
| v2: { | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "height", | ||
| value: "50", | ||
| }, | ||
| { | ||
| name: "tagline", | ||
| value: "true", | ||
| }, | ||
| ], | ||
| preferences: { | ||
| button_preferences: ["paypal", "paylater"], | ||
| eligible_funding_methods: ["paypal", "venmo", "paylater"], | ||
| }, | ||
| }, | ||
| version: "2", | ||
| }, | ||
| }, | ||
| }; | ||
| test("version 1", async () => { | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve(getHostedButtonDetailsResponse.v1) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| fundingSources: [], | ||
| }).then(({ style }) => { | ||
| expect(style).toEqual({ | ||
| layout: "vertical", | ||
| shape: "rect", | ||
| color: "gold", | ||
| label: "paypal", | ||
| tagline: true, | ||
| }); | ||
| }); | ||
| expect.assertions(1); | ||
| }); | ||
| expect.assertions(1); | ||
| test("version 2", async () => { | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve(getHostedButtonDetailsResponse.v2) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| fundingSources: [], | ||
| }).then(({ style, preferences, version }) => { | ||
| expect(style.height).toEqual(50); | ||
| expect(style.tagline).toEqual(true); | ||
| expect(preferences).toEqual({ | ||
| buttonPreferences: ["paypal", "paylater"], | ||
| eligibleFundingMethods: ["paypal", "venmo", "paylater"], | ||
| }); | ||
| expect(version).toEqual("2"); | ||
| }); | ||
| expect.assertions(4); | ||
| }); | ||
| test("handles false tagline values", async () => { | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve({ | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "business", | ||
| value: merchantId, | ||
| }, | ||
| { | ||
| name: "layout", | ||
| value: "horizontal", | ||
| }, | ||
| { | ||
| name: "tagline", | ||
| value: "false", | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| }).then(({ style }) => { | ||
| expect(style).toEqual( | ||
| expect.objectContaining({ | ||
| tagline: false, | ||
| }) | ||
| ); | ||
| }); | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve({ | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "height", | ||
| value: 50, | ||
| }, | ||
| { | ||
| name: "tagline", | ||
| value: "false", | ||
| }, | ||
| ], | ||
| preferences: { | ||
| button_preferences: ["paypal", "paylater"], | ||
| eligible_funding_methods: ["paypal", "venmo", "paylater"], | ||
| }, | ||
| }, | ||
| version: "2", | ||
| }, | ||
| }) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| }).then(({ style, preferences, version }) => { | ||
| expect(style.height).toEqual(50); | ||
| expect(style.tagline).toEqual(false); | ||
| expect(preferences).toEqual({ | ||
| buttonPreferences: ["paypal", "paylater"], | ||
| eligibleFundingMethods: ["paypal", "venmo", "paylater"], | ||
| }); | ||
| expect(version).toEqual("2"); | ||
| }); | ||
| expect.assertions(5); | ||
| }); | ||
| test("handles undefined tagline values", async () => { | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve({ | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "business", | ||
| value: merchantId, | ||
| }, | ||
| { | ||
| name: "layout", | ||
| value: "horizontal", | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| }).then(({ style }) => { | ||
| expect(style).toEqual( | ||
| expect.objectContaining({ | ||
| tagline: false, | ||
| }) | ||
| ); | ||
| }); | ||
| // $FlowIssue | ||
| request.mockImplementationOnce(() => | ||
| // eslint-disable-next-line compat/compat | ||
| Promise.resolve({ | ||
| body: { | ||
| button_details: { | ||
| link_variables: [ | ||
| { | ||
| name: "height", | ||
| value: 50, | ||
| }, | ||
| ], | ||
| preferences: { | ||
| button_preferences: ["paypal", "paylater"], | ||
| eligible_funding_methods: ["paypal", "venmo", "paylater"], | ||
| }, | ||
| }, | ||
| version: "2", | ||
| }, | ||
| }) | ||
| ); | ||
| await getHostedButtonDetails({ | ||
| hostedButtonId, | ||
| }).then(({ style, preferences, version }) => { | ||
| expect(style.height).toEqual(50); | ||
| expect(style.tagline).toEqual(false); | ||
| expect(preferences).toEqual({ | ||
| buttonPreferences: ["paypal", "paylater"], | ||
| eligibleFundingMethods: ["paypal", "venmo", "paylater"], | ||
| }); | ||
| expect(version).toEqual("2"); | ||
| }); | ||
| expect.assertions(5); | ||
| }); | ||
| }); | ||
@@ -98,0 +290,0 @@ |
@@ -327,2 +327,3 @@ /* eslint-disable eslint-comments/disable-enable-pair */ | ||
| disableMaxWidth?: boolean, | ||
| disableMaxHeight?: boolean, | ||
| borderRadius?: number, | ||
@@ -340,2 +341,3 @@ |}; | ||
| disableMaxWidth?: boolean | void, | ||
| disableMaxHeight?: boolean | void, | ||
| borderRadius?: number | void, | ||
@@ -651,2 +653,3 @@ |}; | ||
| disableMaxWidth, | ||
| disableMaxHeight, | ||
| borderRadius, | ||
@@ -700,2 +703,8 @@ } = style; | ||
| if (disableMaxHeight === true) { | ||
| throw new TypeError( | ||
| `Unexpected style.height for style.disableMaxHeight: got: ${height}, expected undefined.` | ||
| ); | ||
| } | ||
| if (height < minHeight || height > maxHeight) { | ||
@@ -708,2 +717,26 @@ throw new Error( | ||
| if (disableMaxHeight !== undefined) { | ||
| if (typeof disableMaxHeight !== "boolean") { | ||
| throw new TypeError( | ||
| `Expected style.disableMaxHeight to be a boolean, got: ${disableMaxHeight}` | ||
| ); | ||
| } | ||
| const disableMaxHeightInvalidFundingSources = [FUNDING.CARD, undefined]; | ||
| const disableMaxHeightValidFundingSources = [ | ||
| FUNDING.PAYPAL, | ||
| FUNDING.VENMO, | ||
| FUNDING.PAYLATER, | ||
| FUNDING.CREDIT, | ||
| ]; | ||
| if (disableMaxHeightInvalidFundingSources.includes(fundingSource)) { | ||
| throw new TypeError( | ||
| `Unexpected fundingSource for style.disableMaxHeight: got: ${ | ||
| fundingSource ? fundingSource : "Smart Stack" | ||
| }, expected ${disableMaxHeightValidFundingSources.join(", ")}.` | ||
| ); | ||
| } | ||
| } | ||
| if (borderRadius !== undefined) { | ||
@@ -741,2 +774,3 @@ if (!isBorderRadiusNumber(borderRadius)) { | ||
| disableMaxWidth, | ||
| disableMaxHeight, | ||
| borderRadius, | ||
@@ -743,0 +777,0 @@ }; |
@@ -21,3 +21,3 @@ /* @flow */ | ||
| }: StyleProps): ElementNode { | ||
| const { height, disableMaxWidth, borderRadius } = style; | ||
| const { height, disableMaxWidth, disableMaxHeight, borderRadius } = style; | ||
| const css = componentStyle({ | ||
@@ -27,2 +27,3 @@ height, | ||
| disableMaxWidth, | ||
| disableMaxHeight, | ||
| borderRadius, | ||
@@ -29,0 +30,0 @@ }); |
@@ -15,2 +15,3 @@ /* @flow */ | ||
| disableMaxWidth, | ||
| disableMaxHeight, | ||
| borderRadius, | ||
@@ -21,2 +22,3 @@ }: {| | ||
| disableMaxWidth?: ?boolean, | ||
| disableMaxHeight?: ?boolean, | ||
| borderRadius?: ?number, | ||
@@ -33,2 +35,3 @@ |}): string { | ||
| disableMaxWidth, | ||
| disableMaxHeight, | ||
| borderRadius, | ||
@@ -35,0 +38,0 @@ })} |
@@ -29,2 +29,3 @@ /* @flow */ | ||
| disableMaxWidth, | ||
| disableMaxHeight, | ||
| borderRadius, | ||
@@ -35,2 +36,3 @@ }: {| | ||
| disableMaxWidth?: ?boolean, | ||
| disableMaxHeight?: ?boolean, | ||
| borderRadius?: ?number, | ||
@@ -41,2 +43,3 @@ |}): string { | ||
| const style = BUTTON_SIZE_STYLE[size]; | ||
| const buttonHeight = height || style.defaultHeight; | ||
@@ -73,2 +76,3 @@ const minDualWidth = Math.max( | ||
| ${disableMaxWidth ? "" : `max-width: ${style.maxWidth}px;`}; | ||
| ${disableMaxHeight ? "height: 100%;" : ""}; | ||
| } | ||
@@ -89,6 +93,14 @@ | ||
| .${CLASS.BUTTON_ROW} { | ||
| height: ${buttonHeight}px; | ||
| height: ${disableMaxHeight ? "100%" : `${buttonHeight}px`}; | ||
| vertical-align: top; | ||
| min-height: ${height || style.minHeight}px; | ||
| max-height: ${height || style.maxHeight}px; | ||
| ${ | ||
| disableMaxHeight | ||
| ? "" | ||
| : ` min-height: ${height || style.minHeight}px;` | ||
| }; | ||
| ${ | ||
| disableMaxHeight | ||
| ? "" | ||
| : `max-height: ${height || style.maxHeight}px;` | ||
| } | ||
| } | ||
@@ -95,0 +107,0 @@ |
@@ -66,7 +66,13 @@ /* @flow */ | ||
| const { style, nonce } = props; | ||
| const { label, layout, height: buttonHeight, menuPlacement } = style; | ||
| const { | ||
| label, | ||
| layout, | ||
| height: buttonHeight, | ||
| menuPlacement, | ||
| disableMaxHeight, | ||
| } = style; | ||
| let minimumSize = MINIMUM_SIZE[layout]; | ||
| if (buttonHeight) { | ||
| if (buttonHeight && !disableMaxHeight) { | ||
| const possibleSizes = values(BUTTON_SIZE).filter((possibleSize) => { | ||
@@ -101,4 +107,5 @@ return ( | ||
| } | ||
| if (typeof newHeight === "number") { | ||
| if (disableMaxHeight) { | ||
| el.style.height = "100%"; | ||
| } else if (typeof newHeight === "number") { | ||
| el.style.height = toCSS(newHeight); | ||
@@ -105,0 +112,0 @@ } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.92%
1178418
- Lines of code
- increased by2.11%
15748
Worsened metrics
- Number of low quality alerts
- increased byInfinity%
1
No dependency changes