@betterstore/react 0.2.44 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.3.0
+
+### Minor Changes
+
+- bug fix
+
+## 0.2.45
+
+### Patch Changes
+
+- new version
+
 ## 0.2.44
 
 ### Patch Changes

package/dist/components/checkout-embed/steps/summary/index.d.ts

@@ -1,10 +1,10 @@
 import { LineItem } from "@betterstore/sdk";
 import React from "react";
-export default function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }: {
+export default function CheckoutSummary({ lineItems, shipping, tax, currency, onCancel, exchangeRate, }: {
     lineItems: LineItem[];
     shipping?: number;
     tax?: number;
     currency: string;
     exchangeRate: number;
-    cancelUrl: string;
+    onCancel: () => void;
 }): React.JSX.Element;

package/dist/components/checkout-embed/useFormStore.d.ts

@@ -5,6 +5,8 @@ export interface FormStore {
     setFormData: (formData: Partial<CheckoutFormData>) => void;
     step: CheckoutStep;
     setStep: (step: CheckoutStep) => void;
+    checkoutId: string;
+    setCheckoutId: (checkoutId: string) => void;
 }
 export declare const useFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStore>, "persist"> & {
     persist: {

package/dist/index.cjs.js

@@ -5088,25 +5088,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
-function calcOrigin$1(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -5122,20 +5107,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
@@ -5243,20 +5234,11 @@ function resolveMotionValue(value) {
     return isMotionValue(value) ? value.get() : value;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
@@ -5343,68 +5325,6 @@ const htmlMotionConfig = {
     }),
 };
 
-function updateSVGDimensions(instance, renderState) {
-    try {
-        renderState.dimensions =
-            typeof instance.getBBox === "function"
-                ? instance.getBBox()
-                : instance.getBoundingClientRect();
-    }
-    catch (e) {
-        // Most likely trying to measure an unrendered element under Firefox
-        renderState.dimensions = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-        };
-    }
-}
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
@@ -5419,49 +5339,10 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
-            if (!current)
-                return;
-            let hasTransform = !!props.drag;
-            if (!hasTransform) {
-                for (const key in latestValues) {
-                    if (transformProps.has(key)) {
-                        hasTransform = true;
-                        break;
-                    }
-                }
-            }
-            if (!hasTransform)
-                return;
-            let needsMeasure = !prevProps;
-            if (prevProps) {
-                /**
-                 * Check the layout props for changes, if any are found we need to
-                 * measure the element again.
-                 */
-                for (let i = 0; i < layoutProps.length; i++) {
-                    const key = layoutProps[i];
-                    if (props[key] !==
-                        prevProps[key]) {
-                        needsMeasure = true;
-                    }
-                }
-            }
-            if (!needsMeasure)
-                return;
-            frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
     }),
 };
 
@@ -5599,7 +5480,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.8.0";
+        this.version = "12.9.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5625,12 +5506,12 @@ class MotionValue {
             this.prev = this.current;
             this.setCurrent(v);
             // Update update subscribers
