Skip to content

Commit b595610

Browse files
authored
fix: migration issues (#15)
1 parent 409a770 commit b595610

File tree

2 files changed

+2
-213
lines changed

2 files changed

+2
-213
lines changed

src/layouts/StoreLayout.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
CurrentCartService,
1010
} from "../headless/ecom/services/current-cart-service";
1111
import { CurrentCart } from "../headless/ecom/components/CurrentCart";
12-
import { withDocsWrapper } from "../components/DocsMode";
1312
import WixMediaImage from "../headless/media/components/Image";
1413

1514
interface StoreLayoutProps {

src/react-pages/store/example-2/products/[slug].tsx

Lines changed: 2 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useService } from "@wix/services-manager-react";
77
import { useState } from "react";
88
import { PageDocsRegistration } from "../../../../components/DocsMode";
99
import WixMediaImage from "../../../../headless/media/components/Image";
10-
import { CurrentCart } from "../../../../headless/store/components/CurrentCart";
10+
import { CurrentCart } from "../../../../headless/ecom/components/CurrentCart";
1111
import { Product } from "../../../../headless/store/components/Product";
1212
import { ProductMediaGallery } from "../../../../headless/store/components/ProductMediaGallery";
1313
import { ProductModifiers } from "../../../../headless/store/components/ProductModifiers";
@@ -233,6 +233,7 @@ const FreeTextInput = ({ modifier, name }: { modifier: any; name: string }) => (
233233
)}
234234
</ProductModifiers.FreeText>
235235
);
236+
236237
const ProductInfo = ({
237238
onAddToCart,
238239
servicesManager,
@@ -656,217 +657,6 @@ const ProductInfo = ({
656657
<p className="text-red-400 text-sm">{error}</p>
657658
</div>
658659
)}
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-
)}
870660
<div className="flex flex-col gap-3">
871661
<div className="flex gap-3">
872662
<button

0 commit comments

Comments
 (0)