Elements and Script Changelog

Changelog

All notable changes to Tipser Elements project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

v3.1.4

2021-09-24

Changed

  • Added more payment option icons in the cart phase

Fixed

  • Solved the problem with PayPal not appearing on production

v3.1.3

2021-09-22

Added

  • Support for data-tipser-modular-cart-express-payment and data-tipser-modular-checkout-payment components in the HTML syntax

v3.1.2

2021-09-21

Changed

  • Merchant logos are now in rounded shape
  • Improved behavior and styles for the "Pay" button on the Stripe payment module
  • getCartItems function returns cached results is no cart changes occured as a result of the user action

v3.1.1

2021-09-15

Fixed

  • Icons on cart page have correct sizes

v3.1.0

2021-09-15

Added

  • CartExpressPayment available in ModularCart
  • CartExpressPayment available on CartPage when flag enableExpressPaymentsOnCartPage = true is in config
  • CartGoToCheckoutButton available in ModularCart
  • CheckoutPaymentMethodSelector available in ModularCheckout
  • CheckoutPaymentMethodSelector available on CheckoutPage when enablePaymentSelectorOnCheckoutPage = true flag is in config

Changed

  • Native variant selector contains stock counts next to the variants

Fixed

  • Added missing className prop on part of the components
  • Long variant names are cut with ellipsis, and they do not break the layout down

v3.0.26

2021-08-12

Fixed

  • Fixed the problem with incorrect layout of checkout
  • Fixed object-fit setting

v3.0.25

2021-08-10

Added

  • Introduced a pilot version of PayPal payments for the US market
  • Displaying merchant logos (if available) next to the package header in the CartPage and CheckoutPage components

Fixed

  • Incorrect behavior of product thumbnails on the ProductListing and ProductPage components (they were not occupying the full available space)
  • The month name on the confirmation page is now using the proper locale

Changed

  • Changed the icons on the order confirmation page to cleaner versions
  • Introduced a better way to present the package details (the section that is expanding after clicking on a package header) on the CartPage and CheckoutPage components

v3.0.24

2021-07-27

Changed

  • Increased the speed of animation of extending / collapsing description in the product listing component

v3.0.23

2021-07-27

Fixed

  • The support links in the checkout confirmation page are now localised

v3.0.22

2021-07-26

Added

  • Added delivery notification info to the standard checkout on the Swedish market

Changed

  • Changed the way that the product description is presented on the product listing component
  • Responsive layout of the icons at the bottom of the confirmation page

v3.0.21

2021-07-23