-            if (this.current !== this.prev && this.events.change) {
-                this.events.change.notify(this.current);
+            if (this.current !== this.prev) {
+                this.events.change?.notify(this.current);
             }
             // Update render subscribers
-            if (render && this.events.renderRequest) {
-                this.events.renderRequest.notify(this.current);
+            if (render) {
+                this.events.renderRequest?.notify(this.current);
             }
         };
         this.hasAnimated = false;
@@ -5743,8 +5624,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
@@ -7451,7 +7330,6 @@ class JSAnimation extends WithPromise {
         this.holdTime = null;
     }
     finish() {
-        this.notifyFinished();
         this.teardown();
         this.state = "finished";
         const { onComplete } = this.options;
@@ -7464,6 +7342,7 @@ class JSAnimation extends WithPromise {
         this.teardown();
     }
     teardown() {
+        this.notifyFinished();
         this.state = "idle";
         this.stopDriver();
         this.startTime = this.holdTime = null;
@@ -7886,7 +7765,7 @@ class NativeAnimation extends WithPromise {
         this.isStopped = false;
         if (!options)
             return;
-        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
         this.options = options;
@@ -7912,8 +7791,13 @@ class NativeAnimation extends WithPromise {
                 }
                 this.animation.cancel();
             }
+            onComplete?.();
             this.notifyFinished();
         };
+        /**
+         * TODO: In a breaking change, we should replace this with `.notifyCancel()`
+         */
+        this.animation.oncancel = () => this.notifyFinished();
     }
     play() {
         if (this.isStopped)
@@ -8238,7 +8122,7 @@ class AsyncMotionValueAnimation extends WithPromise {
     }
     onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
         this.keyframeResolver = undefined;
-        const { name, type, velocity, delay, isHandoff, onUpdate, onComplete } = options;
+        const { name, type, velocity, delay, isHandoff, onUpdate } = options;
         this.resolvedAt = time.now();
         /**
          * If we can't animate this value with the resolved keyframes
@@ -8288,12 +8172,7 @@ class AsyncMotionValueAnimation extends WithPromise {
                 element: resolvedOptions.motionValue.owner.current,
             })
             : new JSAnimation(resolvedOptions);
-        animation.finished
-            .then(() => {
-            onComplete?.();
-            this.notifyFinished();
-        })
-            .catch(noop);
+        animation.finished.then(() => this.notifyFinished()).catch(noop);
         if (this.pendingTimeline) {
             this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -8491,6 +8370,17 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             delay,
             ...getValueTransition(transition || {}, key),
         };
+        /**
+         * If the value is already at the defined target, skip the animation.
+         */
+        const currentValue = value.get();
+        if (currentValue !== undefined &&
+            !value.isAnimating &&
+            !Array.isArray(valueTarget) &&
+            valueTarget === currentValue &&
+            !valueTransition.velocity) {
+            continue;
+        }
         /**
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.
@@ -12822,7 +12712,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "12.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -13057,8 +12947,7 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState, onUpdate } = visualState;
-        this.onUpdate = onUpdate;
+        const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -13260,7 +13149,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -13654,6 +13542,14 @@ class DOMVisualElement extends VisualElement {
     }
 }
 
+function renderHTML(element, { style, vars }, styleProp, projection) {
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (const key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
 function getComputedStyle$1(element) {
     return window.getComputedStyle(element);
 }
@@ -13686,17 +13582,48 @@ class HTMLVisualElement extends DOMVisualElement {
     }
 }
 
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+]);
+
+function renderSVG(element, renderState, _styleProp, projection) {
+    renderHTML(element, renderState, undefined, projection);
+    for (const key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
-        this.updateDimensions = () => {
-            if (this.current && !this.renderState.dimensions) {
-                updateSVGDimensions(this.current, this.renderState);
-            }
-        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -13712,11 +13639,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }
@@ -34336,6 +34258,8 @@ const useFormStore = create()(persist((set) => ({
     setFormData: (formData) => set({ formData }),
     step: "customer",
     setStep: (step) => set({ step }),
+    checkoutId: "",
+    setCheckoutId: (checkoutId) => set({ checkoutId }),
 }), { name: `checkout` }));
 
 const motionSettings = {
@@ -34345,7 +34269,7 @@ const motionSettings = {
     transition: { duration: 0.2 },
 };
 function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
-    const { formData, setFormData, step, setStep } = useFormStore();
+    const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [publicKey, setPublicKey] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
@@ -34369,21 +34293,53 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         validateStep();
     }, [step]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        if (customer && !((_a = formData.customer) === null || _a === void 0 ? void 0 : _a.email)) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
+        if (checkoutId !== storedCheckoutId) {
+            setStep("customer");
+            setCheckoutId(checkoutId);
+            if (customer) {
+                setFormData({
+                    customerId: customer.id,
+                    customer: {
+                        firstName: (_c = (_b = (_a = customer.address) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.split(" ")[0]) !== null && _c !== void 0 ? _c : "",
+                        lastName: (_f = (_e = (_d = customer.address) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.split(" ")[1]) !== null && _f !== void 0 ? _f : "",
+                        phone: (_h = (_g = customer.address) === null || _g === void 0 ? void 0 : _g.phone) !== null && _h !== void 0 ? _h : "",
+                        email: (_j = customer.email) !== null && _j !== void 0 ? _j : "",
+                        address: {
+                            line1: (_l = (_k = customer.address) === null || _k === void 0 ? void 0 : _k.line1) !== null && _l !== void 0 ? _l : "",
+                            line2: (_o = (_m = customer.address) === null || _m === void 0 ? void 0 : _m.line2) !== null && _o !== void 0 ? _o : "",
+                            city: (_q = (_p = customer.address) === null || _p === void 0 ? void 0 : _p.city) !== null && _q !== void 0 ? _q : "",
+                            zipCode: (_s = (_r = customer.address) === null || _r === void 0 ? void 0 : _r.zipCode) !== null && _s !== void 0 ? _s : "",
+                            country: (_u = (_t = customer.address) === null || _t === void 0 ? void 0 : _t.country) !== null && _u !== void 0 ? _u : "",
+                            countryCode: (_w = (_v = customer.address) === null || _v === void 0 ? void 0 : _v.countryCode) !== null && _w !== void 0 ? _w : "",
+                        },
+                    },
+                });
+            }
+            else if ((_x = formData.customer) === null || _x === void 0 ? void 0 : _x.email) {
+                setFormData({
+                    customer: formData.customer,
+                });
+            }
+            else {
+                setFormData({});
+            }
+            return;
+        }
+        if (customer && !((_y = formData.customer) === null || _y === void 0 ? void 0 : _y.email)) {
             const step = customer.id ? "shipping" : "customer";
             setFormData(Object.assign(Object.assign({}, formData), { customerId: customer.id, customer: {
-                    firstName: (_d = (_c = (_b = customer.address) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.split(" ")[0]) !== null && _d !== void 0 ? _d : "",
-                    lastName: (_g = (_f = (_e = customer.address) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.split(" ")[1]) !== null && _g !== void 0 ? _g : "",
-                    phone: (_j = (_h = customer.address) === null || _h === void 0 ? void 0 : _h.phone) !== null && _j !== void 0 ? _j : "",
-                    email: (_k = customer.email) !== null && _k !== void 0 ? _k : "",
+                    firstName: (_1 = (_0 = (_z = customer.address) === null || _z === void 0 ? void 0 : _z.name) === null || _0 === void 0 ? void 0 : _0.split(" ")[0]) !== null && _1 !== void 0 ? _1 : "",
+                    lastName: (_4 = (_3 = (_2 = customer.address) === null || _2 === void 0 ? void 0 : _2.name) === null || _3 === void 0 ? void 0 : _3.split(" ")[1]) !== null && _4 !== void 0 ? _4 : "",
+                    phone: (_6 = (_5 = customer.address) === null || _5 === void 0 ? void 0 : _5.phone) !== null && _6 !== void 0 ? _6 : "",
+                    email: (_7 = customer.email) !== null && _7 !== void 0 ? _7 : "",
                     address: {
-                        line1: (_m = (_l = customer.address) === null || _l === void 0 ? void 0 : _l.line1) !== null && _m !== void 0 ? _m : "",
-                        line2: (_p = (_o = customer.address) === null || _o === void 0 ? void 0 : _o.line2) !== null && _p !== void 0 ? _p : "",
-                        city: (_r = (_q = customer.address) === null || _q === void 0 ? void 0 : _q.city) !== null && _r !== void 0 ? _r : "",
-                        zipCode: (_t = (_s = customer.address) === null || _s === void 0 ? void 0 : _s.zipCode) !== null && _t !== void 0 ? _t : "",
-                        country: (_v = (_u = customer.address) === null || _u === void 0 ? void 0 : _u.country) !== null && _v !== void 0 ? _v : "",
-                        countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
+                        line1: (_9 = (_8 = customer.address) === null || _8 === void 0 ? void 0 : _8.line1) !== null && _9 !== void 0 ? _9 : "",
+                        line2: (_11 = (_10 = customer.address) === null || _10 === void 0 ? void 0 : _10.line2) !== null && _11 !== void 0 ? _11 : "",
+                        city: (_13 = (_12 = customer.address) === null || _12 === void 0 ? void 0 : _12.city) !== null && _13 !== void 0 ? _13 : "",
+                        zipCode: (_15 = (_14 = customer.address) === null || _14 === void 0 ? void 0 : _14.zipCode) !== null && _15 !== void 0 ? _15 : "",
+                        country: (_17 = (_16 = customer.address) === null || _16 === void 0 ? void 0 : _16.country) !== null && _17 !== void 0 ? _17 : "",
+                        countryCode: (_19 = (_18 = customer.address) === null || _18 === void 0 ? void 0 : _18.countryCode) !== null && _19 !== void 0 ? _19 : "",
                     },
                 } }));
             setStep(step);
@@ -34505,7 +34461,7 @@ function InputGroupLoading({ className }) {
         React.createElement(Skeleton, { className: "w-full h-9" })));
 }
 
-function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
+function CheckoutSummary({ lineItems, shipping, tax, currency, onCancel, exchangeRate, }) {
     var _a;
     const { formData } = useFormStore();
     const [isOpen, setIsOpen] = React.useState(false);
@@ -34532,8 +34488,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                         "rotate-180": isOpen,
                     }) })),
             React.createElement("p", { className: "font-bold text-lg tracking-tight md:hidden" }, storeHelpers.formatPrice(total, currency, exchangeRate)),
-            React.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", asChild: true },
-                React.createElement("a", { href: cancelUrl }, t("CheckoutEmbed.Summary.edit")))),
+            React.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", onClick: onCancel }, t("CheckoutEmbed.Summary.edit"))),
         React.createElement("hr", null),
         React.createElement("div", { className: clsx("gap-3 order-4 md:order-none", {
                 "hidden md:grid": !isOpen,
@@ -34623,6 +34578,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = sdk.createStoreClient({ proxy: clientProxy });
     React.useMemo(() => createI18nInstance(locale), []);
+    const { formData, setFormData, step, setStep } = useFormStore();
     const [checkout, setCheckout] = React.useState(null);
     const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
@@ -34651,15 +34607,20 @@ function CheckoutEmbed({ checkoutId, config }) {
         };
     }, [checkoutId]); // Only re-run if checkoutId changes
     const onSuccess = () => {
+        setStep("customer");
+        setFormData({ customer: formData.customer });
         if (successUrl) {
             window.location.href = successUrl;
         }
     };
-    const onError = () => {
+    const onCancel = () => {
+        setStep("customer");
+        setFormData({ customer: formData.customer });
         if (cancelUrl) {
             window.location.href = cancelUrl;
         }
     };
+    const onError = () => { };
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
@@ -34671,7 +34632,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     return (React.createElement("div", { className: "checkout-embed scrollbar-hidden mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
         React.createElement(Appearance, { appearance: appearance }),
         React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1 }))),
-        React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
+        React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
 }
 var index = React.memo(CheckoutEmbed);
 

package/dist/index.mjs

@@ -5065,25 +5065,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
-function calcOrigin$1(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -5099,20 +5084,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
@@ -5220,20 +5211,11 @@ function resolveMotionValue(value) {
     return isMotionValue(value) ? value.get() : value;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
@@ -5320,68 +5302,6 @@ const htmlMotionConfig = {
     }),
 };
 
-function updateSVGDimensions(instance, renderState) {
-    try {
-        renderState.dimensions =
-            typeof instance.getBBox === "function"
-                ? instance.getBBox()
-                : instance.getBoundingClientRect();
-    }
-    catch (e) {
-        // Most likely trying to measure an unrendered element under Firefox
-        renderState.dimensions = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-        };
-    }
-}
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
@@ -5396,49 +5316,10 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
-            if (!current)
-                return;
-            let hasTransform = !!props.drag;
-            if (!hasTransform) {
-                for (const key in latestValues) {
-                    if (transformProps.has(key)) {
-                        hasTransform = true;
-                        break;
-                    }
-                }
-            }
-            if (!hasTransform)
-                return;
-            let needsMeasure = !prevProps;
-            if (prevProps) {
-                /**
-                 * Check the layout props for changes, if any are found we need to
-                 * measure the element again.
-                 */
-                for (let i = 0; i < layoutProps.length; i++) {
-                    const key = layoutProps[i];
-                    if (props[key] !==
-                        prevProps[key]) {
-                        needsMeasure = true;
-                    }
-                }
-            }
-            if (!needsMeasure)
-                return;
-            frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
     }),
 };
 
