@@ -7,7 +7,7 @@ import { useService } from "@wix/services-manager-react";
7
7
import { useState } from "react" ;
8
8
import { PageDocsRegistration } from "../../../../components/DocsMode" ;
9
9
import WixMediaImage from "../../../../headless/media/components/Image" ;
10
- import { CurrentCart } from "../../../../headless/store /components/CurrentCart" ;
10
+ import { CurrentCart } from "../../../../headless/ecom /components/CurrentCart" ;
11
11
import { Product } from "../../../../headless/store/components/Product" ;
12
12
import { ProductMediaGallery } from "../../../../headless/store/components/ProductMediaGallery" ;
13
13
import { ProductModifiers } from "../../../../headless/store/components/ProductModifiers" ;
@@ -233,6 +233,7 @@ const FreeTextInput = ({ modifier, name }: { modifier: any; name: string }) => (
233
233
) }
234
234
</ ProductModifiers . FreeText >
235
235
) ;
236
+
236
237
const ProductInfo = ( {
237
238
onAddToCart,
238
239
servicesManager,
@@ -656,217 +657,6 @@ const ProductInfo = ({
656
657
< p className = "text-red-400 text-sm" > { error } </ p >
657
658
</ div >
658
659
) }
659
-
660
- < div className = "flex flex-col gap-3" >
661
- < div className = "flex gap-3" >
662
- < button
663
- onClick = { async ( ) => {
664
- await onAddToCart ( ) ;
665
- } }
666
- disabled = { ! canAddToCart || isLoading }
667
- className = "flex-1 bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200"
668
- >
669
- { isLoading ? (
670
- < span className = "flex items-center justify-center gap-2" >
671
- < svg
672
- className = "animate-spin w-5 h-5"
673
- fill = "none"
674
- viewBox = "0 0 24 24"
675
- >
676
- < circle
677
- className = "opacity-25"
678
- cx = "12"
679
- cy = "12"
680
- r = "10"
681
- stroke = "currentColor"
682
- strokeWidth = "4"
683
- > </ circle >
684
- < path
685
- className = "opacity-75"
686
- fill = "currentColor"
687
- d = "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
688
- > </ path >
689
- </ svg >
690
- Adding...
691
- </ span >
692
- ) : ! inStock ? (
693
- "Out of Stock"
694
- ) : (
695
- "Add to Cart"
696
- ) }
697
- </ button >
698
-
699
- < button
700
- onClick = { async ( ) => {
701
- // Clear cart first, then add this product and proceed to checkout
702
- try {
703
- const cartService = servicesManager . getService (
704
- CurrentCartServiceDefinition
705
- ) ;
706
- await cartService . clearCart ( ) ;
707
- await onAddToCart ( ) ;
708
- await cartService . proceedToCheckout ( ) ;
709
- } catch ( error ) {
710
- console . error ( "Buy now failed:" , error ) ;
711
- // Fallback to cart page if checkout fails
712
- window . location . href = "/cart" ;
713
- }
714
- } }
715
- disabled = { ! canAddToCart || isLoading }
716
- className = "flex-1 bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200"
717
- >
718
- { isLoading ? (
719
- < span className = "flex items-center justify-center gap-2" >
720
- < svg
721
- className = "animate-spin w-5 h-5"
722
- fill = "none"
723
- viewBox = "0 0 24 24"
724
- >
725
- < circle
726
- className = "opacity-25"
727
- cx = "12"
728
- cy = "12"
729
- r = "10"
730
- stroke = "currentColor"
731
- strokeWidth = "4"
732
- > </ circle >
733
- < path
734
- className = "opacity-75"
735
- fill = "currentColor"
736
- d = "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
737
- > </ path >
738
- </ svg >
739
- Processing...
740
- </ span >
741
- ) : ! inStock ? (
742
- "Out of Stock"
743
- ) : (
744
- "Buy Now"
745
- ) }
746
- </ button >
747
- </ div >
748
-
749
- < SocialSharing . Platforms
750
- url = {
751
- typeof window !== "undefined" ? window . location . href : ""
752
- }
753
- title = "Check out this amazing product"
754
- description = "An amazing product you'll love"
755
- hashtags = { [ "product" , "shop" , "amazing" ] }
756
- >
757
- { withDocsWrapper (
758
- ( {
759
- shareTwitter,
760
- shareFacebook,
761
- shareLinkedIn,
762
- copyLink,
763
- } ) => {
764
- const [ copySuccess , setCopySuccess ] = useState ( false ) ;
765
-
766
- const handleCopyLink = async ( ) => {
767
- const success = await copyLink ( ) ;
768
- if ( success ) {
769
- setCopySuccess ( true ) ;
770
- setTimeout ( ( ) => setCopySuccess ( false ) , 2000 ) ;
771
- }
772
- } ;
773
-
774
- return (
775
- < div className = "flex items-center gap-2 pt-2 border-t border-white/10" >
776
- < span className = "text-white/60 text-sm" > Share:</ span >
777
-
778
- < button
779
- onClick = { shareTwitter }
780
- className = "p-2 rounded-full bg-white/10 hover:bg-blue-500/20 hover:text-blue-400 transition-all"
781
- title = "Share on Twitter"
782
- >
783
- < svg
784
- className = "w-4 h-4 text-white/60 hover:text-blue-400 transition-colors"
785
- fill = "currentColor"
786
- viewBox = "0 0 24 24"
787
- >
788
- < path d = "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
789
- </ svg >
790
- </ button >
791
-
792
- < button
793
- onClick = { shareFacebook }
794
- className = "p-2 rounded-full bg-white/10 hover:bg-blue-600/20 hover:text-blue-500 transition-all"
795
- title = "Share on Facebook"
796
- >
797
- < svg
798
- className = "w-4 h-4 text-white/60 hover:text-blue-500 transition-colors"
799
- fill = "currentColor"
800
- viewBox = "0 0 24 24"
801
- >
802
- < path d = "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
803
- </ svg >
804
- </ button >
805
-
806
- < button
807
- onClick = { shareLinkedIn }
808
- className = "p-2 rounded-full bg-white/10 hover:bg-blue-700/20 hover:text-blue-600 transition-all"
809
- title = "Share on LinkedIn"
810
- >
811
- < svg
812
- className = "w-4 h-4 text-white/60 hover:text-blue-600 transition-colors"
813
- fill = "currentColor"
814
- viewBox = "0 0 24 24"
815
- >
816
- < path d = "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
817
- </ svg >
818
- </ button >
819
-
820
- < button
821
- onClick = { handleCopyLink }
822
- className = "p-2 rounded-full bg-white/10 hover:bg-teal-500/20 hover:text-teal-400 transition-all relative"
823
- title = "Copy link"
824
- >
825
- { copySuccess ? (
826
- < svg
827
- className = "w-4 h-4 text-teal-400"
828
- fill = "none"
829
- viewBox = "0 0 24 24"
830
- stroke = "currentColor"
831
- >
832
- < path
833
- strokeLinecap = "round"
834
- strokeLinejoin = "round"
835
- strokeWidth = "2"
836
- d = "M5 13l4 4L19 7"
837
- />
838
- </ svg >
839
- ) : (
840
- < svg
841
- className = "w-4 h-4 text-white/60 hover:text-teal-400 transition-colors"
842
- fill = "none"
843
- viewBox = "0 0 24 24"
844
- stroke = "currentColor"
845
- >
846
- < path
847
- strokeLinecap = "round"
848
- strokeLinejoin = "round"
849
- strokeWidth = "2"
850
- d = "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
851
- />
852
- </ svg >
853
- ) }
854
- </ button >
855
-
856
- { copySuccess && (
857
- < span className = "text-teal-400 text-xs ml-2 animate-fade-in" >
858
- Copied!
859
- </ span >
860
- ) }
861
- </ div >
862
- ) ;
863
- } ,
864
- "SocialSharing.Platforms" ,
865
- "/docs/components/social-sharing#platforms"
866
- ) }
867
- </ SocialSharing . Platforms >
868
- </ div >
869
- )}
870
660
< div className = "flex flex-col gap-3" >
871
661
< div className = "flex gap-3" >
872
662
< button
0 commit comments