App01

.eslintrc

@@ -1,4 +1,7 @@
 {
   "extends": "vtex",
-  "root": true
-}
+  "root": true,
+  "env": {
+    "node": true
+  }
+}

graphql/schema.graphql

@@ -0,0 +1,15 @@
+type Mutation {
+  setRegionId(
+    country: String!
+    postalCode: String!
+    salesChannel: String!
+  ): SessionResponse
+}
+
+type SessionResponse {
+  updated: Boolean
+}
+
+type Query {
+  value: String
+}

manifest.json

@@ -1,18 +1,46 @@
 {
-  "vendor": "CHANGE_ME",
-  "name": "CHANGE_ME",
-  "version": "0.0.0",
-  "title": "CHANGE_ME",
-  "description": "CHANGE_ME",
+  "vendor": "bscolombia",
+  "name": "bs-apps",
+  "version": "0.0.1",
+  "title": "Branding Shoes App",
+  "description": "Customs apps",
   "builders": {
+    "assets": "0.x",
     "react": "3.x",
-    "messages": "1.x",
-    "docs": "0.x"
+    "docs": "0.x",
+    "store": "0.x",
+    "graphql": "1.x"
+  },
+  "dependencies": {
+    "vtex.device-detector": "0.x",
+    "vtex.search-page-context": "0.x",
+    "vtex.styleguide": "9.x",
+    "vtex.native-types": "0.x",
+    "vtex.search-result": "3.x",
+    "vtex.recommendation-context": "0.x",
+    "vtex.recommendation-graphql": "0.x",
+    "vtex.product-context": "0.x",
+    "vtex.store-graphql": "2.x",
+    "vtex.css-handles": "1.x",
+    "vtex.modal-layout": "0.x",
+    "vtex.shelf-components": "0.x",
+    "vtex.order-manager": "0.x",
+    "vtex.store-resources": "0.x"
+  },
+  "billingOptions": {
+    "type": "sponsored"
   },
-  "dependencies": {},
   "registries": [
     "smartcheckout"
   ],
-  "policies": [],
+  "policies": [
+    {
+      "attrs": {
+        "host": "portal.vtexcommercestable.com.br",
+        "path": "/api/*"
+      },
+      "name": "outbound-access"
+    }
+  ],
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

package.json

@@ -1,5 +1,4 @@
 {
-  "version": "0.0.0",
   "name": "CHANGE_ME",
   "private": true,
   "license": "UNLICENSED",
@@ -9,10 +8,6 @@
     "lint:locales": "intl-equalizer",
     "test": "cd ./react && yarn test"
   },
-  "intl-equalizer": {
-    "referenceLocale": "en",
-    "localeDirectory": "messages"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -23,6 +18,9 @@
       "eslint --fix",
       "prettier --write"
     ],
+    "*.{json,graphql,gql}": [
+      "prettier --write"
+    ],
     "*.json": [
       "prettier --write"
     ],
@@ -41,5 +39,10 @@
     "prettier": "^2.2.0",
     "typescript": "^3.9.6",
     "@vtex/danger": "^0.2.7"
+  },
+  "version": "0.0.0",
+  "intl-equalizer": {
+    "referenceLocale": "en",
+    "localeDirectory": "messages"
   }
-}
+}

react/CustomFilters.tsx

@@ -0,0 +1 @@
+export { default } from './components/CustomFilters';

react/CustomSearchBar.tsx

@@ -0,0 +1 @@
+export { default } from './components/CustomSearchBar';

react/SugesstedColors.tsx

@@ -0,0 +1 @@
+export { default } from './components/SugesstedColors';

