Changelog

Added

• new Element components: ProductTile, ProductListing, Carousel, ModularCart
• new Script tags: data-tipser-product-tile, data-tipser-product-listing, data-tipser-modular-cart-page
• config property modalUi: {inheritStyles: true} removing fixed styles from product and checkout dialog for more convenient application of custom CSS
• Script: added support for attribute
• added cart summary step before checkout step in the dialog
• prefixed with te- the generic class names like label, value, uppercase, sales, regular, colliding with Bootstrap standard class names
• added te-promo-code-toggle css class
• added showBackToCartButton prop to CheckoutProductList component

Changed

• renamed Checkout to CheckoutPage (Elements) and data-tipser-checkout to data-tipser-checkout-page (Script)
• renamed readOnly prop of CheckoutProductList component (defaults to true) with editable (defaults to false) with inverse logic

Fixed

• fixed the problem with promo code not updating Klarna price in Checkout V1
• renamed generic classnames colliding with bootstrap-styled pages
• fixed oversized buy button in checkout
• promo code functionality in checkout is now working correctly
• fixed the problem with wrong product images on the product details page
• fixed useCheckoutContext() hook (now works correctly with both with Klarna and Stripe)
• fixed subtotal price field in checkout

Fixed

• using the correct version of the CSS file by Tipser Script
• fixed the problem with infinite redirect cycle that may happen on the confirmation page when using enableCheckoutV2: true flag with Tipser Widget and customUrls.confirmationUrl

Changed

• displaying 0.00 as prices on empty checkout

Fixed

• promo code savings information in CheckoutSummary (data-tipser-modular-checkout-summary) component is now displaying price ex. tax, as expected, after the delivery address is specifed
• fixed a bug with promo code application error not appearing to the user

Changed

• product variant separator has been changed from "x" to "-" in a various places of the UI, e.g. "S x White" variant name will be now displayed as "S - White"

Changed

• this is the first version 3.x with a set of backwards-incompatible changes that are described in detail on the Tipser Script 3.x Migration Guide and Elements 3.x Migration Guide pages

Fixed

• fixed new lines formatting in product description

,

Fixed

• fixed odd rendering of HTML product descriptions in some cases

,

Fixed

• reset styles of class "label" and "value" colliding with Bootstrap

,

Added

• TipserScript: added support for data-tipser-modular-cart attribute

Changed

• rename Checkout to CheckoutPage

Deprecated

• Checkout component will be removed soon (please use CheckoutPage instead)

Fixed

• changed the generic class names colliding with Bootstrap styles
• removed redundant comma from collapsed address form in checkout

,

Added

• useCartContext hook is now exported

Changed

• trying to call tipser.elements() function more than once will display a warning on the JS console and return a cached instance from the original call
• Unified the product list UX across cart, checkout and confirmation pages

,

Added

• new configuration option under customUrls called cartUrl controlling

Fixed

• Fixed oversized image problem for some specific products

Changed

• Products at the product list are no longer clickable on the default confirmation page

,

Fixed

• Fixed the problem with promo code not updating Klarna price in Checkout V1

,

Added

• te-promo-code-toggle CSS class on the promo code toggle element in the standard checkout for easier hiding it via CSS

Fixed

• Subtotal price is now correctly displayed in Checkout v2 when there is no discounts
• useCheckoutContext() hook is now working correctly even with Checkout v1 being used

,

Fixed

• incorrect rendering of the product image on the default product dialog sometimes on the mobile breakpoint
• too many render cycles of ProductImage component in some circumstances

,

Added

• new config props for AddedToCart component called duration and className
• product brand and variant name to AddedToCart popup

Fixed

• fixed the problem with infinite redirect cycle that may happen on the confirmation page when using enableCheckoutV2: true flag with Tipser Widget and customUrls.confirmationUrl

,

Fixed

• removed delay when rendering Modular Checkout with Tipser Script
• ProductPrice component is not displaying tax information for the US market

Changed