@@ -5576,7 +5457,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.8.0";
+        this.version = "12.9.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5602,12 +5483,12 @@ class MotionValue {
             this.prev = this.current;
             this.setCurrent(v);
             // Update update subscribers
-            if (this.current !== this.prev && this.events.change) {
-                this.events.change.notify(this.current);
+            if (this.current !== this.prev) {
+                this.events.change?.notify(this.current);
             }
             // Update render subscribers
-            if (render && this.events.renderRequest) {
-                this.events.renderRequest.notify(this.current);
+            if (render) {
+                this.events.renderRequest?.notify(this.current);
             }
         };
         this.hasAnimated = false;
@@ -5720,8 +5601,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
@@ -7428,7 +7307,6 @@ class JSAnimation extends WithPromise {
         this.holdTime = null;
     }
     finish() {
-        this.notifyFinished();
         this.teardown();
         this.state = "finished";
         const { onComplete } = this.options;
@@ -7441,6 +7319,7 @@ class JSAnimation extends WithPromise {
         this.teardown();
     }
     teardown() {
+        this.notifyFinished();
         this.state = "idle";
         this.stopDriver();
         this.startTime = this.holdTime = null;
@@ -7863,7 +7742,7 @@ class NativeAnimation extends WithPromise {
         this.isStopped = false;
         if (!options)
             return;
-        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
         this.options = options;
@@ -7889,8 +7768,13 @@ class NativeAnimation extends WithPromise {
                 }
                 this.animation.cancel();
             }
+            onComplete?.();
             this.notifyFinished();
         };
+        /**
+         * TODO: In a breaking change, we should replace this with `.notifyCancel()`
+         */
+        this.animation.oncancel = () => this.notifyFinished();
     }
     play() {
         if (this.isStopped)
@@ -8215,7 +8099,7 @@ class AsyncMotionValueAnimation extends WithPromise {
     }
     onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
         this.keyframeResolver = undefined;
-        const { name, type, velocity, delay, isHandoff, onUpdate, onComplete } = options;
+        const { name, type, velocity, delay, isHandoff, onUpdate } = options;
         this.resolvedAt = time.now();
         /**
          * If we can't animate this value with the resolved keyframes
@@ -8265,12 +8149,7 @@ class AsyncMotionValueAnimation extends WithPromise {
                 element: resolvedOptions.motionValue.owner.current,
             })
             : new JSAnimation(resolvedOptions);
-        animation.finished
-            .then(() => {
-            onComplete?.();
-            this.notifyFinished();
-        })
-            .catch(noop);
+        animation.finished.then(() => this.notifyFinished()).catch(noop);
         if (this.pendingTimeline) {
             this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -8468,6 +8347,17 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             delay,
             ...getValueTransition(transition || {}, key),
         };
+        /**
+         * If the value is already at the defined target, skip the animation.
+         */
+        const currentValue = value.get();
+        if (currentValue !== undefined &&
+            !value.isAnimating &&
+            !Array.isArray(valueTarget) &&
+            valueTarget === currentValue &&
+            !valueTransition.velocity) {
+            continue;
+        }
         /**
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.
@@ -12799,7 +12689,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "12.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -13034,8 +12924,7 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState, onUpdate } = visualState;
-        this.onUpdate = onUpdate;
+        const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -13237,7 +13126,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -13631,6 +13519,14 @@ class DOMVisualElement extends VisualElement {
     }
 }
 
+function renderHTML(element, { style, vars }, styleProp, projection) {
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (const key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
 function getComputedStyle$1(element) {
     return window.getComputedStyle(element);
 }
@@ -13663,17 +13559,48 @@ class HTMLVisualElement extends DOMVisualElement {
     }
 }
 
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+]);
+
+function renderSVG(element, renderState, _styleProp, projection) {
+    renderHTML(element, renderState, undefined, projection);
+    for (const key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
-        this.updateDimensions = () => {
-            if (this.current && !this.renderState.dimensions) {
-                updateSVGDimensions(this.current, this.renderState);
-            }
-        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -13689,11 +13616,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }
@@ -34313,6 +34235,8 @@ const useFormStore = create()(persist((set) => ({
     setFormData: (formData) => set({ formData }),
     step: "customer",
     setStep: (step) => set({ step }),
+    checkoutId: "",
+    setCheckoutId: (checkoutId) => set({ checkoutId }),
 }), { name: `checkout` }));
 
 const motionSettings = {
@@ -34322,7 +34246,7 @@ const motionSettings = {
     transition: { duration: 0.2 },
 };
 function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
-    const { formData, setFormData, step, setStep } = useFormStore();
+    const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [publicKey, setPublicKey] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
@@ -34346,21 +34270,53 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         validateStep();
     }, [step]);
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        if (customer && !((_a = formData.customer) === null || _a === void 0 ? void 0 : _a.email)) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
+        if (checkoutId !== storedCheckoutId) {
+            setStep("customer");
+            setCheckoutId(checkoutId);
+            if (customer) {
+                setFormData({
+                    customerId: customer.id,
+                    customer: {
+                        firstName: (_c = (_b = (_a = customer.address) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.split(" ")[0]) !== null && _c !== void 0 ? _c : "",
+                        lastName: (_f = (_e = (_d = customer.address) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.split(" ")[1]) !== null && _f !== void 0 ? _f : "",
+                        phone: (_h = (_g = customer.address) === null || _g === void 0 ? void 0 : _g.phone) !== null && _h !== void 0 ? _h : "",
+                        email: (_j = customer.email) !== null && _j !== void 0 ? _j : "",
+                        address: {
+                            line1: (_l = (_k = customer.address) === null || _k === void 0 ? void 0 : _k.line1) !== null && _l !== void 0 ? _l : "",
+                            line2: (_o = (_m = customer.address) === null || _m === void 0 ? void 0 : _m.line2) !== null && _o !== void 0 ? _o : "",
+                            city: (_q = (_p = customer.address) === null || _p === void 0 ? void 0 : _p.city) !== null && _q !== void 0 ? _q : "",
+                            zipCode: (_s = (_r = customer.address) === null || _r === void 0 ? void 0 : _r.zipCode) !== null && _s !== void 0 ? _s : "",
+                            country: (_u = (_t = customer.address) === null || _t === void 0 ? void 0 : _t.country) !== null && _u !== void 0 ? _u : "",
+                            countryCode: (_w = (_v = customer.address) === null || _v === void 0 ? void 0 : _v.countryCode) !== null && _w !== void 0 ? _w : "",
+                        },
+                    },
+                });
+            }
+            else if ((_x = formData.customer) === null || _x === void 0 ? void 0 : _x.email) {
+                setFormData({
+                    customer: formData.customer,
+                });
+            }
+            else {
+                setFormData({});
+            }
+            return;
+        }
+        if (customer && !((_y = formData.customer) === null || _y === void 0 ? void 0 : _y.email)) {
             const step = customer.id ? "shipping" : "customer";
             setFormData(Object.assign(Object.assign({}, formData), { customerId: customer.id, customer: {
-                    firstName: (_d = (_c = (_b = customer.address) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.split(" ")[0]) !== null && _d !== void 0 ? _d : "",
-                    lastName: (_g = (_f = (_e = customer.address) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.split(" ")[1]) !== null && _g !== void 0 ? _g : "",
-                    phone: (_j = (_h = customer.address) === null || _h === void 0 ? void 0 : _h.phone) !== null && _j !== void 0 ? _j : "",
-                    email: (_k = customer.email) !== null && _k !== void 0 ? _k : "",
+                    firstName: (_1 = (_0 = (_z = customer.address) === null || _z === void 0 ? void 0 : _z.name) === null || _0 === void 0 ? void 0 : _0.split(" ")[0]) !== null && _1 !== void 0 ? _1 : "",
+                    lastName: (_4 = (_3 = (_2 = customer.address) === null || _2 === void 0 ? void 0 : _2.name) === null || _3 === void 0 ? void 0 : _3.split(" ")[1]) !== null && _4 !== void 0 ? _4 : "",
+                    phone: (_6 = (_5 = customer.address) === null || _5 === void 0 ? void 0 : _5.phone) !== null && _6 !== void 0 ? _6 : "",
+                    email: (_7 = customer.email) !== null && _7 !== void 0 ? _7 : "",
                     address: {
-                        line1: (_m = (_l = customer.address) === null || _l === void 0 ? void 0 : _l.line1) !== null && _m !== void 0 ? _m : "",
-                        line2: (_p = (_o = customer.address) === null || _o === void 0 ? void 0 : _o.line2) !== null && _p !== void 0 ? _p : "",
-                        city: (_r = (_q = customer.address) === null || _q === void 0 ? void 0 : _q.city) !== null && _r !== void 0 ? _r : "",
-                        zipCode: (_t = (_s = customer.address) === null || _s === void 0 ? void 0 : _s.zipCode) !== null && _t !== void 0 ? _t : "",
-                        country: (_v = (_u = customer.address) === null || _u === void 0 ? void 0 : _u.country) !== null && _v !== void 0 ? _v : "",
-                        countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
+                        line1: (_9 = (_8 = customer.address) === null || _8 === void 0 ? void 0 : _8.line1) !== null && _9 !== void 0 ? _9 : "",
+                        line2: (_11 = (_10 = customer.address) === null || _10 === void 0 ? void 0 : _10.line2) !== null && _11 !== void 0 ? _11 : "",
+                        city: (_13 = (_12 = customer.address) === null || _12 === void 0 ? void 0 : _12.city) !== null && _13 !== void 0 ? _13 : "",
+                        zipCode: (_15 = (_14 = customer.address) === null || _14 === void 0 ? void 0 : _14.zipCode) !== null && _15 !== void 0 ? _15 : "",
+                        country: (_17 = (_16 = customer.address) === null || _16 === void 0 ? void 0 : _16.country) !== null && _17 !== void 0 ? _17 : "",
+                        countryCode: (_19 = (_18 = customer.address) === null || _18 === void 0 ? void 0 : _18.countryCode) !== null && _19 !== void 0 ? _19 : "",
                     },
                 } }));
             setStep(step);
@@ -34482,7 +34438,7 @@ function InputGroupLoading({ className }) {
         React__default.createElement(Skeleton, { className: "w-full h-9" })));
 }
 
-function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchangeRate, }) {
+function CheckoutSummary({ lineItems, shipping, tax, currency, onCancel, exchangeRate, }) {
     var _a;
     const { formData } = useFormStore();
     const [isOpen, setIsOpen] = useState(false);
@@ -34509,8 +34465,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                         "rotate-180": isOpen,
                     }) })),
             React__default.createElement("p", { className: "font-bold text-lg tracking-tight md:hidden" }, storeHelpers.formatPrice(total, currency, exchangeRate)),
-            React__default.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", asChild: true },
-                React__default.createElement("a", { href: cancelUrl }, t("CheckoutEmbed.Summary.edit")))),
+            React__default.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", onClick: onCancel }, t("CheckoutEmbed.Summary.edit"))),
         React__default.createElement("hr", null),
         React__default.createElement("div", { className: clsx("gap-3 order-4 md:order-none", {
                 "hidden md:grid": !isOpen,
@@ -34600,6 +34555,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = createStoreClient({ proxy: clientProxy });
     React__default.useMemo(() => createI18nInstance(locale), []);
+    const { formData, setFormData, step, setStep } = useFormStore();
     const [checkout, setCheckout] = useState(null);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
@@ -34628,15 +34584,20 @@ function CheckoutEmbed({ checkoutId, config }) {
         };
     }, [checkoutId]); // Only re-run if checkoutId changes
     const onSuccess = () => {
+        setStep("customer");
+        setFormData({ customer: formData.customer });
         if (successUrl) {
             window.location.href = successUrl;
         }
     };
-    const onError = () => {
+    const onCancel = () => {
+        setStep("customer");
+        setFormData({ customer: formData.customer });
         if (cancelUrl) {
             window.location.href = cancelUrl;
         }
     };
+    const onError = () => { };
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
@@ -34648,7 +34609,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     return (React__default.createElement("div", { className: "checkout-embed scrollbar-hidden mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
         React__default.createElement(Appearance, { appearance: appearance }),
         React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1 }))),
-        React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
+        React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1 })))));
 }
 var index = memo$1(CheckoutEmbed);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.2.44",
+  "version": "0.3.0",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {