GithubHelp home page GithubHelp logo

vtex-apps / store-components Goto Github PK

View Code? Open in Web Editor NEW
48.0 57.0 139.0 7.29 MB

Default VTEX store components

JavaScript 50.81% CSS 2.56% TypeScript 46.62% Shell 0.01%
vtex-io srv-store-framework xp-developer store-framework hacktoberfest

store-components's People

Contributors

allcontributors[bot] avatar arthursampaio avatar augustolazaro avatar claudivanfilho avatar estacioneto avatar guerreirobeatriz avatar gugabribeiro avatar iago1501 avatar iaronaraujo avatar igorbrasileiro avatar jgfidelis avatar juanalmeida12 avatar kaisermann avatar klynger avatar klzns avatar lariciamota avatar lbebber avatar lucasecdb avatar lucis avatar mariana-caetano avatar matheusps avatar paul0vinicius avatar rerissondaniel avatar salesfelipe avatar samuraiexx avatar sesave avatar thayannevls avatar theomoura avatar victorhmp avatar vitoria avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

store-components's Issues

SKU Selector - More than two specifications

Is your feature request related to a problem? Please describe.
The SKU Selector does not render more than two items of the specifications.

Describe the solution you'd like
That the SKU Selector could render all specifications and heard a way to identify the sku on the front (a class based on the sku name)

Describe alternatives you've considered
Develop a proper component to handle SKU selection

Additional context
https://github.com/vtex-apps/store-components/blob/279de2e49b1f2008d99615ca93da774c2d96d55c/react/components/SKUSelector/README.md
https://drive.google.com/open?id=1JoXUWdMhXmL66DuKC_Ii6koxnVLn8Gn2

product-brand props not applied

Describe the bug
"vtex.store-components:product-brand" doesn't apply props. Logo is still used instead of text

To Reproduce
"flex-layout.col#pri-left": { "children": [ "vtex.store-components:product-brand" ], }, "vtex.store-components:product-brand": { "props": { "displayMode": "text" } }

Screenshots
Screenshot 2020-02-23 at 15 39 56

[newsletter] 400 Network Error on submit

Describe the bug
The newsletter component fails with a 400 network error when sending data, it's trying to send a POST request to /api/profile-system/pvt/profiles/undefined/personalPreferences, so it seems linke "email" is undefined on the mutation.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://storetheme.vtex.com/
  2. Scroll down to "Subscribe to our Newsletter"
  3. Open the network tab of DevTools
  4. Type a valid email address and submit
  5. See the error "Something went wrong, please try again later" on the frontend and the detailed error log on the network tab

Expected behavior
It should send a request to the user profile via it's email and change the field isNewsletterOptin's value to true

Desktop (please complete the following information):

  • OS: N/A
  • Browser N/A
  • Version N/A

Smartphone (please complete the following information):

  • Device: N/A
  • OS: N/A
  • Browser N/A
  • Version N/A

Additional context