• the currency is no longer displayed on CheckoutProductList component when there is no products in the checkout

,

Fixed

• Fixed the “zip code does not match state” error not being displayed to the user after submitting the delivery address form
• ModularCheckout.Empty section is no longer getting ignored in Checkout V2 when opening the checkout page with an empty cart
• "Added to cart" popup shows the price of the specific variant added instead of of master product price

Changed

• Removed “org. no” row on the checkout merchant summary on the US market

,

Fixed

• Visual errors in ProductThumbnails component
• Modular Checkout not rendering with Tipser Script when checkout module elements are added dynamically

,

Fixed

• Modular Checkout not rendering with Tipser Script when used with enableCheckoutV2 flag enabled

,

Added

• Alternative TipserScript tags: data-tipser-product-tile, data-tipser-product-listing, data-tipser-product-page, data-tipser-product-id, data-tipser-collection, data-tipser-collection-id

Changed

• Unified order summary across the checkout page and confirmation page in the checkout component for US

Fixed

• Modular Checkout not rendering with Tipser Script when used with enableCheckoutV2 flag enabled
• Swiping problem solved in ProductThumbnails with direction: "horizontal"

,

Changed

• The error object returned from failed promises (e.g. from the "internal functions", like addToCart) has now a simple structure of {id: string, message: string}

,

Changed

• The new Tipser Checkout 2.0 API is now enabled only for the users who use the enableCheckoutV2 config option

,

Added

• <ModularCart.Empty> and <ModularCart.NonEmpty> sections to be used within ModularCart

Fixed

• ModularCart displays a loader until the cart data is loaded from the backend, instead of rendering immediately
• ModularCart is sending tw-track events ([action: VIEW: Target: CART], [action: ADD: Target: CART], [action: REMOVE: Target: CART])

,

Added

• ModularCart component with CartProductList and CartSummary subcomponents
• Integration with the more robust Tipser Checkout 2.0 API, that is enabled with enableCheckoutV2 configuration option
• readOnly prop on CheckoutProductList to disable making any modifications to the checkout on the checkout page (disabled by default)
• customs warning displayed on the CheckoutSummary component, when the US checkout has products imported from outside of US

Changed

• On the checkout address state pickers removed the states that are not supported by Tipser (like American Samoa or Guam)
• Checkout stylistic improvement: the pay button now has more width and padding
• "added to cart" popup is being displayed after adding a product to cart even when there is no Cart component on page (before having a Cart component was a hard dependency)

Deprecated

• CheckoutCartProducts and CheckoutCartSummary components. Renamed to CheckoutProductList and CheckoutSummary respectively

,

Changed

• ProductImage component contains only main product image with new props (enableDots, enableSwipe, swipeAnimation, enableArrows)

Added

• ProductThumbnails component for displaying thumbnails in ModularProduct
• ProductTile component as the new official way to render a product tile

Changed

• ProductImage component contains only main product image with new props (enableDots, enableSwipe, swipeAnimation, enableArrows)

Deprecated

• <Product viewMode="compact" /> syntax as a way to render a product tile

Fixed

• Label of the add to cart button is changed to "added to cart" (for a few seconds) when a product is added to cart

,

Fixed

• Resolved the problem with creating Klarna checkout on some specific publisher URLs

,

Added

• ModularProduct and ModularCheckout: Exported useProductContext and useCheckoutContext for external users

Fixed

• Analytic events "product clicked" and "product detail viewed" are now sent every time when product dialog is displayed

,

Fixed

• Brought back the checkout event in the Checkout and ModularCheckout components

,

Added

• Exposed more internal functions: getCartItems and removeFromCart

Changed

• Internal functions addToCart and addToCartAndGoToCheckout are not returning promises

,

Added

• configuration option prePopulatedAddress that makes it possible to prepopulate user's address forms,
• updateConfig function on Tipser Script instance object to update the configuration dynamically.
• Tipser Script: added checkout-delivery-address-change and checkout-billing-address-change HTML