react/components/CustomFilters/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import style from './style.css'
+
+const CustomFilters=()=>{
+
+    function toogleHide(){
+        let isHide=document.querySelector('.vtex-search-result-3-x-filtersWrapper--filters-native-scroll')?.classList.contains('vtex-search-result-3-x-filtersWrapper--hidden')
+        if(isHide){
+            document.querySelector('.vtex-search-result-3-x-filtersWrapper--filters-native-scroll')?.classList.remove('vtex-search-result-3-x-filtersWrapper--hidden')
+        }else{
+            document.querySelector('.vtex-search-result-3-x-filtersWrapper--filters-native-scroll')?.classList.add('vtex-search-result-3-x-filtersWrapper--hidden')
+        }
+    }
+
+    return (
+    <>
+    <style>
+        {`
+        body > div.render-container.render-route-store-search-category > div > div.vtex-store__template.bg-base > div > div:nth-child(5) > div > div > section > div.relative.justify-center.flex > div > div:nth-child(2) > div > div > div > div:nth-child(1) > div > div > div:nth-child(2) > div > div > div{
+            width:100%!important;
+        }
+        `}
+    </style>
+    <div className={`${style.ContainerfilterForm} flex flex-col p10`} onClick={()=>toogleHide()}>
+        <div className={`${style.VerMasfilterForm}`} 
+            onClick={()=>toogleHide()}>
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7812 1.31475C10.5966 1.31475 10.4137 1.35095 10.2431 1.42129C10.0725 1.49162 9.91746 1.59471 9.78688 1.72467C9.6563 1.85463 9.55272 2.00891 9.48204 2.17871C9.41137 2.34851 9.375 2.5305 9.375 2.71429C9.375 2.89808 9.41137 3.08007 9.48204 3.24986C9.55272 3.41966 9.6563 3.57395 9.78688 3.70391C9.91746 3.83386 10.0725 3.93695 10.2431 4.00729C10.4137 4.07762 10.5966 4.11382 10.7812 4.11382C11.1542 4.11382 11.5119 3.96637 11.7756 3.70391C12.0393 3.44144 12.1875 3.08547 12.1875 2.71429C12.1875 2.34311 12.0393 1.98713 11.7756 1.72467C11.5119 1.4622 11.1542 1.31475 10.7812 1.31475ZM8.48438 2.24778C8.59196 1.72048 8.8794 1.24642 9.298 0.905915C9.7166 0.565407 10.2406 0.379395 10.7812 0.379395C11.3219 0.379395 11.8459 0.565407 12.2645 0.905915C12.6831 1.24642 12.9705 1.72048 13.0781 2.24778H15V3.1808H13.0781C12.9705 3.70809 12.6831 4.18215 12.2645 4.52266C11.8459 4.86317 11.3219 5.04918 10.7812 5.04918C10.2406 5.04918 9.7166 4.86317 9.298 4.52266C8.8794 4.18215 8.59196 3.70809 8.48438 3.1808H0V2.24778H8.48438ZM4.21875 5.97986C3.84579 5.97986 3.4881 6.12731 3.22438 6.38978C2.96066 6.65224 2.8125 7.00822 2.8125 7.37939C2.8125 7.75057 2.96066 8.10655 3.22438 8.36901C3.4881 8.63148 3.84579 8.77893 4.21875 8.77893C4.59171 8.77893 4.9494 8.63148 5.21312 8.36901C5.47684 8.10655 5.625 7.75057 5.625 7.37939C5.625 7.00822 5.47684 6.65224 5.21312 6.38978C4.9494 6.12731 4.59171 5.97986 4.21875 5.97986ZM1.92188 6.91288C2.02946 6.38559 2.3169 5.91153 2.7355 5.57102C3.1541 5.23051 3.67811 5.0445 4.21875 5.0445C4.75939 5.0445 5.2834 5.23051 5.702 5.57102C6.1206 5.91153 6.40804 6.38559 6.51562 6.91288H15V7.84591H6.51562C6.40804 8.3732 6.1206 8.84726 5.702 9.18777C5.2834 9.52827 4.75939 9.71429 4.21875 9.71429C3.67811 9.71429 3.1541 9.52827 2.7355 9.18777C2.3169 8.84726 2.02946 8.3732 1.92188 7.84591H0V6.91288H1.92188ZM10.7812 10.645C10.4083 10.645 10.0506 10.7924 9.78688 11.0549C9.52316 11.3173 9.375 11.6733 9.375 12.0445C9.375 12.4157 9.52316 12.7717 9.78688 13.0341C10.0506 13.2966 10.4083 13.444 10.7812 13.444C11.1542 13.444 11.5119 13.2966 11.7756 13.0341C12.0393 12.7717 12.1875 12.4157 12.1875 12.0445C12.1875 11.6733 12.0393 11.3173 11.7756 11.0549C11.5119 10.7924 11.1542 10.645 10.7812 10.645ZM8.48438 11.578C8.59196 11.0507 8.8794 10.5766 9.298 10.2361C9.7166 9.89562 10.2406 9.70961 10.7812 9.70961C11.3219 9.70961 11.8459 9.89562 12.2645 10.2361C12.6831 10.5766 12.9705 11.0507 13.0781 11.578H15V12.511H13.0781C12.9705 13.0383 12.6831 13.5124 12.2645 13.8529C11.8459 14.1934 11.3219 14.3794 10.7812 14.3794C10.2406 14.3794 9.7166 14.1934 9.298 13.8529C8.8794 13.5124 8.59196 13.0383 8.48438 12.511H0V11.578H8.48438Z" fill="#72716F"/>
+            </svg> 
+            Filtro
+        </div>
+    </div>
+    </>)
+}
+export default CustomFilters

