feat(payment): PAYPAL-968 added banner widgets to page builder

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Added settings for payment banners. [#2021](https://github.com/bigcommerce/cornerstone/pull/2021)
 - Use https:// for schema markup. [#2039](https://github.com/bigcommerce/cornerstone/pull/2039)
 - Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047)
 - Apple pay button displaying needs to be fixed. [#2043](https://github.com/bigcommerce/cornerstone/pull/2043)

config.json

@@ -331,6 +331,13 @@
     "paymentbuttons-paypal-label": "checkout",
     "paymentbuttons-paypal-tagline": false,
     "paymentbuttons-paypal-fundingicons": false,
+    "paymentbanners-homepage-color": "white",
+    "paymentbanners-homepage-ratio": "8x1",
+    "paymentbanners-cartpage-text-color": "black",
+    "paymentbanners-cartpage-logo-position": "left",
+    "paymentbanners-cartpage-logo-type": "primary",
+    "paymentbanners-proddetailspage-color": "white",
+    "paymentbanners-proddetailspage-ratio": "8x1",
     "supported_card_type_icons": [
       "american_express",
       "diners",

schema.json

@@ -3032,5 +3032,199 @@
         ]
       }
     ]
+  },
+  {
+    "name": "i18n.PaymentBanners",
+    "enable": "paymentBanners",
+    "settings": [
+      {
+        "type": "paragraph",
+        "content": "i18n.BannersMessaging"
+      },
+      {
+        "type": "heading",
+        "content": "i18n.ProductPageBanner"
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerStyleColor",
+        "id": "paymentbanners-proddetailspage-color",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "blue",
+            "label": "i18n.Blue"
+          },
+          {
+            "value": "black",
+            "label": "i18n.Black"
+          },
+          {
+            "value": "white",
+            "label": "i18n.White"
+          },
+          {
+            "value": "white-no-border",
+            "label": "i18n.White-no-border"
+          },
+          {
+            "value": "gray",
+            "label": "i18n.gray"
+          },
+          {
+            "value": "monochrome",
+            "label": "i18n.monochrome"
+          },
+          {
+            "value": "grayscale",
+            "label": "i18n.grayscale"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerStyleRatio",
+        "id": "paymentbanners-proddetailspage-ratio",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "8x1",
+            "label": "i18n.8x1"
+          },
+          {
+            "value": "20x1",
+            "label": "i18n.20x1"
+          }
+        ]
+      },
+      {
+        "type": "heading",
+        "content": "i18n.HomePageBanner"
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerStyleColor",
+        "id": "paymentbanners-homepage-color",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "blue",
+            "label": "i18n.Blue"
+          },
+          {
+            "value": "black",
+            "label": "i18n.Black"
+          },
+          {
+            "value": "white",
+            "label": "i18n.White"
+          },
+          {
+            "value": "white-no-border",
+            "label": "i18n.White-no-border"
+          },
+          {
+            "value": "gray",
+            "label": "i18n.gray"
+          },
+          {
+            "value": "monochrome",
+            "label": "i18n.monochrome"
+          },
+          {
+            "value": "grayscale",
+            "label": "i18n.grayscale"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerStyleRatio",
+        "id": "paymentbanners-homepage-ratio",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "8x1",
+            "label": "i18n.8x1"
+          },
+          {
+            "value": "20x1",
+            "label": "i18n.20x1"
+          }
+        ]
+      },
+      {
+        "type": "heading",
+        "content": "i18n.CartPageBanner"
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerTextStyleColor",
+        "id": "paymentbanners-cartpage-text-color",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "black",
+            "label": "i18n.Black"
+          },
+          {
+            "value": "white",
+            "label": "i18n.White"
+          },
+          {
+            "value": "monochrome",
+            "label": "i18n.monochrome"
+          },
+          {
+            "value": "grayscale",
+            "label": "i18n.grayscale"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerStyleLogoPosition",
+        "id": "paymentbanners-cartpage-logo-position",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "left",
+            "label": "i18n.left"
+          },
+          {
+            "value": "right",
+            "label": "i18n.right"
+          },
+          {
+            "value": "top",
+            "label": "i18n.top"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "i18n.BannerStyleLogoType",
+        "id": "paymentbanners-cartpage-logo-type",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "inline",
+            "label": "i18n.inline"
+          },
+          {
+            "value": "primary",
+            "label": "i18n.primary"
+          },
+          {
+            "value": "alternative",
+            "label": "i18n.alternative"
+          },
+          {
+            "value": "none",
+            "label": "i18n.none"
+          }
+        ]
+      }
+    ]
   }
 ]

schemaTranslations.json

@@ -2019,5 +2019,74 @@
   },
   "i18n.CheckoutPayPalButton": {
     "default": "Checkout PayPal Button"
+  },
+  "i18n.ProductPageBanner": {
+    "default": "Product page banner"
+  },
+  "i18n.BannerStyleColor": {
+    "default": "Banner style color"
+  },
+  "i18n.White-no-border": {
+    "default": "White no border"
+  },
+  "i18n.gray": {
+    "default": "Gray"
+  },
+  "i18n.monochrome": {
+    "default": "Monochrome"
+  },
+  "i18n.grayscale": {
+    "default": "Grayscale"
+  },
+  "i18n.BannerStyleRatio": {
+    "default": "Banner style ratio"
+  },
+  "i18n.8x1": {
+    "default": "8x1"
+  },
+  "i18n.20x1": {
+    "default": "20x1"
+  },
+  "i18n.HomePageBanner": {
+    "default": "Home page banner"
+  },
+  "i18n.BannerTextStyleColor": {
+    "default": "Banner text style color"
+  },
+  "i18n.BannerStyleLogoPosition": {
+    "default": "Banner style logo position"
+  },
+  "i18n.left": {
+    "default": "Left"
+  },
+  "i18n.right": {
+    "default": "Right"
+  },
+  "i18n.top": {
+    "default": "Top"
+  },
+  "i18n.BannerStyleLogoType": {
+    "default": "Banner style logo type"
+  },
+  "i18n.inline": {
+    "default": "Inline"
+  },
+  "i18n.alternative": {
+    "default": "Alternative"
+  },
+  "i18n.none": {
+    "default": "None"
+  },
+  "i18n.PaymentBanners": {
+    "default": "Payment Banners"
+  },
+  "i18n.CartPageBanner": {
+    "default": "Cart page banner"
+  },
+  "i18n.primary": {
+    "default": "Primary"
+  },
+  "i18n.BannersMessaging": {
+    "default": "Please note that in order for the changes to apply, you need navigate to the PayPal Settings in BC Control Panel, disable an appropriate messaging banner(s), click \"Save\" button, enable the banner again and click \"Save\" button again"
   }
 }