,

Added

• Modular Checkout: hidePayButton prop in CheckoutPayment component
• Modular Checkout: checkoutContext.payment.paymentForm.submit() function is now available allowing to implement custom pay button for Stripe payments

,

Fixed

• Product dialog styles for tablet
• TipserScript: Order of context events. The first checkout-context-change will be sent after checkout-context-ready event.
• Problems with validation in checkout addresses if the fields were auto-completed by the browser
• Analytics: when the user changes the quantity of the items in the cart, sending "add to cart" or "remove to cart" with a proper quantity field
• Modular checkout: submit function exposed from the checkout context now triggers form revalidation.
• Modular checkout: delivery address do not send billing address when the checkbox (billing address same as delivery) is hidden.
• Analytics: "Product purchased" is now being sent to the publisher's code via tw-track event

,

Added

• CheckoutCartProducts now lets the user to enter product quantity larger than 10.
• "Same billing and delivery address" checkout available for ModularCheckout (visible by default, if CheckoutCustomerAddressBilling component is available under CheckoutCustomerAddressBilling, but can be hidden with hideUseAsBillingAddressCheckbox property on CheckoutCustomerAddressBilling element)
• Accepted cart icons in Stripe payment form.
• New prop for CheckoutCustomerAddressDelivery and CheckoutCustomerAddressBilling called submitBehavior (accepted values: "none", "collapse") controlling if the form should collapse after submission
• New prop for CheckoutCustomerAddressBilling called (accepted values: "none", "validDeliveryAddress") controlling if this element should appear right away (if the value is "none") or only after the delivery address form is filled with valid data
• New prop for CheckoutPayment called dependsOn (accepted values: "none", "validAddress") controlling if this element should appear right away (if the value is "none") or only after the address form(s) is filled with valid data
• Padlock icon and loading indicator over the buy button in the CheckoutPaymentStripe element
• useInternalFunctions hook that allows to use addToCart, addToCartAndGoToCheckout, goToProduct and goToCheckout in imperative way
• Tipser Script: ProductPage component available from the HTML syntax via the data-tipser-product-page attribute
• Tipser Script: all React attributes of ModularCheckout and ModularProduct modules have a html counterpart. For example, CheckoutCustomerAddressDelivery element has a React property called hideSubmitButton, which can be controlled by data-tipser-hide-submit-button attribute in HTML
• TipserScript: customer's own "submit" button can be used to submit the billing and delivery address forms in ModularCheckout, using the checkout-context-ready and checkout-context-change HTML events

Changed

• URL hash property from Store component will be collection name instead of collection id.
• CSS class names and styles structure in modular product component.

Fixed

• Add to cart request failure will not cause the white screen anymore.

,

Fixed

• Close button on the dropdown with cart summary

,

Added

• ModularCheckout.Empty section in ModularCheckout that is displayed when there is no product in the checkout

Fixed

• Checkout: when the last product is removed from the cart, Checkout component will display a list of similar products

,

Added

• Tipser Script: Payment status change event that can be used to render modular checkout parts conditionally

Fixed

• Checkout: when the last product is removed from the cart, Checkout component will display a list of similar products
• Resolved an issue with too many shopping cart requests being sent from the Cart component

,

Fixed

• Checkout component will not crash if a user has a product with stock count 0 during the first render

,

Added

• <CheckoutOrderConfirmation>, <CheckoutOrderProcessing and CheckoutLegal components are supported by Tipser Script

Fixed

• Checkout used from Tipser Script works correctly
• Klarna payment in modal works correctly
• Missing billing address form on page does not block the payment form
• Incorrect data in billing address form blocks the payment form
• The checkbox to use delivery address as billing address is not visible in case of modular checkout

,

Added

• Support for className prop for modular checkout components
• Support for className prop for modular product components
• Simplified modular checkout syntax (replaced syntax with just )
• Added helper components to distinguish checkout statuses (ModularCheckout.New, ModularCheckout.Processing and ModularCheckout.Confirmed)