{
   "data":{
      "subscribeNewsletter":null
   },
   "errors":[
      {
         "message":"Request failed with status code 400",
         "path":[
            "subscribeNewsletter"
         ],
         "extensions":{
            "code":"INTERNAL_SERVER_ERROR",
            "exception":{
               "status":400,
               "code":"BAD_USER_INPUT",
               "name":"UserInputError",
               "level":"warn",
               "config":{
                  "baseURL":"http://portal.vtexcommercestable.com.br",
                  "data":"{\"isNewsletterOptIn\":\"True\"}",
                  "headers":{
                     "Accept":"application/json, text/plain, */*",
                     "Content-Type":"application/json;charset=utf-8",
                     "accept-encoding":"gzip",
                     "user-agent":"[email protected]",
                     "x-vtex-operation-id":"0eb48fa0-4bd3-40f6-a1aa-e251221ba8ba",
                     "x-vtex-segment":"eyJjYW1wYWlnbnMiOm51bGwsImNoYW5uZWwiOiIxIiwicHJpY2VUYWJsZXMiOm51bGwsInJlZ2lvbklkIjpudWxsLCJ1dG1fY2FtcGFpZ24iOm51bGwsInV0bV9zb3VyY2UiOm51bGwsInV0bWlfY2FtcGFpZ24iOm51bGwsImN1cnJlbmN5Q29kZSI6IkJSTCIsImN1cnJlbmN5U3ltYm9sIjoiUiQiLCJjb3VudHJ5Q29kZSI6IkJSQSIsImN1bHR1cmVJbmZvIjoicHQtQlIifQ",
                     "Content-Length":28
                  },
                  "method":"post",
                  "timeout":3000,
                  "url":"http://portal.vtexcommercestable.com.br/api/profile-system/pvt/profiles/undefined/personalPreferences/",
                  "metric":"profile-system-subscribeNewsletter",
                  "params":{
                     "an":"parquedpedro"
                  }
               },
               "request":{
                  "finished":true,
                  "method":"POST",
                  "path":"/api/profile-system/pvt/profiles/undefined/personalPreferences/?an=parquedpedro"
               },
               "response":{
                  "data":{
                     "Message":"\"'undefined' is not a valid email\""
                  },
                  "headers":{
                     "date":"Tue, 04 Jun 2019 21:52:10 GMT",
                     "content-type":"application/json; charset=utf-8",
                     "server":"VTEX IO",
                     "content-length":"50",
                     "cache-control":"no-cache",
                     "pragma":"no-cache",
                     "expires":"-1",
                     "set-cookie":[
                        "janus_sid=97508603-7475-4139-82eb-ccd503ad6e1c; expires=Fri, 07 Jun 2019 21:52:07 GMT; domain=portal.vtexcommercestable.com.br; path=/; samesite=lax"
                     ],
                     "x-aspnet-version":"4.0.30319",
                     "x-powered-by":"ASP.NET",
                     "x-vtex-janus-router-backend-app":"ds-api-v10.100.8",
                     "x-vtex-took":"195",
                     "x-request-id":"9af41111e185475b99049ddcd8a55755",
                     "x-vtex-router-version":"2.14.2",
                     "x-vtex-backend-status-code":"BadRequest",
                     "x-vtex-backend-elapsed-time":"00:00:00.1997736",
                     "x-vtex-router-elapsed-time":"00:00:00.2206787",
                     "x-vtex-io-cluster-id":"aws-1-us-east-1"
                  },
                  "status":400
               }
            }
         },
         "name":"GraphQLError",
         "originalError":{
            "status":400,
            "code":"BAD_USER_INPUT",
            "name":"UserInputError",
            "level":"warn",
            "config":{
               "baseURL":"http://portal.vtexcommercestable.com.br",
               "data":"{\"isNewsletterOptIn\":\"True\"}",
               "headers":{
                  "Accept":"application/json, text/plain, */*",
                  "Content-Type":"application/json;charset=utf-8",
                  "accept-encoding":"gzip",
                  "user-agent":"[email protected]",
                  "x-vtex-operation-id":"0eb48fa0-4bd3-40f6-a1aa-e251221ba8ba",
                  "x-vtex-segment":"eyJjYW1wYWlnbnMiOm51bGwsImNoYW5uZWwiOiIxIiwicHJpY2VUYWJsZXMiOm51bGwsInJlZ2lvbklkIjpudWxsLCJ1dG1fY2FtcGFpZ24iOm51bGwsInV0bV9zb3VyY2UiOm51bGwsInV0bWlfY2FtcGFpZ24iOm51bGwsImN1cnJlbmN5Q29kZSI6IkJSTCIsImN1cnJlbmN5U3ltYm9sIjoiUiQiLCJjb3VudHJ5Q29kZSI6IkJSQSIsImN1bHR1cmVJbmZvIjoicHQtQlIifQ",
                  "Content-Length":28
               },
               "method":"post",
               "timeout":3000,
               "url":"http://portal.vtexcommercestable.com.br/api/profile-system/pvt/profiles/undefined/personalPreferences/",
               "metric":"profile-system-subscribeNewsletter",
               "params":{
                  "an":"parquedpedro"
               }
            },
            "request":{
               "finished":true,
               "method":"POST",
               "path":"/api/profile-system/pvt/profiles/undefined/personalPreferences/?an=parquedpedro"
            },
            "response":{
               "data":{
                  "Message":"\"'undefined' is not a valid email\""
               },
               "headers":{
                  "date":"Tue, 04 Jun 2019 21:52:10 GMT",
                  "content-type":"application/json; charset=utf-8",
                  "server":"VTEX IO",
                  "content-length":"50",
                  "cache-control":"no-cache",
                  "pragma":"no-cache",
                  "expires":"-1",
                  "set-cookie":[
                     "janus_sid=97508603-7475-4139-82eb-ccd503ad6e1c; expires=Fri, 07 Jun 2019 21:52:07 GMT; domain=portal.vtexcommercestable.com.br; path=/; samesite=lax"
                  ],
                  "x-aspnet-version":"4.0.30319",
                  "x-powered-by":"ASP.NET",
                  "x-vtex-janus-router-backend-app":"ds-api-v10.100.8",
                  "x-vtex-took":"195",
                  "x-request-id":"9af41111e185475b99049ddcd8a55755",
                  "x-vtex-router-version":"2.14.2",
                  "x-vtex-backend-status-code":"BadRequest",
                  "x-vtex-backend-elapsed-time":"00:00:00.1997736",
                  "x-vtex-router-elapsed-time":"00:00:00.2206787",
                  "x-vtex-io-cluster-id":"aws-1-us-east-1"
               },
               "status":400
            },
            "message":"Request failed with status code 400",
            "stack":"Error: Request failed with status code 400\n    at createError (/usr/local/app/node_modules/axios/lib/core/createError.js:16:15)\n    at settle (/usr/local/app/node_modules/axios/lib/core/settle.js:18:12)\n    at IncomingMessage.handleStreamEnd (/usr/local/app/node_modules/axios/lib/adapters/http.js:201:11)\n    at IncomingMessage.emit (events.js:205:15)\n    at endReadableNT (_stream_readable.js:1137:12)\n    at processTicksAndRejections (internal/process/task_queues.js:84:9)"
         },
         "forwardedHost":"homologmurilo--parquedpedro.myvtex.com",
         "forwardedProto":"http",
         "operationId":"0eb48fa0-4bd3-40f6-a1aa-e251221ba8ba",
         "query":{
            "query":"mutation subscribeNewsletter($email: String) {\n  subscribeNewsletter(email: $email)\n}\n",
            "variables":{
               "email":"[email protected]"
            },
            "operationName":"subscribeNewsletter",
            "senderApp":"[email protected]",
            "providerApp":"[email protected]"
         },
         "requestId":"629ccc43276146cf901600a20786af37",
         "pathName":"subscribeNewsletter"
      }
   ]
}

