# Hyvä UI - Order Confirmation - A Clear

[![wysiwyg-support]](https://docs.hyva.io/hyva-ui-library/faqs/cms-components.html)
[![License]](../../../LICENSE.md)
[![Hyva Supported Versions]](https://docs.hyva.io/hyva-ui-library/getting-started.html)
[![Tailwind Supported Versions]](https://tailwindcss.com/)
[![AlpineJS Supported Versions]](https://alpinejs.dev/)
[![Figma]](https://www.figma.com/@hyva)

Enhance your Hyvä Order Success Page with a new UI Component.

This component offers a refreshed look and improved functionality,
creating a smoother post-purchase experience for your customers.

## Usage - CMS

1. Ensure you've installed CMS Tailwind JIT module in your project (see [Requirements](#requirements) below)
2. Copy the contents from `cms-content` into your CMS Block
3. Adjust the content and code to fit your own needs and save
4. Create a widget and make sure to set the Layout Updates to;
   * **Display on:** Specified Page
   * **Page:** One Page Checkout Success
   * **Container:** Order Success Additional Info
5. Refresh the cache

## Usage - Template

1. Copy or merge the following files/folders into your theme:
   * `Magento_Checkout/templates`
   * `Magento_Checkout/layout`
2. Adjust the content and code to fit your own needs and save
3. Create your development or production bundle by running `npm run watch` or `npm run build` in your
   theme's tailwind directory

## Preview

| Type      | Desktop      | Tablet       | Mobile       |
| --------- | ------------ | ------------ | ------------ |
| Default   | ![preview-1] | ![preview-2] | ![preview-3] |
| Logged-in | ![preview-4] | ![preview-5] | ![preview-6] |

[preview-1]: ./media/A-clean.jpg "Preview of Order Confirmation on Desktop View"
[preview-2]: ./media/A-clean-tablet.jpg "Preview of Order Confirmation on Tablet View"
[preview-3]: ./media/A-clean-mobile.jpg "Preview of Order Confirmation on Mobile View"
[preview-4]: ./media/A-clean-logged-in.jpg "Preview of logged-in Order Confirmation on Desktop View"
[preview-5]: ./media/A-clean-tablet-logged-in.jpg "Preview of logged-in Order Confirmation on Tablet View"
[preview-6]: ./media/A-clean-mobile-logged-in.jpg "Preview of logged-in Order Confirmation on Mobile View"

## Requirements

### [CMS Tailwind JIT]

This component works with the [CMS Tailwind JIT] module to seamlessly integrate Tailwind CSS classes into your CMS content.

This module enables direct pasting of `cms-content` contents into CMS pages or blocks,
automatically generating the corresponding Tailwind CSS styles.

For installation instructions, refer to the [CMS Tailwind JIT] module's documentation.

## Notes

The widget (Usage - CMS) only impacts the action list in style and will differ from the screenshots.

The support email can be configured in Magento 2 Admin under: `Stores → Configuration → Store Email Addresses → Customer Support`

## License

Hyvä Themes - https://hyva.io

Copyright © Hyvä Themes B.V 2020-present. All rights reserved.

This product is licensed per Magento install. Please see the LICENSE.md file in the root of this repository for more
information.

[wysiwyg-support]: https://img.shields.io/badge/wysiwyg_support-ffc803?style=for-the-badge
[License]: https://img.shields.io/badge/License-004d32?style=for-the-badge "Link to Hyvä License"
[Figma]: https://img.shields.io/badge/Figma-gray?style=for-the-badge&logo=Figma "Link to Figma"
[CMS Tailwind JIT]: https://docs.hyva.io/hyva-themes/cms/using-tailwind-classes-in-cms-content.html

[Hyva Supported Versions]: https://img.shields.io/badge/Hyv%C3%A4-1.2,_1.3,_1.4-0A23B9?style=for-the-badge&labelColor=0A144B "Hyvä Supported Versions"
[Tailwind Supported Versions]: https://img.shields.io/badge/Tailwind-3-06B6D4?style=for-the-badge&logo=TailwindCSS "Tailwind Supported Versions"
[AlpineJS Supported Versions]: https://img.shields.io/badge/AlpineJS-3-8BC0D0?style=for-the-badge&logo=alpine.js "AlpineJS Supported Versions"