Breaking changes

• ModularProduct component with empty children is no longer supported. Use ProductPage component instead!
• Renamed modular checkout components to have common prefix (e.g. CustomerAddressDelivery renamed to CheckoutCustomerAddressDelivery )
• Split checkout into two components: Checkout and ModularCheckout

Known issues

• Checkout does not work in case of Tipser Script (React version is not affected)
• Klarna payment in modal doesn't work

,

Added

• Stripe checkout is respecting customUrls.checkoutConfirmationUrl config
• Tipser Elements Script: data-tipser-modular-product-id component is emitting two custom HTML events: product-context-ready and product-variant-changed

Changed

• Stripe checkout: the buy button becoming disabled after it has been first clicked (to avoid multiple clicks)

Fixed

• Checkout confirmation page won't crash if re-visited after user's shopping cart has expired

,

Added

• Support for customLabels configuration options for modular components

Changed

• Trying to use Tipser components without a wrapping TipserElementsProvider will now throw an error with a much cleaner error message

,

Added

• New language in config: de-DE-formal
• Error validation for US delivery address in checkout
• Simplified React syntax for modular product
• Html syntax for modular checkout

Changed

• Cart component styles: cart size indicator scales when the size of cart icon is changed
• Cart component class names changed: .te-cart-icon to .te-cart, .tipser-icon-cart to .te-cart-icon.

Fixed

• Cart component now supports className property

,

Changed

• The label "OFF" (like "-20% OFF") on the product view is now translatable

Fixed

• Klarna component shows the correct price after the user modifies the order on the checkout page

,

Changed

• DynamicCollection component now returns product narrowed down to POS whitelisting settings

,

Added

• Sending the "checkout viewed" event to whisperer and GA when the user opens the new checkout view

Changed

• Reduced bundle size by about 50 kBs (gzipped) by switching the implementation of checkout animations from JS to CSS

Fixed

• Overlay with "Update my Cart" button in the modal (when the product quantity / availability changes during the checkout)
• Fixed the problem with the main product image occasionally not appearing on mobile
• Closing modal by pressing Esc button is now possible again

,

Fixed

• Added some missing swedish translations to the new product dialog

,

Changed

• replaced some divs and spans with semantic HTML tags
• default useCustomCSS config option set to true
• [Elements CMS] updated the Contentful client library to the newest version

Fixed

• fixed a visual glitch with slightly larger delivery cost font size on the new product dialog (compared to other fields)

,

Added

• Don't display Details link button when there is no StyleWith component
• Support for className attribute in Product, Collection, Store and CartIcon components
• CartIcon component is now using the top-level class name te-cart-icon (consistent with each other class names)

Changed

• Clicking outside of the new product dialog causes it to close

Deprecated

• the old cart-icon class name of the CartIcon component

Fixed

• Scroll to top of the modal when click on Similar Product
• Inconsistent way of displaying currency in the cart preview overlay

,

Added

• DynamicCollection element that renders product tiles returned by search results

Changed

• Replaced all the clickable div elements in the HTML with button elements (moving towards more semantic HTML)

Fixed

• Removed horizontal scrollbar from the new modal (activated by openOldDialog:false setting)

,

Fixed

• Fixed some minor stylistic issues and added the missing label translations to the new modal (activated by openOldDialog:false setting)

,

Added

• Introduced elements.openProductDialog and elements.openCheckoutDialog in the widget

Fixed

• Cart icon no longer appears in the Klarna Checkout dialog

,

Changed

• Product variant selector in ProductContext component now uses a visually nicer implementation of the dropdowns instead of raw HTML (native) dropdowns

Fixed

• "Show description" link in the ProductContext component now correctly scrolls down to the product description section

,

Fixed

• Fixed the missing "Out of stock" label on the add to cart button and not blocking it in some corner cases on the Product with viewMode="full" component (a regression introduced in the previous version)