gatsby-matrix-theme 3.2.23 → 3.2.27

package/CHANGELOG.md

@@ -1,3 +1,59 @@
+## [3.2.27](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.26...v3.2.27) (2022-02-08)
+
+
+### Bug Fixes
+
+* added canary token script ([af5479f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/af5479fa3e9814baf9a06368a560754d10f0f49e))
+
+
+### Config
+
+* updated to latest core version ([bc48d27](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc48d277b3dba149aeeffdaff490b8715320f288))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([23020a5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/23020a5036887d5570c1958820c4de74b211a938))
+* Merge branch 'tm-2681-canary-tokens' into 'master' ([49fca6c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/49fca6ced00281ce2a4a17f93b927179fddbf8ff))
+
+## [3.2.26](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.25...v3.2.26) (2022-02-08)
+
+
+### Bug Fixes
+
+* removing unused divs ([7f5bc6d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f5bc6dcc182d025117e2005c3973f41973588f3))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([f704c0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f704c0b58a8a8e124790281ad36637454216bdde))
+
+## [3.2.25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.24...v3.2.25) (2022-02-07)
+
+
+### Bug Fixes
+
+* clean up gatsby config ([5c2f4df](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5c2f4df24fce6888fe8222084c7d7c5cd7b1f9e5))
+* fixed conflicts ([e2b84b8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e2b84b885e229e28ca9fc71c36fc728a854d5693))
+* keep open FAQ when js is blocked ([230d1db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/230d1db97e2fd99646ee63abab10473d204d1adc))
+* return 70 coverage ([b14b876](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b14b876bba8ffbfd90fa27da95b5bdb2650dde3e))
+
+
+* Merge branch 'tm-2697-Faq' into 'master' ([4615d58](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4615d5853a2ef640834bbbdfc0ba019ed2987cb6))
+
+## [3.2.24](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.23...v3.2.24) (2022-02-07)
+
+
+### Bug Fixes
+
+* add unit testing ([5555f87](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5555f87f6571b22c237a72b48c37839ec4962192))
+* added image cdn in gatsby config ([793c117](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/793c117876297a926b76f2aa263ecb7288baae0f))
+* fixed demo url ([3f6c562](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3f6c5621f0b6edc2d2b9b14393b874c8376f3cc5))
+* fixed warnings ([1801220](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1801220463d8bc52f3a1babe2fd952b45ebff591))
+* inercase coverage ([8753dd0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8753dd079ad2a75d443a26abf8508449744cc93d))
+* make style for faq ([3c0732c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3c0732c1306229b80cc2115f58e2eccc9690c470))
+
+
+* Merge branch 'tm-2695-image_cdn' into 'master' ([6f91e36](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6f91e3601b97f29d2d9bf26cec22a477b4080348))
+* Merge branch 'tm-2696-unit-testing' into 'master' ([b7c4ef8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b7c4ef882aa7a5db409c0e72069b9d303e51600f))
+* Merge branch 'tm-2696-faq-module-splits' into 'master' ([648da8b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/648da8bb2208aa91bdaa6e8a32b7ee6a29072a2c))
+
 ## [3.2.23](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.22...v3.2.23) (2022-02-02)
 
 

package/gatsby-config.js

@@ -20,8 +20,7 @@ module.exports = {
           'https://www.google-analytics.com',
           'https://www.googletagmanager.com',
           'https://gm.innocraft.cloud',
-          'https://assets-srv.s3.eu-west-1.amazonaws.com',
-          'https://d3449cb8ihm3k3.cloudfront.net',
+          process.env.IMAGE_CDN_URL,
         ],
       },
     },

package/jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   collectCoverage: true,
   coverageThreshold: {
     global: {
-      statements: 70,
+      statements: 88,
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.23",
+  "version": "3.2.27",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^2.2.6",
+    "gatsby-core-theme": "^3.0.0",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/author-card/author-card.test.js

@@ -23,6 +23,13 @@ describe('AuthorCard Component', () => {
       expect(container.querySelector('a').innerHTML).toEqual(email_address);
     });
   });
+
+  test('render empty value', () => {
+    const obj = {};
+    const { container } = render(<AuthorCard author={obj} />);
+
+    expect(container.querySelector('img')).toBeFalsy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -15,35 +15,43 @@ import styles from './table.module.scss';
 
 const listHeadings = [
   {
+    id: 1,
     defaultValue: 'Casino name',
     key: 'casino_name',
   },
   {
+    id: 2,
     defaultValue: 'Rating',
     key: 'rating',
   },
   {
+    id: 3,
     defaultValue: 'Bonus',
     key: 'bonus',
     // customComponent: ({operator}) => ( <td>{operator.title}</td> ), This is an example
   },
   {
+    id: 4,
     defaultValue: 'Top Features',
     key: 'top_features',
   },
   {
+    id: 5,
     defaultValue: 'Payment Methods',
     key: 'payment_methods',
   },
   {
+    id: 6,
     defaultValue: 'Banking',
     key: 'banking',
   },
   {
+    id: 7,
     defaultValue: 'Currencies',
     key: 'currencies',
   },
   {
+    id: 8,
     defaultValue: 'Licenses',
     key: 'licenses',
   },
@@ -60,7 +68,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
     const rowData = tabelInfo.find((m) => m.key === heading);
     if (rowData && rowData.customComponent) {
       const CustomComponent = rowData.customComponent;
-      return <CustomComponent operator={item} />;
+      return <CustomComponent key={key} operator={item} />;
     }
 
     switch (heading) {
@@ -104,7 +112,8 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
             {item?.relation?.selling_points &&
               item?.relation?.selling_points.map((sellingPoint) => (
                 <span key={sellingPoint}>
-                  <AiOutlineCheckCircle size={27} /> {sellingPoint}
+                  <AiOutlineCheckCircle size={27} />
+                  {sellingPoint}
                 </span>
               ))}
           </td>
@@ -119,7 +128,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
                   const itemsLength = list.length === 6 ? 6 : 5;
                   if (i < (showAllPayment.includes(index) ? list.length : itemsLength)) {
                     return (
-                      <span key={deposit.name}>
+                      <span key={`${key}-${deposit.name}`}>
                         <LazyImg
                           src={imagePrettyUrl(deposit?.logo_filename)}
                           width={72}
@@ -166,7 +175,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
             {item?.relation?.bonus?.currencies &&
               item?.relation?.bonus?.currencies.slice(0, 6).map((currencies) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <span key={currencies.iso_code}>{currencies.iso_code} </span>
+                <span key={`${key}-${currencies.iso_code}`}>{currencies.iso_code}</span>
               ))}
           </td>
         );
@@ -178,6 +187,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
                 .slice(0, 3)
                 .map((license) => (
                   <LazyImg
+                    key={license.name}
                     src={imagePrettyUrl(license?.logo_filename)}
                     height={32}
                     alt={license.name}
@@ -186,7 +196,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
           </td>
         );
       default:
-        return '';
+        return null;
     }
   };
 
@@ -196,11 +206,11 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
       const cells = [];
 
       items.forEach((item, index) => {
-        cells.push(cell(heading.key, item, `${heading}-${index}`, index));
+        cells.push(cell(heading.key, item, `${heading.key}-${index}`, index));
       });
 
       row.push(
-        <tr>
+        <tr key={heading.key}>
           <th>{translate(translations, heading.key, heading.defaultValue)}</th>
           {cells}
         </tr>

package/src/components/atoms/cards/comparison-table/table/table.test.js

@@ -1,21 +1,73 @@
+/* eslint-disable no-unused-expressions */
 /* eslint-disable array-callback-return */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
+import { sampleOperatorCards } from '../../../../../../tests/factories/modules/matrix/card.factory';
 
 import ComparisonTable from '.';
 
-const module = getSampleOperatorCards();
+const module = sampleOperatorCards;
 
 describe('Comparison table test component', () => {
   test('render', () => {
-    const { getByText } = render(<ComparisonTable items={module.items} />);
-
+    const { getByText, container } = render(<ComparisonTable items={module.items} />);
     module.items.map((item) => {
+      expect(container.querySelectorAll('table')).toHaveLength(1);
       expect(getByText(item.relation.name));
+
+      const paymentMethods = container.querySelector('.paymentMethods');
+      const loadMoreBtn = paymentMethods.querySelector('a');
+      // eslint-disable-next-line no-unused-expressions
+      loadMoreBtn && expect(paymentMethods.querySelectorAll('span').length).toEqual(5);
+      loadMoreBtn && fireEvent.click(loadMoreBtn);
+      loadMoreBtn && expect(paymentMethods.querySelectorAll('span').length).toBeGreaterThan(5);
     });
   });
+
+  test('render with custom component', () => {
+    const filterItems = [{ ...module.items[0] }];
+
+    const { getByText } = render(
+      <ComparisonTable
+        items={filterItems}
+        tabelInfo={[
+          {
+            defaultValue: 'Rating',
+            key: 'rating',
+          },
+          {
+            defaultValue: 'Bonus',
+            key: 'bonus',
+            customComponent: () => <td>coupon code</td>,
+          },
+        ]}
+      />
+    );
+
+    expect(getByText('coupon code')).toBeTruthy();
+  });
+
+  test('render false value', () => {
+    const filterItems = [{ ...module.items[1] }];
+    const { container } = render(
+      <ComparisonTable
+        items={filterItems}
+        tabelInfo={[
+          {
+            defaultValue: 'default',
+            key: 'default',
+          },
+          {
+            defaultValue: 'Payment Methods',
+            key: 'payment_methods',
+          },
+        ]}
+      />
+    );
+    const paymentMethods = container.querySelector('.paymentMethods');
+    expect(paymentMethods.querySelectorAll('span').length).toEqual(6);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/cards/game-card/index.js

@@ -25,15 +25,17 @@ const GameCard = ({ item, button_text = 'play_now', width, height }) => {
   return (
     <BaseCard item={item} isLinked cardType="game">
       {!featured && (
-        <div className={styles.cardBanner}>
-          <Link to={path} className="game-card-gtm" aria-label={`${title} Link`}>
-            {banner ? (
-              <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
-            ) : (
-              <GatsbyImg filename="default-slot.jpg" alt={title} />
-            )}
-          </Link>
-        </div>
+        <Link
+          to={path}
+          className={`game-card-gtm ${styles.cardBanner}`}
+          aria-label={`${title} Link`}
+        >
+          {banner ? (
+            <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
+          ) : (
+            <GatsbyImg filename="default-slot.jpg" alt={title} />
+          )}
+        </Link>
       )}
       <div className={`${styles.cardContent} ${featured && styles.featured}`}>
         <Link to={path} className="game-card-gtm">

package/src/components/atoms/social-icons/social-icons.test.js

@@ -25,6 +25,14 @@ describe('SocialIcons Component', () => {
     expect(socialLinksWrapper.querySelectorAll('a')[2].innerText).toEqual(siteSchema[2]);
     expect(socialLinksWrapper.querySelectorAll('a')[4].innerText).toEqual(siteSchema[4]);
   });
+
+  test('render null value', () => {
+    const obj = {
+      default: 'default',
+    };
+    const { container } = render(<SocialIcons socialIcons={obj} />);
+    expect(container.querySelector('svg')).toBe(null);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/molecules/carousel/screenshot-slide/screenshot-slide.test.js

@@ -22,6 +22,12 @@ describe('summary component', () => {
     // expect(container.querySelector('img')).toBeFalsy();
     // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
   });
+
+  test('render empty', () => {
+    const { container } = render(<Slide />);
+
+    expect(container.querySelector('p')).toBeFalsy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/molecules/faq/faq.module.scss

@@ -19,6 +19,7 @@
             font-weight: 700;
             padding: 1rem 0;
             outline: none;
+            padding-right: 2.5rem;
             .icon{
                 display: flex;
                 align-items: center;
@@ -61,6 +62,7 @@
 
         .content {
             @include collapse(0.5s, 500rem);
+            @include flex-direction(column);
             font-size: 1.6rem;
             color: var(--color-20);
             padding: 0;

package/src/components/molecules/faq/index.js

@@ -7,15 +7,15 @@ import keygen from '~helpers/keygen';
 
 /* eslint-disable react/no-danger */
 
-const Faq = ({ module, openAll = true, openItem, closeOthers = false, icon = '' }) => {
+const Faq = ({ module, closeAll = false, openItem, closeOthers = false, icon = '' }) => {
   const { items } = module;
   const itemRefs = useRef([]);
   const btnRefs = useRef([]);
 
-  const openAllItems = () => {
+  const closeAllItems = () => {
     for (let i = 0; i < itemRefs.current.length; i += 1) {
-      itemRefs.current[i].classList.add(styles.active);
-      btnRefs.current[i].classList.add(styles.invertArrow);
+      itemRefs.current[i].classList.remove(styles.active);
+      btnRefs.current[i].classList.remove(styles.invertArrow);
     }
   };
 
@@ -45,8 +45,8 @@ const Faq = ({ module, openAll = true, openItem, closeOthers = false, icon = ''
   };
 
   useEffect(() => {
-    if (openAll) {
-      openAllItems();
+    if (closeAll) {
+      closeAllItems();
     }
   });
   useEffect(() => {
@@ -72,7 +72,7 @@ const Faq = ({ module, openAll = true, openItem, closeOthers = false, icon = ''
               </span>
             </button>
             <div
-              className={styles.content}
+              className={`${styles.content} ${styles.active}`}
               ref={(el) => (itemRefs.current[index] = el)}
               dangerouslySetInnerHTML={{ __html: item.answer }}
             />
@@ -93,7 +93,7 @@ Faq.propTypes = {
       })
     ),
   }).isRequired,
-  openAll: PropTypes.bool,
+  closeAll: PropTypes.bool,
   openItem: PropTypes.number,
   closeOthers: PropTypes.bool,
   styles: PropTypes.shape({}),

package/src/components/molecules/header/header.test.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+// import{ getHeaderSection} from 'gatsby-core-theme/tests/factories/sections/header.factory';
+import '~tests/helpers/match-media.mock';
+import Header, { headerContent } from './index';
+
+function getHeaderSection() {
+  const header = {
+    section: {
+      page: {
+        template: 'author',
+        title: 'The Page Title',
+        path: 'sport/brand',
+        sections: {
+          header: {
+            extra_fields: {
+              header_background_image: '398f163bfd5a201716fb42aa72ae48b0.jpeg',
+              header_tesxt: '<p><i>Hello</i> I am test text</p>',
+            },
+          },
+        },
+      },
+    },
+  };
+
+  return header;
+}
+
+describe('header component', () => {
+  test('headerContent', () => {
+    const getHeaderPropsTest = (cases) => {
+      const props = {
+        section: {
+          page: {
+            template: cases,
+          },
+        },
+      };
+
+      return props;
+    };
+
+    const list = [
+      'article_detail',
+      'article_casino',
+      'article_sports',
+      'operator_review',
+      'game_review',
+      'author',
+    ];
+
+    const all = list.reduce((acc, current) => {
+      acc.push(getHeaderPropsTest(current));
+      return acc;
+    }, []);
+
+    all.forEach((elm) => {
+      expect(headerContent(elm)).toBeTruthy();
+    });
+    expect(headerContent('test')).toBeFalsy();
+
+    // expect(headerContent(props)).toBeTruthy();
+  });
+
+  test('render', () => {
+    const HeaderProps = getHeaderSection();
+    const enabledBgImg = ['author', 'game_review', 'operator_review'];
+
+    const { container } = render(
+      <Header
+        {...HeaderProps}
+        backgroundImage={enabledBgImg.includes(HeaderProps?.section?.page?.template)}
+      />
+    );
+    //  const
+    expect(container.querySelector('header')).toBeTruthy();
+    expect(container.querySelectorAll('header')).toHaveLength(1);
+    expect(container.querySelectorAll('div')).toHaveLength(3);
+
+    // Inner HTML
+    expect(container.querySelectorAll('p')).toHaveLength(0);
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/molecules/header/index.js

@@ -5,43 +5,43 @@ import Header from 'gatsby-core-theme/src/components/molecules/header/index';
 import loadable from '@loadable/component';
 
 /* eslint-disable react/prop-types */
+export const headerContent = (props) => {
+  let ModuleComponent = null;
+  // const t2st = 'just test'
 
-export default (props) => {
-  const headerContent = () => {
-    let ModuleComponent = null;
-
-    switch (props.section.page.template) {
-      case 'article_detail':
-      case 'article_casino':
-      case 'article_sports': {
-        ModuleComponent = loadable(() => import('./variants/article'));
-        return <ModuleComponent page={props.section.page} />;
-      }
-      case 'operator_review': {
-        ModuleComponent = loadable(() => import('./variants/operator'));
-        return <ModuleComponent operator={props.section.page.relation} />;
-      }
-      case 'game_review': {
-        ModuleComponent = loadable(() => import('./variants/slot'));
-        return <ModuleComponent page={props.section.page} />;
-      }
-      case 'author': {
-        ModuleComponent = loadable(() => import('./variants/author'));
-        return <ModuleComponent page={props.section.page} />;
-      }
-      default:
-        return ModuleComponent;
+  switch (props?.section?.page?.template) {
+    case 'article_detail':
+    case 'article_casino':
+    case 'article_sports': {
+      ModuleComponent = loadable(() => import('./variants/article'));
+      return <ModuleComponent page={props.section.page} />;
+    }
+    case 'operator_review': {
+      ModuleComponent = loadable(() => import('./variants/operator'));
+      return <ModuleComponent operator={props.section.page.relation} />;
+    }
+    case 'game_review': {
+      ModuleComponent = loadable(() => import('./variants/slot'));
+      return <ModuleComponent page={props.section.page} />;
     }
-  };
+    case 'author': {
+      ModuleComponent = loadable(() => import('./variants/author'));
+      return <ModuleComponent page={props.section.page} />;
+    }
+    default:
+      return ModuleComponent;
+  }
+};
 
+export default (props) => {
   const enabledBgImg = ['author', 'game_review', 'operator_review'];
 
   return (
     <Header
       {...props}
-      content={headerContent()}
+      content={headerContent(props)}
       // eslint-disable-next-line no-unneeded-ternary
-      backgroundImage={enabledBgImg.includes(props.section.page.template) ? false : true}
+      backgroundImage={enabledBgImg.includes(props?.section?.page?.template) ? false : true}
     />
   );
 };

package/src/components/molecules/operator-summary/operator-summary.test.js

@@ -5,6 +5,20 @@ import '@testing-library/jest-dom/extend-expect';
 import getPageData from 'gatsby-core-theme/tests/factories/pages/default.factory';
 import OperatorSummary from '.';
 
+const pageTest = {
+  title: 'The Page Title',
+  // type: 'test',
+  name: 'Rizk Casino',
+  extra_fields: {
+    related_operator: {
+      extra_fields: {
+        terms_and_conditions_text_enabled: '1',
+      },
+    },
+    summary_background: 'summary_background',
+  },
+};
+
 describe('summary component', () => {
   test('render', () => {
     const { container, getByText } = render(<OperatorSummary page={getPageData()} />);
@@ -23,6 +37,16 @@ describe('summary component', () => {
     // CTA
     expect(getByText('Visit')).toBeTruthy();
   });
+
+  test('', () => {
+    const { container, getByText } = render(
+      <OperatorSummary page={pageTest} tracker="main" activeOperator />
+    );
+
+    expect(container.querySelectorAll('a')).toHaveLength(2);
+    expect(getByText('18+ New Players only. Play responsibly.')).toBeTruthy();
+    expect(container.querySelectorAll('div')).toHaveLength(3);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/molecules/toplist/row/variant-one.js

@@ -55,7 +55,11 @@ export default function Row({
           <Link to={reviewPath} className="toplist-variant-one-gtm">
             <Label
               title={getExtraField(item.extra_fields, 'ribbon_text')}
-              bgColor={getExtraField(item.extra_fields, 'ribbon_color')}
+              bgColor={
+                getExtraField(item.extra_fields, 'ribbon_color')
+                  ? getExtraField(item.extra_fields, 'ribbon_color')
+                  : '#0000'
+              }
             />
           </Link>
         )}

package/src/components/molecules/toplist/row/variant-one.test.js

@@ -64,6 +64,22 @@ describe('toplist row component', () => {
     // CTA
     expect(getByText('Visit').closest('a').getAttribute('href')).toEqual('/shortName1');
   });
+
+  test('render pros', () => {
+    const list = getToplistItem();
+    const updateObj = {
+      ...list,
+      extra_fields: {
+        pro_1: 'pro1',
+        ribbon_text: 'ribbon_text',
+        terms_and_conditions_text_enabled: '1',
+      },
+      review_link: null,
+    };
+    const { getByText } = render(<Row item={updateObj} />);
+    expect(getByText('ribbon_text')).toBeTruthy();
+    expect(getByText('pro1')).toBeTruthy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/pages/contact-us/index.js

@@ -49,6 +49,7 @@ const ContactUs = ({
               )}
             </p>
             <Form
+              type="contact"
               hasButton
               buttonLabel="Send"
               submitUrl={submitUrl}