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.

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 - [email protected] Raphael Marinho - [email protected]