Create buy button module

Create the buy button and providing as a npm module.

Expected Behavior

The buy button must add items to the cart.

Possible Solution

This module should be used like this:
<BuyButton quantity={Int} skuId={String} seller={String} salesChannel={String} redirect={Boolean} />

Editable props

redirect: If the call to action will redirect the user to the cart or just add the item whitout redirect.

Thumbs carousel configuration

Is your feature request related to a problem? Please describe.
I need to add arrows to the vertical thumbs carousel but it can't be achieved since you guys use the swiper lib and have set up a static config object inside the component.

Describe the solution you'd like
Make it possible to control the swiper carousel configuration by props in the blocks, adding all the remaining properties that the lib can have.

Field - Quantity

Is your feature request related to a problem? Please describe.
I need to display the quantity field like is show in the image:
image

Describe the solution you'd like
Change prop in BuyButton component, also like:

<BuyButton quantityToBeAdded={quantityToBeAdded} available={isAvailable} skuItems={skuItems} isOneClickBuy={isOneClickBuy} shouldOpenMinicart= {shouldOpenMinicart} />

Image link prop not working

Describe the bug
Trying to add la link to an image but the "href" attribute is not rendered in the frontend.

To Reproduce
Steps to reproduce the behavior:

  1. Add an image using the image block
    "image#img-vegan": { "props":{ "src": "assets/imagini/icon-vegan.svg", "link":"/diete-speciale/vegan" } }
  2. Link the app

Expected behavior
The image should redirect the user to the specified link, but the tag wrapping the img has a blank href.

Screenshots
image

Desktop (please complete the following information):

  • OS: macOS
  • Browser: chrome
  • Version 3.x

Additional context
You can see the live bug here: beta--sanovita.myvtex.com

