@faststore/core 0.3.2 → 0.3.3

package/@generated/graphql/index.ts

@@ -82,6 +82,43 @@ export type Scalars = {
   VariantsByName: any
 }
 
+/** Address information. */
+export type Address = {
+  /** Address city */
+  city: Maybe<Scalars['String']>
+  /** Address complement */
+  complement: Maybe<Scalars['String']>
+  /** Address country */
+  country: Maybe<Scalars['String']>
+  /** Address geoCoordinates */
+  geoCoordinates: Maybe<Array<Maybe<Scalars['Float']>>>
+  /** Address neighborhood */
+  neighborhood: Maybe<Scalars['String']>
+  /** Address number */
+  number: Maybe<Scalars['String']>
+  /** Address postal code */
+  postalCode: Maybe<Scalars['String']>
+  /** Address reference */
+  reference: Maybe<Scalars['String']>
+  /** Address state */
+  state: Maybe<Scalars['String']>
+  /** Address street */
+  street: Maybe<Scalars['String']>
+}
+
+export type DeliveryIds = {
+  /** DeliveryIds courier id */
+  courierId: Maybe<Scalars['String']>
+  /** DeliveryIds courier name */
+  courierName: Maybe<Scalars['String']>
+  /** DeliveryIds dock id */
+  dockId: Maybe<Scalars['String']>
+  /** DeliveryIds quantity */
+  quantity: Maybe<Scalars['Int']>
+  /** DeliveryIds warehouse id */
+  warehouseId: Maybe<Scalars['String']>
+}
+
 /** Person data input to the newsletter. */
 export type IPersonNewsletter = {
   /** Person's email. */
@@ -90,6 +127,16 @@ export type IPersonNewsletter = {
   name: Scalars['String']
 }
 
+/** Shipping Simulation item input. */
+export type IShippingItem = {
+  /** ShippingItem ID / Sku. */
+  id: Scalars['String']
+  /** Number of items. */
+  quantity: Scalars['Int']
+  /** Seller responsible for the ShippingItem. */
+  seller: Scalars['String']
+}
+
 /** Shopping cart input. */
 export type IStoreCart = {
   /** Order information, including `orderNumber` and `acceptedOffer`. */
@@ -198,6 +245,66 @@ export type IStoreSession = {
   postalCode: InputMaybe<Scalars['String']>
 }
 
+export type LogisticsInfo = {
+  /** LogisticsInfo itemIndex. */
+  itemIndex: Maybe<Scalars['String']>
+  /** LogisticsInfo selectedSla. */
+  selectedSla: Maybe<Scalars['String']>
+  /** List of LogisticsInfo ShippingSLA. */
+  slas: Maybe<Array<Maybe<ShippingSla>>>
+}
+
+/** Shipping Simulation Logistic Item. */
+export type LogisticsItem = {
+  /** LogisticsItem availability. */
+  availability: Maybe<Scalars['String']>
+  /** LogisticsItem ID / Sku. */
+  id: Maybe<Scalars['String']>
+  /** LogisticsItem listPrice. */
+  listPrice: Maybe<Scalars['Int']>
+  /** LogisticsItem measurementUnit. */
+  measurementUnit: Maybe<Scalars['String']>
+  /** LogisticsItem price. */
+  price: Maybe<Scalars['Int']>
+  /** Next date in which price is scheduled to change. If there is no scheduled change, this will be set a year in the future from current time. */
+  priceValidUntil: Maybe<Scalars['String']>
+  /** Number of items. */
+  quantity: Maybe<Scalars['Int']>
+  requestIndex: Maybe<Scalars['Int']>
+  /** LogisticsItem rewardValue. */
+  rewardValue: Maybe<Scalars['Int']>
+  /** Seller responsible for the ShippingItem. */
+  seller: Maybe<Scalars['String']>
+  /** List of Sellers. */
+  sellerChain: Maybe<Array<Maybe<Scalars['String']>>>
+  /** LogisticsItem sellingPrice. */
+  sellingPrice: Maybe<Scalars['Int']>
+  /** LogisticsItem tax. */
+  tax: Maybe<Scalars['Int']>
+  /** LogisticsItem unitMultiplier. */
+  unitMultiplier: Maybe<Scalars['Int']>
+}
+
+export type MessageFields = {
+  /** MessageFields ean. */
+  ean: Maybe<Scalars['String']>
+  /** MessageFields item index. */
+  itemIndex: Maybe<Scalars['String']>
+  /** MessageFields sku name. */
+  skuName: Maybe<Scalars['String']>
+}
+
+export type MessageInfo = {
+  /** MessageInfo code. */
+  code: Maybe<Scalars['String']>
+  /** MessageInfo fields. */
+  fields: Maybe<MessageFields>
+  /** MessageInfo status. */
+  status: Maybe<Scalars['String']>
+  /** MessageInfo text. */
+  text: Maybe<Scalars['String']>
+}
+
 export type Mutation = {
   /** Subscribes a new person to the newsletter list. */
   subscribeToNewsletter: Maybe<PersonNewsletter>
@@ -227,6 +334,48 @@ export type PersonNewsletter = {
   id: Scalars['String']
 }
 
+export type PickupAddress = {
+  /** PickupAddress address id. */
+  addressId: Maybe<Scalars['String']>
+  /** PickupAddress address type. */
+  addressType: Maybe<Scalars['String']>
+  /** PickupAddress city. */
+  city: Maybe<Scalars['String']>
+  /** PickupAddress complement. */
+  complement: Maybe<Scalars['String']>
+  /** PickupAddress country. */
+  country: Maybe<Scalars['String']>
+  /** PickupAddress geo coordinates. */
+  geoCoordinates: Maybe<Array<Maybe<Scalars['Float']>>>
+  /** PickupAddress neighborhood. */
+  neighborhood: Maybe<Scalars['String']>
+  /** PickupAddress number. */
+  number: Maybe<Scalars['String']>
+  /** PickupAddress postal code. */
+  postalCode: Maybe<Scalars['String']>
+  /** PickupAddress receiver name. */
+  receiverName: Maybe<Scalars['String']>
+  /** PickupAddress reference. */
+  reference: Maybe<Scalars['String']>
+  /** PickupAddress state. */
+  state: Maybe<Scalars['String']>
+  /** PickupAddress street. */
+  street: Maybe<Scalars['String']>
+}
+
+export type PickupStoreInfo = {
+  /** PickupStoreInfo additional information. */
+  additionalInfo: Maybe<Scalars['String']>
+  /** PickupStoreInfo address. */
+  address: Maybe<PickupAddress>
+  /** PickupStoreInfo dock id. */
+  dockId: Maybe<Scalars['String']>
+  /** PickupStoreInfo friendly name. */
+  friendlyName: Maybe<Scalars['String']>
+  /** Information if the store has pickup enable. */
+  isPickupStore: Maybe<Scalars['Boolean']>
+}
+
 export type Query = {
   /** Returns information about all collections. */
   allCollections: StoreCollectionConnection
@@ -238,6 +387,8 @@ export type Query = {
   product: StoreProduct
   /** Returns the result of a product, facet, or suggestion search. */
   search: StoreSearchResult
+  /** Returns information about shipping simulation. */
+  shipping: Maybe<ShippingData>
 }
 
 export type QueryAllCollectionsArgs = {
@@ -266,6 +417,56 @@ export type QuerySearchArgs = {
   term?: InputMaybe<Scalars['String']>
 }
 
+export type QueryShippingArgs = {
+  country: Scalars['String']
+  items: Array<IShippingItem>
+  postalCode: Scalars['String']
+}
+
+/** Shipping Simulation information. */
+export type ShippingData = {
+  /** Address information. */
+  address: Maybe<Address>
+  /** List of LogisticsItem. */
+  items: Maybe<Array<Maybe<LogisticsItem>>>
+  /** List of LogisticsInfo. */
+  logisticsInfo: Maybe<Array<Maybe<LogisticsInfo>>>
+  /** List of MessageInfo. */
+  messages: Maybe<Array<Maybe<MessageInfo>>>
+}
+
+export type ShippingSla = {
+  /** ShippingSLA carrier. */
+  carrier: Maybe<Scalars['String']>
+  /** ShippingSLA delivery channel. */
+  deliveryChannel: Maybe<Scalars['String']>
+  /** List of ShippingSLA delivery ids. */
+  deliveryIds: Maybe<Array<Maybe<DeliveryIds>>>
+  /** ShippingSLA friendly name. */
+  friendlyName: Maybe<Scalars['String']>
+  /** ShippingSLA id. */
+  id: Maybe<Scalars['String']>
+  /**
+   * ShippingSLA localized shipping estimate.
+   * Note: this will always return a localized string for locale `en-US`.
+   */
+  localizedEstimates: Maybe<Scalars['String']>
+  /** ShippingSLA name. */
+  name: Maybe<Scalars['String']>
+  /** ShippingSLA pickup distance. */
+  pickupDistance: Maybe<Scalars['Float']>
+  /** ShippingSLA pickup point id. */
+  pickupPointId: Maybe<Scalars['String']>
+  /** ShippingSLA pickup store info. */
+  pickupStoreInfo: Maybe<PickupStoreInfo>
+  /** ShippingSLA price. */
+  price: Maybe<Scalars['Float']>
+  /** ShippingSLA shipping estimate. */
+  shippingEstimate: Maybe<Scalars['String']>
+  /** ShippingSLA shipping estimate date. */
+  shippingEstimateDate: Maybe<Scalars['String']>
+}
+
 export type SkuVariants = {
   /** SKU property values for the current SKU. */
   activeVariations: Maybe<Scalars['ActiveVariations']>
@@ -1131,3 +1332,23 @@ export type ValidateSessionMutation = {
     } | null
   } | null
 }
+
+export type ShippingSimulationQueryQueryVariables = Exact<{
+  postalCode: Scalars['String']
+  country: Scalars['String']
+  items: Array<IShippingItem> | IShippingItem
+}>
+
+export type ShippingSimulationQueryQuery = {
+  shipping: {
+    logisticsInfo: Array<{
+      slas: Array<{
+        carrier: string | null
+        price: number | null
+        shippingEstimate: string | null
+        localizedEstimates: string | null
+      } | null> | null
+    } | null> | null
+    address: { city: string | null; neighborhood: string | null } | null
+  } | null
+}

package/@generated/graphql/persisted.json

@@ -8,5 +8,6 @@
   "ProductsQuery": "query ProductsQuery($first: Int!, $after: String, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\n  search(\n    first: $first\n    after: $after\n    sort: $sort\n    term: $term\n    selectedFacets: $selectedFacets\n  ) {\n    products {\n      pageInfo {\n        totalCount\n      }\n      edges {\n        node {\n          id: productID\n          slug\n          sku\n          brand {\n            brandName: name\n            name\n          }\n          name\n          gtin\n          isVariantOf {\n            productGroupID\n            name\n          }\n          image {\n            url\n            alternateName\n          }\n          offers {\n            lowPrice\n            offers {\n              availability\n              price\n              listPrice\n              quantity\n              seller {\n                identifier\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n",
   "SearchSuggestionsQuery": "query SearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n      products {\n        id: productID\n        slug\n        sku\n        brand {\n          brandName: name\n          name\n        }\n        name\n        gtin\n        isVariantOf {\n          productGroupID\n          name\n        }\n        image {\n          url\n          alternateName\n        }\n        offers {\n          lowPrice\n          offers {\n            availability\n            price\n            listPrice\n            quantity\n            seller {\n              identifier\n            }\n          }\n        }\n      }\n    }\n  }\n}\n",
   "TopSearchSuggestionsQuery": "query TopSearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n    }\n  }\n}\n",
-  "ValidateSession": "mutation ValidateSession($session: IStoreSession!, $search: String!) {\n  validateSession(session: $session, search: $search) {\n    locale\n    channel\n    country\n    postalCode\n    currency {\n      code\n      symbol\n    }\n    person {\n      id\n      email\n      givenName\n      familyName\n    }\n  }\n}\n"
+  "ValidateSession": "mutation ValidateSession($session: IStoreSession!, $search: String!) {\n  validateSession(session: $session, search: $search) {\n    locale\n    channel\n    country\n    postalCode\n    currency {\n      code\n      symbol\n    }\n    person {\n      id\n      email\n      givenName\n      familyName\n    }\n  }\n}\n",
+  "ShippingSimulationQuery": "query ShippingSimulationQuery($postalCode: String!, $country: String!, $items: [IShippingItem!]!) {\n  shipping(items: $items, postalCode: $postalCode, country: $country) {\n    logisticsInfo {\n      slas {\n        carrier\n        price\n        shippingEstimate\n        localizedEstimates\n      }\n    }\n    address {\n      city\n      neighborhood\n    }\n  }\n}\n"
 }

package/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),
 and this project adheres to [Calendar Versioning](https://calver.org/).
 
+### [0.3.3](https://github.com/vtex-sites/nextjs.store/compare/0.3.2...0.3.3) (2022-11-14)
+
+
+### Features
+
+* Shipping Simulation API ([#210](https://github.com/vtex-sites/nextjs.store/issues/210)) ([f391389](https://github.com/vtex-sites/nextjs.store/commit/f3913896261e404d6a93d8bb7e5c805ae00e52a5))
+
 ### [0.3.2](https://github.com/vtex-sites/nextjs.store/compare/0.3.1...0.3.2) (2022-11-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,7 +30,7 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^1.12.17",
+    "@faststore/api": "^1.12.29",
     "@faststore/graphql-utils": "^1.11.8",
     "@faststore/sdk": "^1.11.8",
     "@faststore/ui": "^1.12.23",

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -1,8 +1,9 @@
 import { gql } from '@faststore/graphql-utils'
+import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import { useEffect, useState } from 'react'
-import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 
+import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import OutOfStock from 'src/components/product/OutOfStock'
 import { DiscountBadge } from 'src/components/ui/Badge'
 import Breadcrumb from 'src/components/ui/Breadcrumb'
@@ -12,17 +13,16 @@ import Price from 'src/components/ui/Price'
 import ProductTitle from 'src/components/ui/ProductTitle'
 import QuantitySelector from 'src/components/ui/QuantitySelector'
 import ShippingSimulation from 'src/components/ui/ShippingSimulation'
+import Selectors from 'src/components/ui/SkuSelector'
+import type { AnalyticsItem } from 'src/sdk/analytics/types'
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProduct } from 'src/sdk/product/useProduct'
 import { useSession } from 'src/sdk/session'
-import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
-import type { AnalyticsItem } from 'src/sdk/analytics/types'
-import Selectors from 'src/components/ui/SkuSelector'
 
-import styles from './product-details.module.scss'
-import Section from '../Section'
 import ProductDetailsContent from '../ProducDetailsContent'
+import Section from '../Section'
+import styles from './product-details.module.scss'
 
 interface Props {
   context: ProductDetailsFragment_ProductFragment
@@ -194,6 +194,11 @@ function ProductDetails({ context: staleProduct }: Props) {
           <ShippingSimulation
             data-fs-product-details-section
             data-fs-product-details-shipping
+            shippingItem={{
+              id,
+              quantity: addQuantity,
+              seller: seller.identifier,
+            }}
           />
         </section>
 

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -1,3 +1,4 @@
+import type { IShippingItem } from '@faststore/api'
 import { Table, TableBody, TableCell, TableRow } from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
 
@@ -16,14 +17,19 @@ interface ShippingSimulationProps extends HTMLAttributes<HTMLDivElement> {
    * testing-library, and jest).
    */
   testId?: string
+  /**
+   * Object used for simulating shippings
+   */
+  shippingItem: IShippingItem
 }
 
 function ShippingSimulation({
   testId = 'store-shipping-simulation',
+  shippingItem,
   ...otherProps
 }: ShippingSimulationProps) {
   const { dispatch, input, shippingSimulation, handleSubmit, handleOnInput } =
-    useShippingSimulation()
+    useShippingSimulation(shippingItem)
 
   const {
     postalCode: shippingPostalCode,
@@ -87,14 +93,16 @@ function ShippingSimulation({
                     {option.carrier}
                   </TableCell>
                   <TableCell data-fs-shipping-simulation-table-cell>
-                    {option.estimate}
+                    {option.localizedEstimates}
                   </TableCell>
                   <TableCell data-fs-shipping-simulation-table-cell>
-                    <Price
-                      formatter={formatter}
-                      value={option.price}
-                      SRText="price"
-                    />
+                    {option.price && (
+                      <Price
+                        formatter={formatter}
+                        value={option.price}
+                        SRText="price"
+                      />
+                    )}
                   </TableCell>
                 </TableRow>
               ))}

package/src/components/ui/ShippingSimulation/useShippingSimulation.ts

@@ -1,7 +1,13 @@
 import type { ChangeEvent } from 'react'
 import { useCallback, useEffect, useReducer } from 'react'
 
+import type {
+  IShippingItem,
+  ShippingSimulationQueryQuery,
+  ShippingSla,
+} from '@generated/graphql'
 import { useSession } from 'src/sdk/session'
+import { getShippingSimulation } from 'src/sdk/shipping'
 
 type InputProps = {
   postalCode?: string
@@ -9,15 +15,9 @@ type InputProps = {
   errorMessage?: string
 }
 
-type ShippingOptionProps = {
-  carrier: string
-  estimate: string
-  price: number
-}
-
 type ShippingSimulationProps = {
   location?: string
-  options?: ShippingOptionProps[]
+  options?: ShippingSla[]
 }
 
 type State = {
@@ -42,35 +42,6 @@ type Action =
       type: 'clear'
     }
 
-// TODO Remove Mocked data after API integration
-const mockShippingOptions: ShippingOptionProps[] = [
-  {
-    carrier: 'Regular',
-    estimate: '12 days',
-    price: 21,
-  },
-  {
-    carrier: 'Fedex',
-    estimate: '12 days',
-    price: 23,
-  },
-  {
-    carrier: 'Same day',
-    estimate: '1 day',
-    price: 89,
-  },
-  {
-    carrier: 'DHL',
-    estimate: '1 day',
-    price: 100,
-  },
-]
-
-const mockShippingSimulation: ShippingSimulationProps = {
-  location: 'Street Default — Newark, NY',
-  options: mockShippingOptions,
-}
-
 const createEmptySimulation = () => ({
   input: {
     postalCode: '',
@@ -134,8 +105,21 @@ const reducer = (state: State, action: Action) => {
   }
 }
 
-export const useShippingSimulation = () => {
-  const { postalCode: sessionPostalCode } = useSession()
+function getShippingInformation(
+  shipping: ShippingSimulationQueryQuery['shipping']
+): [string, ShippingSla[]] {
+  const location =
+    [shipping?.address?.neighborhood, shipping?.address?.city]
+      .filter(Boolean)
+      .join(' / ') ?? ''
+
+  const options = shipping?.logisticsInfo?.[0]?.slas ?? []
+
+  return [location, options as ShippingSla[]]
+}
+
+export const useShippingSimulation = (shippingItem: IShippingItem) => {
+  const { postalCode: sessionPostalCode, country } = useSession()
   const [{ input, shippingSimulation }, dispatch] = useReducer(
     reducer,
     null,
@@ -150,28 +134,46 @@ export const useShippingSimulation = () => {
     }
 
     // Use sessionPostalCode if there is no shippingPostalCode
-    // TODO update mock after API integration
-    dispatch({
-      type: 'update',
-      payload: {
-        input: {
-          postalCode: sessionPostalCode,
-          displayClearButton: true,
-          errorMessage: '',
-        },
-        shippingSimulation: {
-          location: mockShippingSimulation?.location,
-          options: mockShippingSimulation?.options ?? [],
+    async function fetchShipping() {
+      const shipping = await getShippingSimulation({
+        country,
+        postalCode: sessionPostalCode ?? '',
+        items: [shippingItem],
+      })
+
+      const [location, options] = getShippingInformation(shipping)
+
+      dispatch({
+        type: 'update',
+        payload: {
+          input: {
+            postalCode: sessionPostalCode ?? '',
+            displayClearButton: true,
+            errorMessage: '',
+          },
+          shippingSimulation: {
+            location,
+            options,
+          },
         },
-      },
-    })
+      })
+    }
+
+    fetchShipping()
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionPostalCode])
 
-  const handleSubmit = useCallback(() => {
+  const handleSubmit = useCallback(async () => {
     try {
-      // TODO update mock after API integration
+      const shipping = await getShippingSimulation({
+        country,
+        postalCode: shippingPostalCode ?? '',
+        items: [shippingItem],
+      })
+
+      const [location, options] = getShippingInformation(shipping)
+
       dispatch({
         type: 'update',
         payload: {
@@ -180,8 +182,8 @@ export const useShippingSimulation = () => {
             errorMessage: '',
           },
           shippingSimulation: {
-            location: `Street from ${shippingPostalCode} Postal Code.`,
-            options: mockShippingOptions ?? [],
+            location,
+            options,
           },
         },
       })

package/src/sdk/shipping/index.ts

@@ -0,0 +1,54 @@
+import type { IShippingItem } from '@faststore/api'
+import { gql } from '@faststore/graphql-utils'
+
+import type {
+  ShippingSimulationQueryQuery as Query,
+  ShippingSimulationQueryQueryVariables as Variables,
+} from '@generated/graphql'
+
+import { request } from '../graphql/request'
+
+const query = gql`
+  query ShippingSimulationQuery(
+    $postalCode: String!
+    $country: String!
+    $items: [IShippingItem!]!
+  ) {
+    shipping(items: $items, postalCode: $postalCode, country: $country) {
+      logisticsInfo {
+        slas {
+          carrier
+          price
+          shippingEstimate
+          localizedEstimates
+        }
+      }
+      address {
+        city
+        neighborhood
+      }
+    }
+  }
+`
+
+export type ShippingQueryData = {
+  items: IShippingItem[]
+  postalCode: string
+  country: string
+}
+
+export const getShippingSimulation = async ({
+  items,
+  postalCode,
+  country,
+}: ShippingQueryData) => {
+  const data = await request<Query, Variables>(query, {
+    items,
+    postalCode,
+    country,
+  })
+
+  return data.shipping
+}
+
+export default getShippingSimulation