fix: handle tagline field on ncps hosted buttons (#2384)

paypal · May 2, 2024 · 4a46749 · 4a46749
1 parent fd0b814
commit 4a46749
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 2 deletions.
diff --git a/src/hosted-buttons/index.test.js b/src/hosted-buttons/index.test.js
@@ -55,6 +55,10 @@ const getHostedButtonDetailsResponse = {
  name: "button_type",
  value: "FIXED_PRICE",
  },
+ {
+ name: "tagline",
+ value: "true",
+ },
  {
  name: "height",
  value: "40",
@@ -82,6 +86,7 @@ describe("HostedButtons", () => {
  expect(Buttons).toHaveBeenCalledWith(
  expect.objectContaining({
  hostedButtonId: "B1234567890",
+ style: expect.objectContaining({ tagline: true }),
  })
  );
  expect(Buttons).toHaveBeenCalledTimes(1);
@@ -154,5 +159,65 @@ describe("HostedButtons", () => {
  expect(renderMock).toHaveBeenCalledTimes(0);
  expect.assertions(3);
  });
+
+ 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 */
diff --git a/src/hosted-buttons/types.js b/src/hosted-buttons/types.js
@@ -21,7 +21,7 @@ export interface BuildButtonContainerArgs {
 
 export type HostedButtonsComponentProps = {|
  hostedButtonId: string,
- fundingSources: $ReadOnlyArray<FundingSources>,
+ fundingSources?: $ReadOnlyArray<FundingSources>,
 |};
 
 export type GetCallbackProps = {|
@@ -51,6 +51,7 @@ export type HostedButtonDetailsParams =
  color: string,
  label: string,
  height: ?number,
+ tagline: boolean,
  |},
  version: ?string,
  buttonContainerId: ?string,

diff --git a/src/hosted-buttons/utils.js b/src/hosted-buttons/utils.js
@@ -98,6 +98,7 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
  shape: getButtonVariable(variables, "shape"),
  color: getButtonVariable(variables, "color"),
  label: getButtonVariable(variables, "button_text"),
+ tagline: getButtonVariable(variables, "tagline") === "true",
  height: parseInt(getButtonVariable(variables, "height"), 10) || undefined,
  },
  version: body.version,

diff --git a/src/hosted-buttons/utils.test.js b/src/hosted-buttons/utils.test.js
@@ -71,6 +71,10 @@ describe("getHostedButtonDetails", () => {
  name: "button_text",
  value: "paypal",
  },
+ {
+ name: "tagline",
+ value: "true",
+ },
  ],
  },
  },
@@ -84,6 +88,10 @@ describe("getHostedButtonDetails", () => {
  name: "height",
  value: "50",
  },
+ {
+ name: "tagline",
+ value: "true",
+ },
  ],
  preferences: {
  button_preferences: ["paypal", "paylater"],
@@ -110,6 +118,7 @@ describe("getHostedButtonDetails", () => {
  shape: "rect",
  color: "gold",
  label: "paypal",
+ tagline: true,
  });
  });
  expect.assertions(1);
@@ -126,13 +135,154 @@ describe("getHostedButtonDetails", () => {
  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(3);
+ expect.assertions(5);
  });
 });