@acctglobal/shipping-simulator

Shipping Simmulator

Getting Started

This component can be used anywhere you want in e-commerce, in a responsive and agnostic way. You just need to have React on your project.

How the component looks like:

Installation and usage

To use Image Gallery, you need to install the package via yarn or npm and import it wherever you want to use it.

yarn add @acctglobal/shipping-simmulator
// or npm install

Now you just need to import and use the component.

import ShippingSimulator from '@acctglobal/shipping-simulator';

<ShippingSimulator
  zipValidation={handleZipValidation}
  shippingSimulation={handleShippingSimulation}
  hrefLinks={{
    firstLink: 'https://tools.usps.com/go/ZipLookupAction!input.action',
    secondLink: '/',
  }}
  customTexts={{
    title: 'Delivery',
    buttonLabel: 'Apply',
    dontKnowZip: "I don't know my zip code",
    placeHolder: 'Zip code',
    moreInfo: 'More informations',
    moneyType: '$',
    estimatedTimeMeasure: 'day/s',
    invalidZipCode: 'Invalid zip code. Try again!',
  }}
  items={[
    {
      id,
      quantity: '3',
      seller: '1',
    },
  ]}
/>

Styling

All css selectors

shipping-simulator-container
request-container
shipping-simmulator-title
shipping-form-container
form-input
form-button
dont-know-zip-link
shipping-result-table
table-row
shipping-name
shipping-infos
shipping-time
shipping-price
more-info-link
invalid-zipcode-alert

Props

| Parameter | Type | Description | | :------------------- | :------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | --- | | hrefLinks | HrefLinks | Optional. Object of URLs for component links. | | customTexts | CustomTexts | Mandatory. Object containing custom texts for each component part. | | item | Array | Mandatory. Array contain object with 3 elements [{ id: string, quantity: string, seller: string}]. | | | zipValidation | (zipcode: string) => boolean or Promise<boolean> | Mandatory. Function that will validade zipcode. Need to receive zipcode as string and return a boolean. | | shippingSimulation | (zipcode: string) => ShippingMethodsType or Promise<ShippingMethodsType> | Mandatory. Function that will simulate shipping. Need to receive zipcode as string and return the ShippingMethods. |

Types

HrefLinks

Property	Type	Description
dontKnowZipLink	string	Optional
moreInfoLink	string	Optional

CustomTexts

Property	Type	Description
placeHolder	string	Mandatory
title	string	Mandatory
buttonLabel	string	Mandatory
dontKnowZip	string	Mandatory
moreInfo	string	Mandatory
moneyType	string	Mandatory
estimatedTimeMeasure	string	Mandatory
invalidZipCode	string	Mandatory

ShippingMethodsType

Property	Type	Description
name	string	Mandatory
shippingEstimate	string	Mandatory
price	number	Mandatory

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request
6. And don't forget to update the changelog

Contact

Jonathan Paoroso - [e-mail] Raphael Marinho - [e-mail]