Changed

  • POS terms in CheckoutLegal component are now rendered as HTML (it's now possible to use anchors and other HTML syntax)
  • ProductListing component is now displaying expandable description section instead of description overlay

v3.0.20

2021-07-20

Added

  • included merchant name in several places on the shopping UX
  • exported useCartContext hook for accessing the cart context inside ModularCart component
  • introduced disableEmptyCartRecommendations prop to the CheckoutPage component

Fixed

  • cart size indicator animation on the CartIcon component is triggered every time a product is added to the cart (not only the first time)

v3.0.19

2021-07-16

Fixed

  • Fixed a problem with confirmation page not appearing for embedded checkout with Klarna
  • Products list on the confirmation page is no longer editable
  • Fixed the tax value on the checkout confirmation page after refreshing the page

v3.0.18

2021-07-15

Changed

  • TipserScript: styles are appended to the head elements instead of body
  • UX: items number is no longer displayed in the "summary" section of the standard checkout (there was no need to display it twice)

v3.0.17

2021-07-13

Added

  • introduced updatePosData() internal function
  • default styles to the cart phase of Tipser dialog (unless inheritStyles: true option is used)

Changed

  • Changed the position and translation of the "Edit cart" button in the cart phasse

Fixed

  • Fixed an occasional problem with incorrect products appearing in the color relation section

v3.0.16

2021-07-09

Fixed

  • Validation of the state field in the delivery form works correctly after refreshing the checkout page
  • Fixed Stripe checkout form occasionally crashing when the browser window is resized

v3.0.15

2021-07-07

Added

  • trackProductImpression internal function to track product impressions manually

Fixed

  • fixed product tile styles
  • product tile and product listing components are now sending impression events correctly

v3.0.14

2021-06-28

Added

  • better validation of the phone number in the checkout address form

v3.0.13

2021-06-18

Added

  • Possibility to disable the click action on product item in ModularCart component by disableProductClickAction prop (Elements) and data-tipser-modular-cart-disable-product-click-action attribute (Script)

v3.0.12

2021-06-17

Fixed

  • Gotham font import for inheritStyles: false option
  • Updating cart view after adding item to cart from internal function

Changed

  • Increased default z-indexes for the Tipser Dialog so that it's always closable

v3.0.11

2021-06-14

Fixed

  • Variant dropdown auto-opening issue on React 17

v3.0.10

2021-06-11

Fixed

  • Solved the issue with submitting delivery address on checkout introduced by 3.0.9
  • Checkout address form submit issue introduced in 3.0.9

v3.0.9

2021-06-11

Fixed

  • Tipser Script: Dynamic adding of modular product child components works correctly
  • Removed US payment provider logos from the EU checkout pages
  • Restored the "edit cart" button on the checkout page
  • Fixed CartIcon button not reacting to click after Tipser modal was open for a specific customer environment

v3.0.8

2021-06-03

Fixed

  • Using CheckoutCustomerAddressDelivery and CheckoutPaymentRequestButton together doesn't cause problems with selecting shipping address on payment request window

v3.0.7

2021-05-31

Fixed

  • Customer data is available on confirmation page after payment using CheckoutPaymentRequestButton component
  • Tax calculation works correctly in case of combining external address form and CheckoutPaymentRequestButton

v3.0.6

2021-05-26

Added

  • lang config option impacts Klarna Checkout language
  • variantId field added to checkout-related tw-track events
  • support for "preowned" label in product-related components
  • CartPage component: syncing cart between browser tabs

Fixed

  • CheckoutPaymentRequestButton no longer crashes with useStandaloneAddressForm=true prop
  • Purchase tw-track event is now being correctly send in Checkout 2.0 after successful transaction

v3.0.5

2021-05-19

Added

  • CheckoutPaymentRequestButton component (to be used in ModularCheckout context) displaying ApplePay or GooglePay payment option, depending on the environment
  • label for pre-owned products in ProductPage

v3.0.4

2021-05-19

Fixed

  • fixed odd rendering of HTML product descriptions in some cases
  • fixed handling of customUrl.checkoutConfirmationUrl when custom history implementation from react-router 5 is provided

v3.0.3

2021-05-12

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

v3.0.2

2021-04-19

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

v3.0.1

2021-04-15

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"

v3.0.0

2021-04-15

Changed

v2.3.30

2021-07-23

Added

  • delivery notification info on Swedish checkout

,

v2.3.29

2021-07-20

Added

  • pos terms are rendered as HTML code

,

v2.3.28

2021-07-15

Changed

  • updated the analytics payloads

,

v2.3.27

2021-07-07

Changed

  • updated the analytics payloads

,

v2.3.26

2021-06-29

Changed

  • ProductTile and ProductListing components are now sending impression events

,

v2.3.25

2021-06-29

Added

  • trackProductImpression internal function to allow Tipser impressions tracking for customers building their own product tiles

,

v2.3.25

2021-06-28

Changed

  • changed the way article field is formatted in the "add to cart" request to the Tisper API

,

v2.3.24

2021-06-18

Changed

  • addToCart internal function now sends "product click", "product description" events to analytics

,

v2.3.23

2021-05-26

Added

  • the lang config option impacts the Klarna locale
  • sending variantId in tw-track events

Fixed

  • product details info styles fixed on Safari

,

v2.3.22

2021-05-17

Added

  • CheckoutPaymentRequestButton component with Apple Pay and Google Pay support

Fixed

  • finalizing checkout is now possible when the billing address form is missing in ModularCheckout

,

v2.3.21

2021-05-17

Fixed

  • fixed new lines formatting in product description

,

v2.3.20

2021-05-15

Fixed

  • fixed odd rendering of HTML product descriptions in some cases

,

v2.3.19

2021-05-13

Fixed

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

,

v2.3.18

2021-05-12

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

,

v2.3.17

2021-04-28

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

,

v2.3.16

2021-04-27

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

,

v2.3.15

2021-04-27

Fixed

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

,

v2.3.14

2021-04-26

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

,

v2.3.11

2021-04-21

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

,

v2.3.10

2021-04-19

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

,

v2.3.9

2021-04-13

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

,

v2.3.8

2021-04-12

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

,

v2.3.7

2021-04-08

Fixed

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

,

v2.3.6

2021-04-08

Fixed

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

,

v2.3.5

2021-04-08

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"

,

v2.3.4

2021-04-01

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}

,

v2.3.3

2021-03-31

Changed

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

,

v2.3.2

2021-03-30

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])

,

v2.3.0

2021-03-26

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

,

v2.2.14

2021-03-05

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

,

v2.2.13

2021-02-24

Fixed

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

,

v2.2.12

2021-02-22

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

,

v2.2.11

2021-02-22

Fixed

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

,

v2.2.10

2021-02-19

Added

  • Exposed more internal functions: getCartItems and removeFromCart

Changed

  • Internal functions addToCart and addToCartAndGoToCheckout are not returning promises

,

v2.2.9

2021-02-17

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

,

v2.2.8

2021-02-15

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

,

v2.2.7

2021-02-15

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

,

v2.2.6

2021-02-04

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.

,

v2.2.5

2021-01-25

Fixed

  • Close button on the dropdown with cart summary

,

v2.2.4

2021-01-22

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

,

v2.2.3

2021-01-21

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

,

v2.2.2

2021-01-21

Fixed

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

,

v2.2.1

2021-01-20

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

,

v2.2.0

2021-01-18

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

,

v2.1.69

2021-01-14

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

,

v2.1.68

2021-01-08

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

,

v2.1.67

2021-01-05

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

,

v2.1.66

2020-12-21

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

,

v2.1.65

2020-12-17

Changed

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

,

v2.1.64

2020-12-17

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

,

v2.1.63

2020-12-10

Fixed

  • Added some missing swedish translations to the new product dialog

,

v2.1.62

2020-12-10

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)

,

v2.1.61

2020-12-09

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

,

v2.1.60

2020-12-02

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)

,

v2.1.57

2020-11-26

Fixed

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

,

v2.1.56

2020-11-26

Added

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

Fixed

  • Cart icon no longer appears in the Klarna Checkout dialog

,

v2.1.54

2020-11-25

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

,

v2.1.53

2020-11-19

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)