From 2b66861b56d596168b8c3a14175c1a65b193238e Mon Sep 17 00:00:00 2001 From: soufiane Date: Fri, 21 Feb 2025 18:37:52 +0100 Subject: [PATCH] wip #7330 @8:30 --- .../resources/assets/images/icons/valid.svg | 3 + .../resources/assets/images/valid.svg | 6 + .../resources/assets/styles/common/app.styl | 216 +++++++++++++++--- .../assets/styles/common/mixins.styl | 3 + .../assets/styles/components/woocommerce.styl | 8 - .../woocommerce/checkout/form-pay.blade.php | 110 +++++++++ .../woocommerce/checkout/payment.blade.php | 66 ++++++ .../checkout/review-order.blade.php | 197 ++++++++++++++++ .../woocommerce/checkout/thankyou.blade.php | 21 +- 9 files changed, 591 insertions(+), 39 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/valid.svg create mode 100644 wp-content/themes/physioassist/resources/assets/images/valid.svg create mode 100644 wp-content/themes/physioassist/resources/views/woocommerce/checkout/form-pay.blade.php create mode 100644 wp-content/themes/physioassist/resources/views/woocommerce/checkout/payment.blade.php create mode 100644 wp-content/themes/physioassist/resources/views/woocommerce/checkout/review-order.blade.php diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/valid.svg b/wp-content/themes/physioassist/resources/assets/images/icons/valid.svg new file mode 100644 index 00000000..eadb7149 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/valid.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/physioassist/resources/assets/images/valid.svg b/wp-content/themes/physioassist/resources/assets/images/valid.svg new file mode 100644 index 00000000..4616198d --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/valid.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/app.styl b/wp-content/themes/physioassist/resources/assets/styles/common/app.styl index 61e96b08..a38718ea 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/common/app.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/common/app.styl @@ -19,7 +19,9 @@ .hide-on-mobileapp, .related.products, .woocommerce-cart-form .product-price, - &.woocommerce div.product .woocommerce-tabs ul.tabs .additional_information_tab + &.woocommerce div.product .woocommerce-tabs ul.tabs .additional_information_tab, + .woocommerce-info, + .woocommerce-notice display: none // Single product @@ -44,8 +46,10 @@ font-weight: 600 margin-bottom: .3em line-height: 30px - .price * - color: #6CC3EE + .price + font-weight: $semibold + * + color: #6CC3EE &-product-details__short-description p font-size: 18px !important @@ -150,14 +154,44 @@ &:checked::before transform: scale(1) + // Checkbox + input[type="checkbox"] + width: 18px + height: 18px + -webkit-appearance: none + appearance: none + background-color: #fff + margin: 0 + outline: none + display: inline-flex !important + border-radius: 3px + &::before + content: "" + width: 100% + height: 100% + border-radius: 3px + background-repeat: no-repeat + background-position: center + background-size: 12px + border: 1px solid #1B2943 + &:checked::before + content: "" + background-image: url("../images/icons/valid.svg") + border-color: #6CC3EE + background-color: #6CC3EE + form.cart button[type='submit']:not(#qib_id):not(#qib_id):not(_):not(_), - .checkout-button + .checkout-button, + #close-validation width: 100% height: 55px font-size: 18px !important text-transform: initial !important font-weight: 600 background-color: #1B2943 !important + display: flex + align-items: center + justify-content: center .checkout-button padding: 1em 2em !important @@ -203,24 +237,14 @@ .label margin-right: auto - .order-total - display: flex - justify-content: space-between - .label, - [data-title=Total] strong .woocommerce-Price-amount - font-size: 22px - [data-title=Total] - text-align: right - .includes_tax - display: block - - .woocommerce-shipping-totals .label - margin-bottom: 10px + .woocommerce-shipping-totals + padding-bottom: 16px + margin-bottom: 24px + line() + .label + margin-bottom: 10px .woocommerce-shipping-calculator - padding-bottom: 16px - border-bottom: 1px solid #E3E4E7 - margin-bottom: 22px .shipping-calculator-button text-decoration: underline font-size: 16px @@ -242,6 +266,11 @@ font-weight: 600 margin-bottom: 14px + .cart_item + padding-bottom: 16px + margin-bottom: 24px + line() + .cart-subtotal display: flex justify-content: space-between @@ -250,24 +279,159 @@ margin-bottom: 23px font-weight: $semibold + .order-total + display: flex + justify-content: space-between + .label, + [data-title=Total] strong .woocommerce-Price-amount + font-size: 22px + [data-title=Total] + text-align: right + .includes_tax + display: block + .woocommerce ul#shipping_method li margin-bottom: 3px - .woocommerce-billing-fields__field-wrapper + .woocommerce-billing-fields__field-wrapper, + .woocommerce-shipping-fields__field-wrapper, + .woocommerce-checkout-payment-box .form-row width: 100% - .input-text::placeholder - color: #8E94A1 + .wc-stripe-elements-field + padding: 17.7px + border-radius: 28px - .input-text:not(textarea) + .input-text + font-weight: 300 + &::placeholder + color: #8E94A1 + &:not(textarea) white-box(28px) - &#order_comments - border-radius: 24px + + textarea.input-text + white-box(24px) .woocommerce form .form-row label text-transform: initial color: #1B2943 + font-weight: $regular + font-size: 16px + margin: 4px 10px + .woocommerce form .form-row .required + color: #1B2943 + .woocommerce #ship-to-different-address + font-size: 16px + label + display: flex + align-items: center + input + margin-right: 8px + .woocommerce-additional-fields + padding-bottom: 24px + margin-bottom: 24px + border-bottom: 1px solid #E3E4E7 + + #order_review_heading + margin-bottom: 6px + + .woocommerce-checkout-payment-box + background-color: #EAF1F8 + border-radius: 15px + margin-top: 16px + padding: 24px 16px + .payment_methods + border: 0 !important + .wc_payment_method + padding: 0 + border-bottom: 1px solid rgba(#8E94A1,.5) + .place-order + padding: 0 !important + margin: 0 + + .woocommerce-checkout-payment-button + margin-top: 16px + button + background-color: #1b2943 !important + + .woocommerce-terms-and-conditions-wrapper + .woocommerce-terms-and-conditions-checkbox-text a, + .required + color: #356DA8 + .woocommerce-terms-and-conditions-checkbox-text + font-weight: $semibold + a + text-decoration: underline + + .woocommerce-checkout #payment div.payment_box + background: transparent + padding: 0 + margin: 0 + line() + &:before + display: none + .form-row + padding: 0 !important + + label[for=payment_method_stripe] + font-size: 18px + font-weight: $semibold body.validation font-size: 16px + h3 + font-size: 22px + font-weight: $semibold + color: #1B2943 + .woocommerce-cart-summary-card + font-size: 18px + .quantity, small + font-size: 16px + .order-total + font-size: 22px + + .woocommerce-order-overview + white-box(15px) + padding: 16px 24px + + .woocommerce-thankyou-order-message + stroke-dasharray: 1000 + stroke-dashoffset: 1000 + animation: dash 5s linear forwards + text-align: center + margin-bottom: 32px + h3 + max-width: 240px + margin: 0 auto 24px + line-height: normal + + .woocommerce ul.order_details li + float: none + display: flex !important + align-items: baseline + justify-content: space-between + margin: 0 + padding: 0 + border: 0 + text-transform: initial + font-size: 18px + &.method, + &.email + display: none !important + strong + max-width: 156px + font-size: inherit + text-align: right + &:not(:last-child) + margin-bottom: 16px + + body.woocommerce-order-received + font-size: 18px + + .woocommerce ul.order_details + margin: 0 0 1em + +@keyframes dash + to + stroke-dashoffset: 0 diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl b/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl index 865789d8..625b5533 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl @@ -107,3 +107,6 @@ white-box(r) border-radius: r box-shadow: 0 3px 6px #ECF2F8 padding: 16px 24px + +line() + border-bottom: 1px solid #E3E4E7 diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl index ca77485d..bbd3eabd 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl @@ -225,14 +225,6 @@ .woocommerce-order-details margin-top: 1.5em - ul.order_details - padding-left: 0 - - li - strong - margin-top: 0.25em - - // Checkout &-checkout #payment diff --git a/wp-content/themes/physioassist/resources/views/woocommerce/checkout/form-pay.blade.php b/wp-content/themes/physioassist/resources/views/woocommerce/checkout/form-pay.blade.php new file mode 100644 index 00000000..a505dff6 --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/woocommerce/checkout/form-pay.blade.php @@ -0,0 +1,110 @@ +get_order_item_totals(); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited +?> +
+ + + + + + + + + + + get_items() ) > 0 ) : ?> + get_items() as $item_id => $item ) : ?> + + + + + + + + + + + + + + + + + + + +
+ get_name(), $item, false ) ); + + do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, false ); + + wc_display_item_meta( $item ); + + do_action( 'woocommerce_order_item_meta_end', $item_id, $item, $order, false ); + ?> + ' . sprintf( '× %s', esc_html( $item->get_quantity() ) ) . '', $item ); ?>get_formatted_line_subtotal( $item ); ?>
+ + + +
+ needs_payment() ) : ?> +
    + $gateway ) ); + } + } else { + echo '
  • '; + wc_print_notice( apply_filters( 'woocommerce_no_available_payment_methods_message', esc_html__( 'Sorry, it seems that there are no available payment methods for your location. Please contact us if you require assistance or wish to make alternate arrangements.', 'woocommerce' ) ), 'notice' ); // phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment + echo '
    • '; + } + ?> +
+ +
+ + + + + +
+
+
+ ' . esc_html( $order_button_text ) . '' ); // @codingStandardsIgnoreLine ?> + + + + +
+
diff --git a/wp-content/themes/physioassist/resources/views/woocommerce/checkout/payment.blade.php b/wp-content/themes/physioassist/resources/views/woocommerce/checkout/payment.blade.php new file mode 100644 index 00000000..19e501dc --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/woocommerce/checkout/payment.blade.php @@ -0,0 +1,66 @@ + +
+ cart->needs_payment() ) : ?> +
+
    + $gateway ) ); + } + } else { + echo '
  • '; + wc_print_notice( apply_filters( 'woocommerce_no_available_payment_methods_message', WC()->customer->get_billing_country() ? esc_html__( 'Sorry, it seems that there are no available payment methods. Please contact us if you require assistance or wish to make alternate arrangements.', 'woocommerce' ) : esc_html__( 'Please fill in your details above to see available payment methods.', 'woocommerce' ) ), 'notice' ); // phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment + echo '
    • '; + } + ?> +
+ +
+ + + + + +
+
+
+ ' . esc_html( $order_button_text ) . '' ); // @codingStandardsIgnoreLine ?> + + + + +
+
+ +@php($app = filter_input(INPUT_GET, 'app', FILTER_SANITIZE_STRING)) + +
+
+ cart->get_cart() as $cart_item_key => $cart_item ) { + $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); + + if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) { + ?> +
+
+ get_name(), $cart_item, $cart_item_key ) ) . ' '; ?> + +
+
+
:
+
+ cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> +
+
+
+ +
+ + cart->get_coupons() as $code => $coupon ) : ?> +
+
+
+
+ + + + cart->needs_shipping() && WC()->cart->show_shipping() ) : ?> + + + + + + + + + + cart->get_fees() as $fee ) : ?> +
+
name ); ?>
+
+
+ + + cart->display_prices_including_tax() ) : ?> + + + cart->get_tax_totals() as $code => $tax ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited ?> +
+
label ); ?>
+
formatted_amount ); ?>
+
+ + + +
+
countries->tax_or_vat() ); ?>
+
+
+ + + + +
+
+
">
+
+ + +
+
+
+ + + + + + + + + + cart->get_cart() as $cart_item_key => $cart_item ) { + $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); + + if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) { + ?> + + + + + + + + + + + + + + cart->get_coupons() as $code => $coupon ) : ?> + + + + + + + cart->needs_shipping() && WC()->cart->show_shipping() ) : ?> + + + + + + + + + + cart->get_fees() as $fee ) : ?> + + + + + + + cart->display_prices_including_tax() ) : ?> + + cart->get_tax_totals() as $code => $tax ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited ?> + + + + + + + + + + + + + + + + + + + + + + + +
+ get_name(), $cart_item, $cart_item_key ) ) . ' '; ?> + ' . sprintf( '× %s', $cart_item['quantity'] ) . '', $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> + + + cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> +
name ); ?>
label ); ?>formatted_amount ); ?>
countries->tax_or_vat() ); ?>
+ $order ) ); ?> - -