@nyris/nyris-webapp 0.3.62 → 0.3.63

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.62",
+  "version": "0.3.63",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@nyris/nyris-api": "^0.3.62",
-    "@nyris/nyris-react-components": "^0.3.62",
+    "@nyris/nyris-api": "^0.3.63",
+    "@nyris/nyris-react-components": "^0.3.63",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",

package/public/index.html

@@ -21,24 +21,6 @@
     />
   
     <script src="js/settings.js?CI_COMMIT_SHA"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"
-    />
-
-
-    <!-- Piwik Analytics -->
-    <script type="text/javascript">
-      (function(window, document, dataLayerName, id) {
-      window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
-      function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString();f="; SameSite=Strict"}document.cookie=a+"="+b+d+f+"; path=/"}
-      var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
-      var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
-      tags.async=!0,tags.src="https://nyris.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
-      !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
-      })(window, document, 'dataLayer', 'ace6a922-26e4-44b2-becf-ac94e9e5ecb4');
-      </script>
-    <!-- End Piwik Analytics -->
 
     <script>
       let vh = window.innerHeight * 0.01;

package/public/js/settings.example.js

@@ -39,19 +39,12 @@ var settings = {
     logoWidth: '',
     primaryColor: '',
     secondaryColor: '',
-    CTAButtonColor: '',
-    CTAButtonTextColor: '',
-    secondaryCTAButtonColor: '',
-    mainTextColor: '',
-    brandFieldBackground: '',
-    brandFieldPadding: '',
   },
   // Card Results
   mainTitle: '',
   secondaryTitle: '',