Brand Name HTML Tag

Is your feature request related to a problem? Please describe.

We want to be able to make an improvement to SEO allowing to change the HTML tag containing the brand name, as it works with the "tag" property in the "product-name" component.

Describe the solution you'd like
pass the html element as a parameter

Describe alternatives you've considered
pass the html element as a parameter

Additional context
product-summary-brand

Product Description - Custom Heigth when collapseContent is true

Desciption of problem
When I want to add the description to the quick view a double scroll is generated because the height of the description is fixed in the code even if it is collapsed, to be specific it is 220px, I have revised the code and see that this value is a constant, I would appreciate it being a property and so each developer can choose the best height for the product description

Describe the solution you'd like
in the properties of the component you should receive a property called "collapseHeigth" which should be a number, this should define the height when the description is collapsed

Describe alternatives you've considered
None

Additional context
image

image

[Image] Add link tag

Is your feature request related to a problem? Please describe.
The idea is to make it possible to add external/internal link tags outside a store-components/Image app instance.

Describe the solution you'd like
A src/url prop that places an outside link tag. It can be very useful considering that will make it possible to add custom images inside header/footer that can redirect the user to an url.
Also it can have a prop to choose if the link should be open in a new window.

Describe alternatives you've considered

Additional context

Product Thumbnails bug

Describe the bug

Sometimes, when I open the product page in the same window, the product images do not load completely, the top arrow remains displayed and I cannot click on any picture.

I tried not to activate the navigation arrows but the same thing happens (the arrow no longer appears, normally, but I still can't change the pictures).

If I resize the window or refresh the page, it works.

  • I removed all the elements from the page (including the header and footer) and I was left with only the product images and the result is the same.
  • I uninstalled the theme and installed the default one from vtex, without success.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://distinctive.ro
  2. Go to listing page
  3. Click on any product ( it happens once in several products, not every time. Open the product in the same window )

Screenshots
product-images

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome/Mozilla ( tested on this two browsers, i didn't try on IE )

Newsletter Terms and Conditions agreement confirmation

A client from Canadá needs a "Terms & Conditions" agreement on the newsletter component. It's a Canadian Anti-Spam Legislation requirement.

User Stories

As a customer, If I have a Terms & Condition label, I have to read and agree with the Terms & Conditions to opt-in the store's emailing list.

As a customer, If I have a Terms & Condition label when submitting the form without the confirmation checkbox set, I have to receive an error message asking me to confirm the "Terms & Conditions" by selecting the confirmation checkbox.

As a customer, If I have a Terms & Condition label when submitting the form with the confirmation checkbox set, the newsletter success message will be displayed.

As an e-commerce admin user. I want to set up a "Terms & Conditions" label using markdown language (at least with bold and hyperlink support) at the Store Editor on the CMS Section by selecting the Newsletter's Block.

Layout

Front-end

image
* Information and Promotion will have a hyperlink to the following page using an internal link.

Store Editor

image

Search Bar component props doesn't work

Describe the bug
The props placeholder and emptyPlaceholder does not work when sending a string, It uses the formatted message configured in the locales folder

To Reproduce

Expected behavior
The rendered text will be the props placeholder

Screenshots
image
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version 70

Smartphone (please complete the following information):

Additional context

Dropdown select options don't change on click on Firefox

Describe the bug
product-summary-sku-selector is the problem, to be more precise

const handleClick = (_: React.MouseEvent, value: string) => {
const reducedOptions = displayOptions.reduce<Record<string, DisplayOption>>(
(acc, cur) => {
acc[cur.label] = cur

    return acc
  },
  {}
)

return reducedOptions[value].onSelectItem()

}

The value is empty string when selected from Firefox which results in an error

Uncaught TypeError: reducedOptions[value] is undefined handleClick SelectVariationMode.tsx:63

You won't see it like this in production, but here you go from a workspace where I linked to last store-components version

https://skuselector--dacris.myvtex.com/

image

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://www.dacris.net/ on home page and try to select a value from the drop down (in a shelf)
  2. See error in browser

Expected behavior
The error shouldn't happen and the value should change on click

Screenshots
See above

Desktop (please complete the following information):

  • OS: Ubuntu 20.04.3 LTS
  • Browser Firefox
  • Version 91.0.2 (64-bit) Mozilla For Ubuntu (but tried it on Windows as well with a different version)

Additional context
Tried on several other production sites done on VTEX, same issue. Tried to find a solution but couldn't -> it only happens in Firefox AFAIK. Also it only happens with this block, not sku-selector, that one with the select option works fine.

I also tried installing an older version of store-components, no luck.

[newsletter] Existing e-mail warning

Is your feature request related to a problem? Please describe.
When I subscribe to a newsletter with an existing e-mail the component only returns a subscription confirmation.

Describe the solution you'd like
When subscribe to a newsletter, the component may detect if the e-mail is already in master data and returns an error message, like: "E-mail already registered"

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Adding link to brand link

At present it is only possible to add a link to the product brand if it is displayed as an image.
Alleop wish to use products with links for text as well.

Would it be difficult to implement this?

Thanks

[2.x][BuyButton] Sometimes the SKU is not added to the cart

Describe the bug
When the option to redirect to checkout (isOneClickBuy) is enabled, if the network connection is slow or spotty, the redirection occurs before the item is actually added to the cart

Expected behavior
Add the SKU to the cart and only redirect when it has successfully added.

Additional context
https://github.com/vtex-apps/store-components/blob/v2.6.10/react/components/BuyButton/index.js#L72
Line 72 should be moved to after the await command or inside the response block.

CSS class in the thumbs swiper

Is your feature request related to a problem? Please describe.
There is no css class for the swiper-container and swiper-wrapper items in the product-images (thumbs) component.

Describe the solution you'd like
We need a css class for the swiper-container and swiper-wrapper, so we can style these two items, in some specific scenarios.

https://i.ibb.co/0c0G4N0/Tela-inteira-19-03-2021-15-29.png

[info-card] Ability to hide text

When using info card, sometimes the store owners just want to display an image. In order to do that it is required, right now, to use a custom CSS to hide the text element. This issue is to ask for a property, in order to do that on the blocks.json file.

Product Images - First Image on Desktop won't zoom out.

Describe the bug
On Desktop only, after zoom in the first product image, it won't zoom out, until the user clicks on other images, then it works properly.

To Reproduce
Steps to reproduce the behavior:

  1. Go to www.bennemann.com.br
  2. Click on any product
  3. Zoom in the image with one click, and try to zoom out with another click.
  4. See error

Expected behavior
Expected the zoom to work properly, zooming in and zooming out.

[Availability Subscriber] - User Language

Is your feature request related to a problem? Please describe.

When the customer register for the availability notification, the current language is not saved in the AS entity.
This means that, when there is a change in the product inventory, the system is unable to know in which language the customer needs to receive the email and the default one is always chosen.

Describe the solution you'd like
To solve the issue, we could save the language / locale in the AS entity as soon as the customer subscribes for the availability notification and use that infrormation in order to trigger the email in the correct language.
This way, any VETX account will be able to use this data to send the notification in the correct language in any multu-language store.
Also, it would be a good idea to also save the sales policy the customer belongs to, in order to only send the notification to the customer when the inventory changes in a warehouse which has a langing dock tied to that sales policy.

Newsletter more inputs

In newsletter most of times we need to get the name of the client who is subscribing, and also, he must accept some terms

I have made a fork and improved some optional fields for those situations, but, when I register the newsletter, thus the network request return 200, I can't find the register on masterdata, anyone knows where is registered those infos?

Eu gostaria de aprender a implementar um componente custom do absoluto zero

Olá a todos! Como vão?
Eu sou novo no VTEX IO, e conclui o curso lançado pela VTEX no GitHub, nos ensinando a trabalhar com os componentes nativos do VTEX IO. Porém eu não tenho a menor ideia de como desenvolver um componente custom do zero. Eu conheço React e já desenvolvi usando a ferramente, mas não tenho a menor ideia de como criar um nó na página para importar meu componente. Como criar a estrutura e fazer a plataforma importar meu arquivo. Outro detalhe é que já inspecionei toda a documentação da VTEX procurando por essa informação. Por favor me ajudem!

Carousel bug in product-images

Describe the bug
When using the product-images block with displayMode "carousel" which is the default value, we get an error that seems to be related to the fact that the HTML is not loaded when the JS runs - if we change it to "list" instead, the issue is fixed

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://carouselbug--vetrob2c.myvtex.com/bravecto-10---20-kg-1514/p (you need an approved account to do so, somehow the issue doesn't reproduce for not-logged-in users) but I attached a video below to see the flow
  2. Click on a product from the shelf just above the footer (opening it in another tab will not cause the error to appear, only if the product is opened in the same tab)
  3. See error (if you hit refresh in your browser, the error disappears)

Expected behavior
Error should not appear and the product details should render

Screenshots

carousel_bug.mp4

Desktop (please complete the following information):

  • OS: Ubuntu / Android / Mac / Windows (happens on all)
  • Browser: Chrome / Firefox
  • Version (ALL)

Smartphone (please complete the following information):

  • Device: IOS / Android (ALL)
  • OS: (ALL)
  • Browser (ALL)
  • Version (ALL)

Buy button - Enable run functions

Is your feature request related to a problem? Please describe.
We have some difficulties in tracking native VTEX IO components. Example: collect clicks on the buy button.

Describe the solution you'd like
Enable execution of functions.
Example: onClick={() => this.buyButtonTracking(skuItems[0].skuId, productName, commertialOffer.Price, '1')}

Additional context
image

snippets for developers

Is your feature request related to a problem? Please describe.

whenever I need to know what property the component receives I need to go to the documentation to check it, and this creates a bad development experience

Describe the solution you'd like

I wish there were a set of snippets for VSCode that would assist in development, the intellisense and auto complete features are very useful

example:

  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "VTEX Store Framework",
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "font": "t-heading-1"
    }
  }
}

how do i know if textAlignment receives LEFT, CENTER or RIGHT

showing only in the documentation

https://vtex.io/docs/components/all/[email protected]/

I would like a simpler solution for this

Describe alternatives you've considered

Other types of auto complete are also valid

Thanks very much

Configuration to change product thumbnails - ProductImages

Is your feature request related to a problem? Please describe.

Describe the solution you'd like
Add a configuration into ProductImages to define where the thumbnails will be displayed, can be left, right or below the selected product image.

Describe alternatives you've considered
This can be resolved if you add a props to receive the strings left, right or below and make a component to render one of them, like the app product-summary render the "normal" and "inline" components.

Additional context

Create a Component to Show Brands or Other Items

Is your feature request related to a problem? Please describe.
We need to show brands as a gallery of items or as a carousel in the homepage.

Describe the solution you'd like
We can come up as a generic type of component which supports the above display modes as well as the other facilities mentioned in this issue.

Describe alternatives you've considered
We can change the CategoriesHighlights to be a generic component.

Additional context
This issue is related to this.

Collapse optional in product description.

Is your feature request related to a problem? Please describe.
Adding the collapse part as optional with props would open a lot of customization for that component.

Describe the solution you'd like
Add this part in a renderable context using a boolean.

Missing reference for AddressInfo component wrapped by injectIntl

I am trying to render the following user address component wrapped by injectIntl.

https://github.com/vtex-apps/store-components/blob/58acbbd9ee7b4f0c87f84682a321fd1439a08a43/react/components/UserAddress/AddressInfo.js

But I am loosing the reference component and getting and render error:

This is happening when I try to use the component inside another that I am building:

import '../index.css';
import React from 'react';
import UserAddress from 'vtex.store-components/UserAddress';
import { Provider } from 'vtex.store-resources/OrderFormContext';

function PreferencesModalAddressComponent(props) {
  return (
    <div>
      <Provider>
        <UserAddress></UserAddress>
      </Provider>
    </div>
  );
}

export default PreferencesModalAddressComponent;

Expected behavior
Render the component.

Screenshots
Vtex-io

Desktop (please complete the following information):

  • Browser Chrome
  • Version 85.0.4183.83 (Official Build) (64-bit)

Versión of dependences

"vtex.store-components": "3.x",
"vtex.store-resources": "0.x",

SearchBar problems with inputType=search

Describe the bug
When inputType is set to search, displayMode and openAutocompleteOnFocus won't work.

To Reproduce
Steps to reproduce the behavior:

  1. set search-bar inputType prop as search
  2. enable openAutocompleteOnFocus and change displayMode
  3. See problems

"props": { "openAutocompleteOnFocus": true, "displayMode": "search-and-clear-buttons", "inputType": "search" }

Expected behavior
openAutocompleteOnFocus should work normally, instead it only opens top searches briefly, when you start typing.
displayMode should change the style, instead it does nothing (visibly, at least).

Using vtex.store-components:product-brand does not allow props or custom identifier

Describe the bug
When using "vtex.product-list" and "vtex.store-components", I get an error for the product-name & product-brand blocks:

"You're trying to reference a product-brand block, but two or more dependencies declare names that match that and I don't know which one you want. Please specify the app name by writing one of these:
vtex.product-list:product-brand
vtex.store-components:product-brand"

The problem is that when using the blocks this way (vtex.product-list:product-brand for exp.), the don't accept props & custom identifier anymore. For example:

"vtex.store-components:product-brand": { "props": { "displayMode": "text", "blockClass":"product-brand-produs" } },

The block above ignores it's props and if I try to use "vtex.store-components:product-brand#custom" it throughs an error that the block is not defined.

To Reproduce
Steps to reproduce the behavior:

  1. Add "vtex.product-list" and "vtex.store-components" as dependencies to the manifes
  2. Try to use the product-brand block in the product page

Expected behavior
Behave normal, like the good old times when "product-list" was not a dependency.

Screenshots
image

Additional context
Workspace 'develop' on account 'dacris'

sku selector with name and price

User Stories

As a customer, want to see the variation name and price on the dropdown selection in a product shelf.

As a developer, I need to have a prop on the sku-selector block to indicate that the variation's name and the price will be shown on the variation selection.

As an e-commerce owner, I want to show the product variation's name and the price on the variation selection in order to show the user all possibilities and have a short user journey.

Layout

Front-end

image

[3.x] AvailabilitySubscriber: document id field cannot be null/undefined

Describe the bug
The AvailabilitySubscriber component send a updateDocument mutation without id and this causes a error because id is required by updateDocument mutation from vtex.store-graphql

To Reproduce
Steps to reproduce the behavior:

  1. Go to a unavailable product
  2. Fill the avaliability form
  3. Submit
  4. See the error on network

Expected behavior
The form shoud be sent

Screenshots
1- (network error): https://prnt.sc/omk1y3
2- (updateDocument mutation): https://prnt.sc/omk2ik

Desktop (please complete the following information):

  • Version 3.57.3

Product Price

Is your feature request related to a problem? Please describe.
I need to display the currency symbol with a different font size like is show in the image
F8AE9147-E242-4EE0-9EE5-1114F85FF30D

Describe the solution you'd like
Create a prop in product-list-price / product-selling-price to enable/disable currency symbol display.

[2.x] Error on AvailabilitySubscriber mutation

Describe the bug
The mutation is rising an error when we click on the button "Avise-me quando chegar" about the

To Reproduce
On a store v1, that uses this component on the last version (v2.6.10) we are receiving a mutation error because the type of the $acronym param must be "String!" instead of "String":

errors: [{message: "Variable "$acronym" of type "String" used in position expecting type "String!".",…}]
0: {message: "Variable "$acronym" of type "String" used in position expecting type "String!".",…}
extensions: {code: "GRAPHQL_VALIDATION_FAILED"}
locations: [{line: 1, column: 32}, {line: 2, column: 68}]
message: "Variable "$acronym" of type "String" used in position expecting type "String!"."

We cannot use the v3.X component, because the store is v1, not v2 and we cannot use the new version.

Expected behavior
No graphql error. For this, is needed to replace on this file the first line to add the "exclamation" on the String type to be compatible with updateDocument mutation:
https://github.com/vtex-apps/store-components/blob/v2.6.10/react/components/AvailabilitySubscriber/mutations/addToAvailabilitySubscriberMutation.gql
mutation availabilitySubscribe($acronym: String!, $document: DocumentInput)

Also, we need more documentation about how is working this. We deduce that we must create a "AS" entity on master data with the same fields that are here:
https://github.com/vtex-apps/store-components/blob/master/react/components/AvailabilitySubscriber/README.md#data