react/components/CustomFilters/style.css

@@ -0,0 +1,41 @@
+.ContainerfilterForm{
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    height: 56.75px;
+    cursor: pointer;
+}
+
+.VerMasfilterForm{
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 120%;
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+    color: #72716F;
+}
+
+.ContentTopfilterForm{
+
+}
+
+.contentInputfilterForm{
+
+}
+
+.labelSelect{
+
+}
+
+.TasaSelectInput{
+
+}
+
+.customFormBtn{
+
+}

react/components/CustomSearchBar/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import style from "./style.css"
+
+const CustomSearchBar=()=>{
+    const searchBarInnerContainer = document.querySelector('.vtex-store-components-3-x-searchBarInnerContainer')
+    const searchBarContainer = document.querySelector('.vtex-store-components-3-x-searchBarContainer')
+
+    return (
+
+        <div 
+            className={style.searchBtn} 
+            onClick={()=>{
+                searchBarInnerContainer?.classList.remove('vtex-store-components-3-x-searchBarInnerContainer--hidden')
+                searchBarContainer?.classList.add(style.newZIndexSearchBar)
+            }}>
+            <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.22754 16.9615C10.2484 16.9615 11.2593 16.7605 12.2025 16.3698C13.1457 15.9791 14.0027 15.4065 14.7246 14.6846C15.4465 13.9627 16.0191 13.1057 16.4098 12.1625C16.8005 11.2193 17.0016 10.2084 17.0016 9.1875C17.0016 8.1666 16.8005 7.15569 16.4098 6.2125C16.0191 5.26931 15.4465 4.41231 14.7246 3.69042C14.0027 2.96854 13.1457 2.39591 12.2025 2.00522C11.2593 1.61454 10.2484 1.41346 9.22754 1.41346C7.16574 1.41346 5.18838 2.23251 3.73046 3.69042C2.27255 5.14834 1.4535 7.1257 1.4535 9.1875C1.4535 11.2493 2.27255 13.2267 3.73046 14.6846C5.18838 16.1425 7.16574 16.9615 9.22754 16.9615ZM18.415 9.1875C18.415 11.6242 17.4471 13.9611 15.7241 15.684C14.0011 17.407 11.6642 18.375 9.22754 18.375C6.79086 18.375 4.45399 17.407 2.731 15.684C1.00801 13.9611 0.0400391 11.6242 0.0400391 9.1875C0.0400391 6.75082 1.00801 4.41395 2.731 2.69096C4.45399 0.967966 6.79086 0 9.22754 0C11.6642 0 14.0011 0.967966 15.7241 2.69096C17.4471 4.41395 18.415 6.75082 18.415 9.1875Z" fill="white"/>
+            <path d="M14.4775 16.0604C14.5123 16.1068 14.5495 16.1509 14.5913 16.1938L19.0585 20.6599C19.2761 20.8775 19.5713 20.9999 19.8791 21C20.1869 21.0001 20.4821 20.878 20.6998 20.6605C20.9176 20.4429 21.0399 20.1479 21.04 19.8402C21.0401 19.5324 20.918 19.2373 20.7004 19.0196L16.2331 14.5535C16.1916 14.5115 16.147 14.4727 16.0997 14.4375C15.6445 15.058 15.0975 15.6056 14.4775 16.0615V16.0604Z" fill="white"/>
+            </svg>
+            <style>
+            {`#menu-item-category-women,#menu-item-category-home,#menu-item-custom-sale{
+                font-family: 'Industry';
+                font-style: normal;
+                font-weight: 600;
+                font-size: 19px;
+                line-height: 160%;
+                display: flex;
+                align-items: center;
+                text-align: center;
+                padding:0px 30px;
+                letter-spacing: 0.02em;
+                color: #FFFFFF;
+            }`}
+            </style>
+        </div>
+    )
+}
+
+export default CustomSearchBar