+  productDetails: 'keyword_1',
   attributes: {
-    productAttributes: true,
-    labelsAttributes: true,
     attributeOneLabelValue: '',
     attributeOneValue: '',
     attributeTwoLabelValue: '',
@@ -67,7 +60,6 @@ var settings = {
     secondaryCTAButtonTextColor: '',
     secondaryCTAButtonColor: '',
     secondaryCTAIcon: '',
-    secondaryCTAIconSource: '',
     secondaryCTALinkField: '',
   },
   CTAButton: {
@@ -76,13 +68,8 @@ var settings = {
     CTAButtonTextColor: '',
     CTAButtonColor: '',
     CTAIcon: '',
-    CTAIconSource: '',
     CTALinkField: '',
   },
-  //field mappins
-  field: {
-    productDetails: 'keyword_1',
-  },
   language: 'en',
   // features
   showPoweredByNyris: '',
@@ -90,6 +77,10 @@ var settings = {
   preFilterOption: '',
   experienceVisualSearch: false,
   experienceVisualSearchImages: [],
+  simpleCardView: false,
+  clarityId: '',
+  noSimilarSearch: false,
+  showFeedback: false,
   rfq: {
     enabled: '',
     emailTemplateId: '',
@@ -108,14 +99,8 @@ var settings = {
   },
   //UI - labels
   appTitle: '',
-  brandName: '',
   headerText: '',
   preFilterTitle: '',
-  CTAButtonText: 'View More',
-  simpleCardView: false,
-  secondaryCTAButtonText: 'Configure Now',
-  clarityId: '',
-  noSimilarSearch: false,
 };
 settings['customSearchRequest'] = null;
 settings['responseHook'] = null;

package/src/Store/constants.ts

@@ -26,7 +26,5 @@ export const defaultSettings: AppSettings = {
   mainTitle: '',
   secondaryTitle: '',
   theme: {},
-  field: {
-    productDetails: '',
-  },
+  productDetails: '',
 };

package/src/components/ProductDetailView.tsx

@@ -98,13 +98,13 @@ function ProductDetailView(props: Props) {
     setDataImageCarouSel(valueKey);
   };
   const productDetails = useMemo(() => {
-    const details = get(dataItem, settings.field.productDetails);
+    const details = get(dataItem, settings.productDetails);
     try {
       return details.join(', ');
     } catch (e) {
       return details;
     }
-  }, [dataItem, settings.field.productDetails]);
+  }, [dataItem, settings.productDetails]);
 
   return (
     <div
@@ -316,7 +316,7 @@ function ProductDetailView(props: Props) {
                         <Typography
                           className="text-f16 max-line-1 fw-700"
                           style={{
-                            color: settings.theme.mainTextColor || '#2B2C46',
+                            color: '#2B2C46',
                             fontFamily: 'Source Sans 3',
                             fontSize: '16px',
                             lineHeight: '22.78px',
@@ -337,7 +337,7 @@ function ProductDetailView(props: Props) {
                         <Typography
                           className="text-f14 max-line-1 fw-400"
                           style={{
-                            color: settings.theme.mainTextColor || '#2B2C46',
+                            color: '#2B2C46',
                             width: 'fit-content',
                             marginLeft: 8,
                             fontSize: 14,
@@ -357,36 +357,36 @@ function ProductDetailView(props: Props) {
                         <ProductAttribute
                           title={settings.attributes?.attributeOneLabelValue}
                           value={get(dataItem, settings.attributes?.attributeOneValue || '')}
-                          padding={settings.theme.brandFieldPadding || '4px 8px'}
-                          backgroundColor={settings.theme.brandFieldBackground}
-                          isTitleVisible={settings.attributes?.labelsAttributes}
+                          padding={'4px 8px'}
+                          backgroundColor={'#E0E0E0'}
+                          isTitleVisible={!!settings.attributes?.attributeOneLabelValue}
                         />
                       )}
                       {!!get(dataItem, settings.attributes?.attributeTwoValue || '') && (
                         <ProductAttribute
                           title={settings.attributes?.attributeTwoLabelValue}
                           value={get(dataItem, settings.attributes?.attributeTwoValue || '')}
-                          padding={settings.theme.brandFieldPadding || '4px 8px'}
-                          backgroundColor={settings.theme.brandFieldBackground}
-                          isTitleVisible={settings.attributes?.labelsAttributes}
+                          padding={'4px 8px'}
+                          backgroundColor={'#E0E0E0'}
+                          isTitleVisible={!!settings.attributes?.attributeTwoLabelValue}
                         />
                       )}
                       {!!get(dataItem, settings.attributes?.attributeThreeValue || '') && (
                         <ProductAttribute
                           title={settings.attributes?.attributeThreeLabelValue}
                           value={get(dataItem, settings.attributes?.attributeThreeValue || '')}
-                          padding={settings.theme.brandFieldPadding || '4px 8px'}
-                          backgroundColor={settings.theme.brandFieldBackground}
-                          isTitleVisible={settings.attributes?.labelsAttributes}
+                          padding={'4px 8px'}
+                          backgroundColor={'#E0E0E0'}
+                          isTitleVisible={!!settings.attributes?.attributeThreeLabelValue}
                         />
                       )}
                       {!!get(dataItem, settings.attributes?.attributeFourValue || '') && (
                         <ProductAttribute
                           title={settings.attributes?.attributeFourLabelValue}
                           value={get(dataItem, settings.attributes?.attributeFourValue || '')}
-                          padding={settings.theme.brandFieldPadding || '4px 8px'}
-                          backgroundColor={settings.theme.brandFieldBackground}
-                          isTitleVisible={settings.attributes?.labelsAttributes}
+                          padding={'4px 8px'}
+                          backgroundColor={'#E0E0E0'}
+                          isTitleVisible={!!settings.attributes?.attributeFourLabelValue}
                         />
                       )}
                     </div>
@@ -530,7 +530,7 @@ function ProductDetailView(props: Props) {
                         className="w-100 button-hover"
                         style={{
                           backgroundColor: '#F3F3F5',
-                          color: settings.theme.mainTextColor || '#2b2c46',
+                          color: '#2b2c46',
                           display: 'flex',
                           fontSize: 14,
                           justifyContent: 'space-between',
@@ -559,7 +559,7 @@ function ProductDetailView(props: Props) {
                             padding: 5,
                             paddingLeft: 15,
                             paddingRight: 15,
-                            color: settings.theme.mainTextColor || '#2b2c46',
+                            color: '#2b2c46',
                           }}
                         >
                           {productDetails}

package/src/components/results/ItemResult.tsx

@@ -241,7 +241,7 @@ function ItemResult(props: Props) {
                 display: 'flex',
                 justifyContent: 'space-between',
                 flexDirection: 'column',
-                color: settings.theme.mainTextColor || '#2B2C46',
+                color: '#2B2C46',
               }}
             >
               <div
@@ -259,7 +259,7 @@ function ItemResult(props: Props) {
                     <Typography
                       className="text-f12 max-line-1 fw-700"
                       style={{
-                        color: settings.theme.mainTextColor || '#2B2C46',
+                        color: '#2B2C46',
                         marginBottom: 4,
                         marginLeft: 8,
                       }}
@@ -274,7 +274,7 @@ function ItemResult(props: Props) {
                       display: 'flex',
                       justifyContent: 'space-between',
                       flexDirection: 'row',
-                      color: settings.theme.mainTextColor || '#2B2C46',
+                      color: '#2B2C46',
                     }}
                   >
                     <Tooltip
@@ -286,7 +286,7 @@ function ItemResult(props: Props) {
                       <Typography
                         className="text-f10 max-line-1 fw-400"
                         style={{
-                          color: settings.theme.mainTextColor || '#2B2C46',
+                          color: '#2B2C46',
                           marginBottom: 8,
                           marginLeft: 8,
                         }}
@@ -314,43 +314,43 @@ function ItemResult(props: Props) {
                     flexWrap: 'wrap',
                     marginBottom: settings.CTAButton?.CTAButton || settings.secondaryCTAButton?.secondaryCTAButton ? 8 : 0,
                     gridGap: 8,
-                    color: settings.theme.mainTextColor || '#2B2C46',
+                    color: '#2B2C46',
                   }}
                 >
                   {!!get(dataItem, settings.attributes?.attributeOneValue || '') && (
                     <ProductAttribute
                       title={settings.attributes?.attributeOneLabelValue}
                       value={get(dataItem, settings.attributes?.attributeOneValue || '')}
-                      padding={settings.theme.brandFieldPadding || '4px 8px'}
-                      backgroundColor={settings.theme.brandFieldBackground}
-                      isTitleVisible={settings.attributes?.labelsAttributes}
+                      padding={'4px 8px'}
+                      backgroundColor={'#E0E0E0'}
+                      isTitleVisible={!!settings.attributes?.attributeOneLabelValue}
                     />
                   )}
                   {!!get(dataItem, settings.attributes?.attributeTwoValue || '') && (
                     <ProductAttribute
                       title={settings.attributes?.attributeTwoLabelValue}
                       value={get(dataItem, settings.attributes?.attributeTwoValue || '')}
-                      padding={settings.theme.brandFieldPadding || '4px 8px'}
-                      backgroundColor={settings.theme.brandFieldBackground}
-                      isTitleVisible={settings.attributes?.labelsAttributes}
+                      padding={'4px 8px'}
+                      backgroundColor={'#E0E0E0'}
+                      isTitleVisible={!!settings.attributes?.attributeTwoLabelValue}
                     />
                   )}
                   {!!get(dataItem, settings.attributes?.attributeThreeValue || '') && (
                     <ProductAttribute
                       title={settings.attributes?.attributeThreeLabelValue}
                       value={get(dataItem, settings.attributes?.attributeThreeValue || '')}
-                      padding={settings.theme.brandFieldPadding || '4px 8px'}
-                      backgroundColor={settings.theme.brandFieldBackground}
-                      isTitleVisible={settings.attributes?.labelsAttributes}
+                      padding={'4px 8px'}
+                      backgroundColor={'#E0E0E0'}
+                      isTitleVisible={!!settings.attributes?.attributeThreeLabelValue}
                     />
                   )}
                   {!!get(dataItem, settings.attributes?.attributeFourValue || '') && (
                     <ProductAttribute
                       title={settings.attributes?.attributeFourLabelValue}
                       value={get(dataItem, settings.attributes?.attributeFourValue || '')}
-                      padding={settings.theme.brandFieldPadding || '4px 8px'}
-                      backgroundColor={settings.theme.brandFieldBackground}
-                      isTitleVisible={settings.attributes?.labelsAttributes}
+                      padding={'4px 8px'}
+                      backgroundColor={'#E0E0E0'}
+                      isTitleVisible={!!settings.attributes?.attributeFourLabelValue}
                     />
                   )}
                 </div>

package/src/types.ts

@@ -55,7 +55,6 @@ interface SecondaryCTAButton {
 
 interface Attributes {
   productAttributes?: boolean,
-  labelsAttributes?: boolean,
   attributeOneLabelValue?: string,
   attributeOneValue?: string,
   attributeTwoLabelValue?: string,
@@ -75,13 +74,13 @@ export interface AppSettings extends NyrisAPISettings {
   cadenas?: Cadenas;
   clarityId?: string;
   mainTitle: string,
+  productDetails: string;
   secondaryTitle: string,
   CTAButton?: CTAButtonSettings;
   secondaryCTAButton?: SecondaryCTAButton;
   attributes?: Attributes;
   experienceVisualSearch?: boolean;
   experienceVisualSearchImages?: string[];
-  field: Field;
   headerText?: string;
   instantRedirectPatterns: string[];
   isBrandNameTitleVisible?: boolean;
@@ -117,9 +116,6 @@ export interface SearchSuiteSettings {
   mobileFooterImageColor?: string;
   primaryColor?: string;
   secondaryColor?: string;
-  mainTextColor?: string;
-  brandFieldBackground?: string;
-  brandFieldPadding?: string;
 }
 
 export type AppState = {