# Shipping Simulator

📢 Use this project, [contribute](https://bitbucket.org/osfeladaeplus/shipping-simulator) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Shipping Simulator

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

App para montar a prateleira de Compre Junto

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

### Configuration

1. Adding the `shipping-simulator` as a theme dependency in the `manifest.json` file;

```bash
eplus io add shipping-simulator
```

or

```json
  "dependencies": {
    "{vendor}.shipping-simulator": "0.x"
  }
```

2. Declaring the app's main block in a given theme template or inside another block from the theme.

Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the [Search Result documentation](https://vtex.io/docs/components/all/vtex.search-result@3.56.1/).

| Block name                   | Description |
| ---------------------------- | ----------- |
| `seller-simulate-shipping`   | XXXXX       |
| `shipping-simulator.wrapper` | XXXXX       |
| `shipping-simulator.input`   | XXXXX       |
| `shipping-simulator.button`  | XXXXX       |
| `shipping-simulator.table`   | XXXXX       |
| `shipping-simulator.search`  | XXXXX       |

#### `shipping-simulator.wrapper` props

| Prop name       | Type      | Description | Default value |
| --------------- | --------- | ----------- | ------------- |
| `pricingMode`   | `boolean` |             | `false`       |
| `isProductPage` | `boolean` |             | `true`        |

#### `shipping-simulator.input` props

| Prop name     | Type      | Description                                 | Default value |
| ------------- | --------- | ------------------------------------------- | ------------- |
| `useMaks`     | `boolean` | XXXXXXXX                                    | `true`        |
| `mask`        | `string`  | XXXXXXXX                                    | `99999-999`   |
| `placeholder` | `string`  | XXXXXXXX                                    | `00000-000`   |
| `label`       | `string`  | will split each sku of product in one shelf | `CEP`         |

#### `shipping-simulator.button` props

| Prop name | Type     | Description | Default value |
| --------- | -------- | ----------- | ------------- |
| `text`    | `string` | XXXXXXXX    | `Calcular`    |

#### `shipping-simulator.search` props

| Prop name | Type     | Description | Default value     |
| --------- | -------- | ----------- | ----------------- |
| `text`    | `string` | XXXXXXXX    | `Não sei meu cep` |

usage:

```
{
  {
	"container#shipping-simulator-wrapper": {
		"children": ["{vendor}.shipping-simulator:shipping-simulator.wrapper"],
		"props": {
			"blockClass": "shipping-simulator-wrapper",
			"preventVerticalStretch": true
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.wrapper": {
		"children": ["container#shipping-simulator-wrapper-column"],
		"props": {
			"blockClass": "shipping-simulator-product-page"
		}
	},

	"container#shipping-simulator-wrapper-column": {
		"children": [
			"container#shipping-simulator-first-row",
			"container#shipping-simulator-second-row"
		],
		"props": {
			"blockClass": "shipping-simulator-wrapper-column"
		}
	},

	"container#shipping-simulator-second-row": {
		"children": ["{vendor}.shipping-simulator:shipping-simulator.table"],
		"props": {
			"blockClass": "shipping-simulator-second-row"
		}
	},

	"rich-text#shipping-simulator": {
		"props": {
			"text": "Calcular Frete e prazo",
			"blockClass": "shipping-simulator-title"
		}
	},

	"container#shipping-simulator-first-row": {
		"children": [
			"rich-text#shipping-simulator",
			"container#shipping-simulator-input-submit",
			"{vendor}.shipping-simulator:shipping-simulator.search"
		],
		"props": {
			"blockClass": "shipping-simulator-first-row",
			"preventHorizontalStretch": true,
			"colSizing": "auto",
			"colGap": 6
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.search": {
		"props": {
			"text": "Não sei meu CEP",
			"blockClass": "shipping-simulator-search-postalcode"
		}
	},

	"container#shipping-simulator-input-submit": {
		"children": [
			"{vendor}.shipping-simulator:shipping-simulator.input",
			"{vendor}.shipping-simulator:shipping-simulator.button"
		],
		"props": {
			"blockClass": "shipping-simulator-submit-input"
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.button": {
		"props": {
			"blockClass": "shipping-simulator-button"
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.input": {
		"props": {
			"blockClass": "shipping-simulator-input"
		}
	}
}

}
```

> ⚠️
>
> To select which SKU will take preference over this prop, create a Product (field) specification and assign the value of the desired SKU to be initially set for each product. If the specification doesn't exist or the value is empty, the `preferredSKU` prop will be used as a fallback. For more information, please refer to [this guide](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-configuring-custom-images-for-the-sku-selector).

Remember to also use this Configuration section to **showcase any necessary disclaimer** related to the app and its blocks, such as the different behavior it may display during its configuration.

### Customization

| CSS Handles                    |
| ------------------------------ |
| `container`                    |
| `inputWrapper`                 |
| `shippingCTA`                  |
| `shippingSubmitButton`         |
| `shippingSubmitButtonLabel`    |
| `shippingContainer`            |
| `shippingFormContainer`        |
| `shippingForm`                 |
| `shippingUnknownPostalWrapper` |
| `shippingUnknownPostalLink`    |
| `StatusIndicatorWrapper`       |
| `StatusIndicatorText`          |
| `StatusIndicatorText--active`  |
| `StatusIndicatorText--success` |
| `StatusIndicatorText--fail`    |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/shipping-simulator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.