react/components/CustomSearchBar/style.css

@@ -0,0 +1,14 @@
+.newZIndexSearchBar{
+    z-index: 2!important;
+}
+.searchBtn{
+    width: 44px;
+    height: 44px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}

react/components/SugesstedColors/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
+import { useProduct } from 'vtex.product-context'
+import { useRuntime } from 'vtex.render-runtime'
+import { RecommendationProvider } from 'vtex.recommendation-context/RecommendationContext'
+import style from './style.css'
+
+const SugesstedColors=()=>{
+    const productContext=useProduct()
+    const { searchQuery } = useSearchPage()
+    const { page } = useRuntime()
+    const product =productContext?.product
+    console.log('product Data',product,productContext, page, searchQuery )
+    /*const categoryId=product?.categoryTree
+    let categoryIdI=0
+    const [category, setCategory]=useState('')*/
+
+    return (
+        <div className={style.colorVariationContainer}>
+            <RecommendationProvider></RecommendationProvider>
+        </div>
+    )
+}
+
+export default SugesstedColors

react/components/SugesstedColors/style.css

@@ -0,0 +1,3 @@
+.colorVariationContainer{
+
+}

react/graphql/mutation.createDocument.gql

@@ -0,0 +1,9 @@
+mutation createDocumentMD($acronym: String!, $document: DocumentInput) {
+  createDocument(acronym: $acronym, document: $document)
+    @context(provider: "vtex.store-graphql") {
+    cacheId
+    id
+    href
+    documentId
+  }
+}

react/graphql/query.getDocuments.gql

@@ -0,0 +1,9 @@
+query GetDocuments($acronym: String, $fields: [String], $where: String) {
+  documents(acronym: $acronym, fields: $fields, where: $where) {
+    id
+    fields {
+      key
+      value
+    }
+  }
+}

react/package.json

@@ -19,7 +19,17 @@
     "@vtex/test-tools": "^3.3.2",
     "@vtex/tsconfig": "^0.4.4",
     "apollo-cache-inmemory": "^1.6.5",
+    "bscolombia.bs-apps": "https://luisgmaster22--bscolombia.myvtex.com/_v/private/typings/linked/v1/[email protected]+build1663472022/public/@types/bscolombia.bs-apps",
     "graphql": "^14.6.0",
-    "typescript": "^3.9.6"
+    "typescript": "3.9.7",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles",
+    "vtex.modal-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.modal-layout",
+    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.native-types",
+    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-context",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
+    "vtex.search-page-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.search-page-context",
+    "vtex.search-result": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.search-result",
+    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.styleguide"
   }
 }

react/tsconfig.json

@@ -2,10 +2,17 @@
   "extends": "@vtex/tsconfig",
   "compilerOptions": {
     "noEmitOnError": false,
-    "lib": ["dom"],
+    "lib": [
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "target": "es2017"
   },
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
-}
+  "include": [
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts",
+    "CustomSearchBar.tsx"
+  ]
+}