Generate barCode URLs against the new endpoint

.changeset/clever-pants-cover.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+A new barcode endpoint has been created on the backend. This PR generates barCode URLs against that endpoint.

packages/lib/src/components/Boleto/components/BoletoVoucherResult/BoletoVoucherResult.tsx

@@ -12,7 +12,7 @@ const BoletoVoucherResult = props => {
     const getImage = useImage();
     const { reference, expiresAt, downloadUrl } = props;
     const barcodeReference = reference.replace(/[^\d]/g, '').replace(/^(\d{4})(\d{5})\d{1}(\d{10})\d{1}(\d{10})\d{1}(\d{15})$/, '$1$5$2$3$4');
-    const barcodeUrl = `${loadingContext}barcode.shtml?data=${barcodeReference}&barcodeType=BT_Int2of5A&fileType=png`;
+    const barcodeUrl = `${loadingContext}utility/v1/barcode.png?data=${barcodeReference}&type=itf&clientKey=${props.clientKey}`;
 
     const paymentMethodType = 'boletobancario'; // overwrite the bank specific type of boleto, e.g. 'boletobancario_santander', to a more generic form
 

packages/lib/src/components/Oxxo/components/OxxoVoucherResult/OxxoVoucherResult.tsx

@@ -13,7 +13,8 @@ const OxxoVoucherResult = (props: OxxoVoucherResultProps) => {
     const getImage = useImage();
     const { alternativeReference, reference, expiresAt, merchantReference, downloadUrl } = props;
 
-    const barcodeUrl = `${loadingContext}barcode.shtml?data=${reference}&barcodeType=BT_Code128C&fileType=png`;
+    const barcodeUrl = `${loadingContext}utility/v1/barcode.png?data=${reference}&type=code128c&clientKey=${props.clientKey}`;
+
     const voucherDetails: VoucherDetail[] = [
         ...(expiresAt
             ? [

packages/lib/src/components/Oxxo/types.ts

@@ -10,4 +10,5 @@ export interface OxxoVoucherResultProps {
     downloadUrl?: string;
     ref?: any;
     onActionHandled?: (rtnObj: ActionHandledReturnObject) => void;
+    clientKey?: string;
 }

packages/lib/src/components/internal/QRLoader/QRLoader.tsx

@@ -18,7 +18,7 @@ import useAutoFocus from '../../../utils/useAutoFocus';
 import { ANALYTICS_DOWNLOAD_STR, ANALYTICS_QR_CODE_DOWNLOAD } from '../../../core/Analytics/constants';
 import { PREFIX } from '../Icon/constants';
 
-const QRCODE_URL = 'barcode.shtml?barcodeType=qrCode&fileType=png&data=';
+const QRCODE_URL = 'utility/v1/barcode.png?type=qrCode&data=';
 
 class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
     private timeoutId;
@@ -153,7 +153,11 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
     render({ amount, url, brandLogo, brandName, countdownTime, type, onActionHandled }: QRLoaderProps, { expired, completed, loading }) {
         const { i18n, loadingContext } = useCoreContext();
         const getImage = useImage();
-        const qrCodeImage = this.props.qrCodeData ? `${loadingContext}${QRCODE_URL}${this.props.qrCodeData}` : this.props.qrCodeImage;
+
+        const qrCodeImage = this.props.qrCodeData
+            ? `${loadingContext}${QRCODE_URL}${this.props.qrCodeData}&clientKey=${this.props.clientKey}`
+            : this.props.qrCodeImage;
+
         const finalState = (image, message) => {
             const status = i18n.get(message);
             useA11yReporter(status);

packages/lib/src/core/Analytics/Analytics.utils.test.ts

@@ -685,8 +685,7 @@ describe('Testing creating a configData object for the Card components', () => {
     /**
      * 31. showPayButton
      */
-    // TODO - skip until endpoint can accept more entries in the configData object (current limit: 32);
-    describe.skip('Testing showPayButton', () => {
+    describe('Testing showPayButton', () => {
         const ANALYTICS_DATA_PROP = 'showPayButton';
         const CARD_CONFIG_PROP = ANALYTICS_DATA_PROP;
 
@@ -709,8 +708,7 @@ describe('Testing creating a configData object for the Card components', () => {
     /**
      * 32. socialSecurityNumberMode
      */
-    // TODO - skip until endpoint can accept more entries in the configData object (current limit: 32);
-    describe.skip('Testing socialSecurityNumberMode', () => {
+    describe('Testing socialSecurityNumberMode', () => {
         const ANALYTICS_DATA_PROP = 'socialSecurityNumberMode';
 
         const configuration: any = { socialSecurityNumberMode: 'show' };