Skip to content

Commit 29ac748

Browse files
richapatel1510richapatel1510
authored
Merge pull request #2584 from bigcommerce/CHECKOUT-9726
feat(checkout): CHECKOUT-9726 Seperate actionable links from price calculations and totals
2 parents 4a3686a + 7ed63a7 commit 29ac748

File tree

13 files changed

+299
-130
lines changed

13 files changed

+299
-130
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1212
- CHECKOUT-9692 show the display name and coupon code under line item [#2579](https://github.com/bigcommerce/cornerstone/pull/2579)
1313
- Fix Cart Page not updating when adding product via Quick View [#2581](https://github.com/bigcommerce/cornerstone/pull/2581)
1414
- CHECKOUT-9690 Add new discounts section to display the order promotions and coupon discounts [#2582](https://github.com/bigcommerce/cornerstone/pull/2582)
15+
- CHECKOUT-9726 Seperate actionable links from price calculations and totals [#2584](https://github.com/bigcommerce/cornerstone/pull/2584)
1516

1617
## 6.17.0 (10-01-2025)
1718
- Add net-new "order.pickup_addresses" to unify objects used on Order Details and Order Invoice pages [#2557](https://github.com/bigcommerce/cornerstone/pull/2557)

‎assets/icons/gifts.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/icons/promotions.svg‎

Lines changed: 2 additions & 7 deletions
Loading

‎assets/img/icon-sprite.svg‎

Lines changed: 4 additions & 7 deletions
Loading

‎assets/scss/components/stencil/cart/_cart.scss‎

Lines changed: 142 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -421,14 +421,27 @@ $card-preview-zoom-bottom-offset: 6rem;
421421

422422
.cart-total-label {
423423
color: stencilColor("color-textBase");
424+
text-align: left;
425+
width: grid-calc(6, $total-columns);
426+
427+
@include breakpoint("medium") {
428+
display: block;
429+
padding-left: 0;
430+
text-align: left;
431+
}
432+
}
433+
434+
.cart-total-value {
435+
float: right;
436+
font-weight: fontWeight("semibold");
424437
}
425438

426439
.cart-total-label, .cart-total-value {
427440
padding: spacing("third") 0;
428441
}
429442

430443
.cart-total-with-savings {
431-
border-top: 1px solid stencilColor("color-greyLightest");
444+
border-top: container("border");
432445

433446
.cart-total-label {
434447
font-size: fontSize("larger");
@@ -437,14 +450,18 @@ $card-preview-zoom-bottom-offset: 6rem;
437450
.cart-total-grandTotal {
438451
display: flex;
439452
flex-direction: column;
440-
gap: spacing("quarter");
453+
text-align: right;
454+
font-weight: fontWeight("normal");
441455

442456
.cart-total-amount {
443457
font-size: fontSize("larger");
458+
font-weight: fontWeight("semibold");
444459
}
445460

446461
.cart-total-savings {
462+
font-family: $body-font-family;
447463
font-size: fontSize("smaller");
464+
font-weight: fontWeight("bold");
448465
color: stencilColor("color-textSecondary");
449466
display: block;
450467
margin-top: spacing("eighth");
@@ -456,42 +473,128 @@ $card-preview-zoom-bottom-offset: 6rem;
456473
}
457474
}
458475

459-
.shipping-estimate-value, .shipping-estimate-show {
460-
text-decoration: none;
476+
.cart-total-gift-certificate, .cart-total-shipping-estimator {
477+
.cart-total-label {
478+
display: flex;
479+
gap: spacing("third");
480+
481+
a, button {
482+
color: stencilColor("optimizedCheckout-link-color");
483+
text-decoration: none;
484+
font-weight: fontWeight("normal");
485+
486+
&:hover {
487+
text-decoration: underline;
488+
}
489+
}
490+
}
461491
}
462-
}
463492

464-
// Collapsible discount section
465-
.cart-total-discounts {
466-
cursor: pointer;
467-
}
493+
.cart-total-shipping-estimator {
494+
.shipping-estimate-value, .shipping-estimate-show {
495+
text-decoration: none;
496+
font-style: normal;
497+
}
468498

469-
.cart-discount-icon {
470-
transition: transform 0.3s ease;
471-
472-
&.is-open {
473-
transform: rotate(180deg);
499+
.price--discounted {
500+
color: stencilColor("color-greyLight");
501+
}
474502
}
475503

476-
svg {
477-
fill: stencilColor("color-textBase");
504+
.cart-total-gift-certificate {
505+
.cart-gift-certificate-form {
506+
.button {
507+
background-color: container("fill", "base");
508+
color: stencilColor("color-textBase");
509+
font-weight: fontWeight("bold");
510+
}
511+
}
512+
513+
514+
.gift-certificate-add, .gift-certificate-cancel {
515+
color: stencilColor("optimizedCheckout-link-color");
516+
text-decoration: none;
517+
display: inline-flex;
518+
align-items: center;
519+
font-weight: fontWeight("normal");
520+
521+
&:hover {
522+
text-decoration: underline;
523+
}
524+
}
478525
}
479-
}
480526

481-
.cart-discount-list {
482-
display: flex;
483-
flex-direction: column;
484-
margin-left: 0;
485-
width: 100%;
486-
}
527+
.cart-total-gift-certificate-list-item {
528+
.cart-total-label {
529+
display: flex;
530+
align-items: center;
531+
gap: spacing("third");
532+
color: stencilColor("color-textSecondary");
533+
width: auto;
534+
max-width: 80%;
535+
flex-wrap: wrap;
536+
537+
.icon {
538+
flex-shrink: 0;
539+
}
487540

488-
.cart-discount-item {
489-
display: flex;
490-
justify-content: space-between;
491-
padding: spacing("eighth") 0;
492-
color: stencilColor("color-textSecondary");
493-
}
541+
a {
542+
color: stencilColor("optimizedCheckout-link-color");
543+
text-decoration: none;
544+
font-weight: fontWeight("normal");
545+
546+
&:hover {
547+
text-decoration: underline;
548+
}
549+
}
550+
}
551+
552+
.cart-total-value {
553+
float: right;
554+
width: auto;
555+
}
556+
}
494557

558+
.shipping-estimate-value, .shipping-estimate-show {
559+
text-decoration: none;
560+
}
561+
562+
.cart-total-discounts {
563+
.cart-total-label {
564+
cursor: pointer;
565+
}
566+
567+
.cart-discount-icon {
568+
transition: transform 0.3s ease;
569+
570+
&.is-open {
571+
transform: rotate(180deg);
572+
}
573+
574+
svg {
575+
fill: stencilColor("color-textBase");
576+
}
577+
}
578+
579+
.cart-discount-list {
580+
display: flex;
581+
flex-direction: column;
582+
margin-left: 0;
583+
width: 100%;
584+
}
585+
586+
.cart-discount-item {
587+
display: flex;
588+
justify-content: space-between;
589+
padding: spacing("eighth") 0;
590+
color: stencilColor("color-textSecondary");
591+
592+
.cart-discount-item-label {
593+
text-align: left;
594+
}
595+
}
596+
}
597+
}
495598

496599
// Cart actions
497600
// -----------------------------------------------------------------------------
@@ -515,7 +618,7 @@ $card-preview-zoom-bottom-offset: 6rem;
515618
.cart-coupons {
516619
width: 100%;
517620
padding-bottom: spacing("base");
518-
border-bottom: 1px solid stencilColor("color-greyLightest");
621+
border-bottom: container("border");
519622

520623
@include breakpoint("small") {
521624
float: right;
@@ -535,20 +638,21 @@ $card-preview-zoom-bottom-offset: 6rem;
535638

536639
.button {
537640
background-color: container("fill", "base");
538-
color: stencilColor("focusTooltip-backgroundColor");
641+
color: stencilColor("color-textBase");
539642
font-weight: fontWeight("bold");
540643
}
541644
}
542645
}
543646

544647
.cart-coupon-link {
545-
color: #3D83F3;
648+
color: stencilColor("optimizedCheckout-link-color");
546649
text-decoration: none;
547650
display: inline-flex;
548651
align-items: center;
549652
font-weight: fontWeight("normal");
550653

551654
&:hover {
655+
color: stencilColor("optimizedCheckout-link-color");
552656
text-decoration: underline;
553657
}
554658
}
@@ -583,19 +687,19 @@ $card-preview-zoom-bottom-offset: 6rem;
583687
align-items: center;
584688
gap: 0.5rem;
585689
padding: 0.5rem;
586-
border: 1px solid #E5E7EB;
587-
color: stencilColor("color-textBase");
690+
border: 1px solid stencilColor("color-coupon-pill-border");
691+
color: stencilColor("color-coupon-pill-text");
588692
max-width: 100%;
589693
border-radius: 3px;
590-
background: #FAFAFA;
694+
background: stencilColor("color-coupon-pill-background");
591695

592696
svg {
593-
fill: #979797;
697+
fill: stencilColor("icon-color");
594698
}
595699

596700
.cart-coupon-remove {
597701
svg {
598-
fill: stencilColor("color-grey")
702+
fill: stencilColor("icon-color");
599703
}
600704
}
601705
}
@@ -606,7 +710,7 @@ $card-preview-zoom-bottom-offset: 6rem;
606710

607711
.cart-coupon-name {
608712
flex: 1;
609-
font-weight: 400;
713+
margin-left: spacing("sixth");
610714
}
611715

612716
.coupon-code-cancel,

0 commit comments

Comments
 (0)