But, what is the function of that? How we can sure about the mail that is sended when the product has stock?

Screenshots
image

image

[search-bar] Search action on button

Is your feature request related to a problem? Please describe.
We have results on search-bar only if pressing 'enter' key and on button only a 'clear input' action.

Describe the solution you'd like
On button, add a option to add a 'click and search' action.

Describe alternatives you've considered
Passing a prop to button, add a new function to make this button 'clickable' and keeping your default action on 'enter' key press.

Additional context
Captura de Tela 2019-06-07 às 09 52 46
Captura de Tela 2019-06-07 às 09 52 55

Add to Cart button border-radius

Describe the bug
setting border-radius on a vtex-add-to-cart-button doesn't work

To Reproduce

// vtex.add-to-cart-button.css
.buttonDataContainer {
  border-radius: 20px;
}

Expected behavior
should have a css handler for setting border on the button, not the div inside it

Desktop (please complete the following information):

  • OS: [MacOS 10.15.3]
  • Browser [Safari]
  • Version [13.0.5]

Additional context
Want to set all buttons site-wide to have border-radius 20px

Lack of class in the validation of the input.

Is your feature request related to a problem? Please describe.
There is no class to handle the error resulting from input validation.

alt text

Describe the solution you'd like
Add a class to handle that message.

Identify the SKU

Is your feature request related to a problem? Please describe.
The sku-selector component renders all variations with the same HTML structure, making it impossible to identify a specific variation as a color.

Describe the solution you'd like
One way to identify sku and its variations (a class based on the sku name)

Describe alternatives you've considered
Develop a proper component to handle SKU selection

Additional context
https://github.com/vtex-apps/store-components/blob/279de2e49b1f2008d99615ca93da774c2d96d55c/react/components/SKUSelector/README.md
https://drive.google.com/open?id=1UlFelvoT5U8RBpi9Ydb5mpSjGE7uUXrK

[info-card] Allow multiple CTAs

Is your feature request related to a problem? Please describe.
CTA link is implemented as a prop instead of using the interfaces and blocks features, so it's not possible to have multiple links, and control it's positioning relative to other elements.

Describe the solution you'd like
Possibility to add CTA links as blocks instead of just a prop, allowing for more than one CTA link.

Describe alternatives you've considered
Have two info-cards, one with the full configuration, and another one with just the extra CTA, and style them to look as one. It's a solution but not a good one by any means.

Additional context
infocard-example

Add component buy together

Is your feature request related to a problem? Please describe.
We would like to know if this component is in the backlog, as it is common in many stores.

Product-description button doesn't work outside the product-details element

Describe the bug
The product-description button was working without the necessity of the main component being a "product-details"children. Now there is no action when the button is clicked.
Example:
https://niazi.myvtex.com/tapete-galant-2-00-x-2-50---sao-carlos/p

To Reproduce
Steps to reproduce the behavior:

  1. Set a component "product-description" anywhere inside the product page.
  2. Go to the product page.
  3. Try to click in the "Ver Mais" button.

Expected behavior
When the button is clicked, the box should show the entire description of the product.

Screenshots
Screenshot_2

Desktop (please complete the following information):

  • OS: [Windows]
  • Browser [Chrome]
  • Version [Chrome 77 on Windows 10]

Smartphone (please complete the following information):

  • Device: [Samsung J7]
  • OS: [Android]
  • Browser [Chrome]
  • Version [Chrome 78 on Android 8.1]

Add More Configuration Options to CategoryHighlights Component

Is your feature request related to a problem? Please describe.
We plan to use the CategoriesHighlights component to render a category gallery in the homepage. We need to

  • pass a link to the category card
  • show the name of each category
  • increase the number of items per row
  • show a section title and a line separator for the highlighted section
  • add an optional display mode to support a shelf

Describe the solution you'd like
The CategoryCard will accept a page/params pair as well as a direct link which in turn will be passed to the Link component to build the href. The card will have a heading (<h3>). There will be a title above the main <div> and a line separator below.
The component will accept 6 and 8 for quantityOfItems so that we can show 6 or 8 items per row.
Based on the configuration of the display mode, we additionally provide support for a shelf-like view, resulting in a new component.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.