@clickaroo/checkout-ui 0.1.4-beta → 0.1.6-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +2 -5
- package/dist/storybook/assets/APIs.en-BZprb8nz.js +0 -372
- package/dist/storybook/assets/CheckoutPage-_q0L2I48.js +0 -3
- package/dist/storybook/assets/CheckoutPage.en-Cqm7U6Ao.js +0 -147
- package/dist/storybook/assets/CheckoutPage.stories-Biq4hwU7.js +0 -44
- package/dist/storybook/assets/Color-YHDXOIA2-CTze9lKG.js +0 -1
- package/dist/storybook/assets/CustomCheckout.en-B1POrtIr.js +0 -211
- package/dist/storybook/assets/CustomCheckout.stories-D-tPjvHt.js +0 -6
- package/dist/storybook/assets/CustomerInfo-BABvZLYn.js +0 -1
- package/dist/storybook/assets/CustomerInfo.stories-QbQKWp1d.js +0 -9
- package/dist/storybook/assets/DeliveryAddress-DwuRB6NF.js +0 -2
- package/dist/storybook/assets/DeliveryAddress.stories-DZnkYsnJ.js +0 -9
- package/dist/storybook/assets/DocsRenderer-CFRXHY34-C1sXuUXn.js +0 -2
- package/dist/storybook/assets/Guide.en-m6hCgVJU.js +0 -107
- package/dist/storybook/assets/PaymentMethods-B6OrSp4J.js +0 -2
- package/dist/storybook/assets/PaymentMethods.stories-DNO6rqG3.js +0 -9
- package/dist/storybook/assets/QuickStart.en-Dra_JcyZ.js +0 -136
- package/dist/storybook/assets/ValidateInput-Bw6PO7kr.js +0 -2
- package/dist/storybook/assets/chunk-XP5HYGXS-BpfKkqn7.js +0 -1
- package/dist/storybook/assets/entry-preview-D5W1SR96.js +0 -2
- package/dist/storybook/assets/entry-preview-docs-CS87rPOt.js +0 -46
- package/dist/storybook/assets/iframe-BBMn-SiC.js +0 -211
- package/dist/storybook/assets/index-2r-d8gn2.js +0 -575
- package/dist/storybook/assets/index-B7ki2Uzk.js +0 -24
- package/dist/storybook/assets/index-CFngt2ij.css +0 -1
- package/dist/storybook/assets/index-ChEI-nsM.js +0 -1
- package/dist/storybook/assets/index-D-Mha1DF.js +0 -11
- package/dist/storybook/assets/index-DRjF_FHU.js +0 -9
- package/dist/storybook/assets/index-DqxVLU6x.js +0 -240
- package/dist/storybook/assets/index-DrFu-skq.js +0 -6
- package/dist/storybook/assets/jsx-runtime-DiklIkkE.js +0 -9
- package/dist/storybook/assets/preview-B8lJiyuQ.js +0 -34
- package/dist/storybook/assets/preview-BBWR9nbA.js +0 -1
- package/dist/storybook/assets/preview-BCWRKXw7.js +0 -2
- package/dist/storybook/assets/preview-BWzBA1C2.js +0 -396
- package/dist/storybook/assets/preview-CvbIS5ZJ.js +0 -1
- package/dist/storybook/assets/preview-DD_OYowb.js +0 -1
- package/dist/storybook/assets/preview-DGUiP6tS.js +0 -7
- package/dist/storybook/assets/preview-DHQbi4pV.js +0 -1
- package/dist/storybook/assets/preview-DHrw3ha3.js +0 -1
- package/dist/storybook/assets/preview-NEoZ8N1F.js +0 -1
- package/dist/storybook/assets/react-18-2zMCfgG4.js +0 -1
- package/dist/storybook/assets/test-utils-Cz8Y21vI.js +0 -9
- package/dist/storybook/assets/useCheckoutContext-C6NRdjfK.js +0 -27
- package/dist/storybook/favicon.svg +0 -1
- package/dist/storybook/iframe.html +0 -666
- package/dist/storybook/index.html +0 -177
- package/dist/storybook/index.json +0 -1
- package/dist/storybook/nunito-sans-bold-italic.woff2 +0 -0
- package/dist/storybook/nunito-sans-bold.woff2 +0 -0
- package/dist/storybook/nunito-sans-italic.woff2 +0 -0
- package/dist/storybook/nunito-sans-regular.woff2 +0 -0
- package/dist/storybook/project.json +0 -1
- package/dist/storybook/sb-addons/essentials-actions-2/manager-bundle.js +0 -3
- package/dist/storybook/sb-addons/essentials-backgrounds-4/manager-bundle.js +0 -12
- package/dist/storybook/sb-addons/essentials-controls-1/manager-bundle.js +0 -405
- package/dist/storybook/sb-addons/essentials-docs-3/manager-bundle.js +0 -245
- package/dist/storybook/sb-addons/essentials-measure-7/manager-bundle.js +0 -3
- package/dist/storybook/sb-addons/essentials-outline-8/manager-bundle.js +0 -3
- package/dist/storybook/sb-addons/essentials-toolbars-6/manager-bundle.js +0 -3
- package/dist/storybook/sb-addons/essentials-viewport-5/manager-bundle.js +0 -3
- package/dist/storybook/sb-addons/interactions-9/manager-bundle.js +0 -222
- package/dist/storybook/sb-addons/links-10/manager-bundle.js +0 -3
- package/dist/storybook/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +0 -3
- package/dist/storybook/sb-common-assets/favicon.svg +0 -1
- package/dist/storybook/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/dist/storybook/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/dist/storybook/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/dist/storybook/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/dist/storybook/sb-manager/globals-module-info.js +0 -1052
- package/dist/storybook/sb-manager/globals-runtime.js +0 -42127
- package/dist/storybook/sb-manager/globals.js +0 -48
- package/dist/storybook/sb-manager/runtime.js +0 -12048
- package/dist/storybook/storybook-static/assets/APIs.en-Bf5J1Ifk.js +0 -372
- package/dist/storybook/storybook-static/assets/APIs.en-CVdvOQs6.js +0 -372
- package/dist/storybook/storybook-static/assets/APIs.en-CW0wl9xW.js +0 -372
- package/dist/storybook/storybook-static/assets/APIs.en-Ci2xcqKC.js +0 -372
- package/dist/storybook/storybook-static/assets/APIs.en-DSVQkUt3.js +0 -372
- package/dist/storybook/storybook-static/assets/APIs.en-m6cq4XTv.js +0 -372
- package/dist/storybook/storybook-static/assets/CheckoutPage-B959BwZO.js +0 -3
- package/dist/storybook/storybook-static/assets/CheckoutPage-BsnzMxJk.js +0 -3
- package/dist/storybook/storybook-static/assets/CheckoutPage-C21Znq4d.js +0 -3
- package/dist/storybook/storybook-static/assets/CheckoutPage-CrHN6Fcv.js +0 -3
- package/dist/storybook/storybook-static/assets/CheckoutPage-DYMMhAMX.js +0 -3
- package/dist/storybook/storybook-static/assets/CheckoutPage-Dbzt3i55.js +0 -3
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-BeknEgWZ.js +0 -147
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-C5I1UUQc.js +0 -147
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-C5WqMErV.js +0 -147
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-DiHMI_iH.js +0 -147
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-omEUF-3W.js +0 -147
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-wyirg_zl.js +0 -147
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-BFpky7Cv.js +0 -44
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DAo0u2QI.js +0 -44
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DLD3oWo_.js +0 -44
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DeC6lyzr.js +0 -44
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-G0sHl94m.js +0 -44
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-qqNMphqC.js +0 -44
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-1Ar-cfOi.js +0 -1
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-B_hoSOu5.js +0 -1
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-Bly_OAJP.js +0 -1
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-CECFFm6s.js +0 -1
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-DI94E3AI.js +0 -1
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-DSQioqvs.js +0 -1
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-2QJPlCmg.js +0 -211
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-Bg4oz9hS.js +0 -211
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-BrabumCC.js +0 -211
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-CckpRGsp.js +0 -211
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-D80ZpldF.js +0 -211
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-adeOUUPd.js +0 -211
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-BdACubjk.js +0 -6
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-CKQKzMq0.js +0 -6
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-Cmt6r_Qb.js +0 -6
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-F2GZKkIG.js +0 -6
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-OyfGgjnr.js +0 -6
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-V2NHLbZo.js +0 -6
- package/dist/storybook/storybook-static/assets/CustomerInfo-CTx1dFS3.js +0 -1
- package/dist/storybook/storybook-static/assets/CustomerInfo-CYLNdAoo.js +0 -1
- package/dist/storybook/storybook-static/assets/CustomerInfo-CdeZHMcz.js +0 -1
- package/dist/storybook/storybook-static/assets/CustomerInfo-Cp0u57C5.js +0 -1
- package/dist/storybook/storybook-static/assets/CustomerInfo-D3WHpN32.js +0 -1
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-BBWobZ5V.js +0 -9
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-BeF8Yh1A.js +0 -9
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-CYx1hKNg.js +0 -9
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-DB2C3zqQ.js +0 -9
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-DJEbX7ej.js +0 -9
- package/dist/storybook/storybook-static/assets/DeliveryAddress-BBT_-q56.js +0 -2
- package/dist/storybook/storybook-static/assets/DeliveryAddress-CD42v0od.js +0 -2
- package/dist/storybook/storybook-static/assets/DeliveryAddress-Lfanl1PO.js +0 -2
- package/dist/storybook/storybook-static/assets/DeliveryAddress-X81XGbKD.js +0 -2
- package/dist/storybook/storybook-static/assets/DeliveryAddress-zAvEPauR.js +0 -2
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-B-CLgnl5.js +0 -9
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-BvAXTiNm.js +0 -9
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-CTyS3zFt.js +0 -9
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-DHyw5QNl.js +0 -9
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-ex4l-pod.js +0 -9
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-4VFo0TRH.js +0 -2
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-BIza5p8d.js +0 -2
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-BKek9MhZ.js +0 -2
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-Bb5akATV.js +0 -2
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-C9sW_L8N.js +0 -2
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-sE6BxCwu.js +0 -2
- package/dist/storybook/storybook-static/assets/Guide.en-BJ4qiYIc.js +0 -107
- package/dist/storybook/storybook-static/assets/Guide.en-C21zCMX7.js +0 -107
- package/dist/storybook/storybook-static/assets/Guide.en-CNP2Y7P4.js +0 -107
- package/dist/storybook/storybook-static/assets/Guide.en-CiR7CrYZ.js +0 -107
- package/dist/storybook/storybook-static/assets/Guide.en-DPJzC5RR.js +0 -107
- package/dist/storybook/storybook-static/assets/Guide.en-VxmWTbu0.js +0 -107
- package/dist/storybook/storybook-static/assets/PaymentMethods-B1IKDQ7d.js +0 -2
- package/dist/storybook/storybook-static/assets/PaymentMethods-BNEEARzu.js +0 -2
- package/dist/storybook/storybook-static/assets/PaymentMethods-BnPZRrAs.js +0 -2
- package/dist/storybook/storybook-static/assets/PaymentMethods-DOuQM2jZ.js +0 -2
- package/dist/storybook/storybook-static/assets/PaymentMethods-e9HqQtxN.js +0 -2
- package/dist/storybook/storybook-static/assets/PaymentMethods-ro6Dfmcf.js +0 -2
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-BSqcqZV0.js +0 -9
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-Bc4jYrum.js +0 -9
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-CELadurr.js +0 -9
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-ChiL9TJn.js +0 -9
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-oiT2EQiz.js +0 -9
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-pOuLDPwE.js +0 -9
- package/dist/storybook/storybook-static/assets/QuickStart.en-B2goyY4Q.js +0 -136
- package/dist/storybook/storybook-static/assets/QuickStart.en-Bj-7Slt2.js +0 -136
- package/dist/storybook/storybook-static/assets/QuickStart.en-C_8MTb_6.js +0 -136
- package/dist/storybook/storybook-static/assets/QuickStart.en-Ct2dMZNT.js +0 -136
- package/dist/storybook/storybook-static/assets/QuickStart.en-D6K1vnx2.js +0 -136
- package/dist/storybook/storybook-static/assets/QuickStart.en-DEcB3LF7.js +0 -136
- package/dist/storybook/storybook-static/assets/ValidateInput-C6pnsZFe.js +0 -2
- package/dist/storybook/storybook-static/assets/ValidateInput-C71ymd_w.js +0 -2
- package/dist/storybook/storybook-static/assets/ValidateInput-Cl2O4HCX.js +0 -2
- package/dist/storybook/storybook-static/assets/ValidateInput-DcnOO9py.js +0 -2
- package/dist/storybook/storybook-static/assets/ValidateInput-sZgX3GCF.js +0 -2
- package/dist/storybook/storybook-static/assets/chunk-XP5HYGXS-BpfKkqn7.js +0 -1
- package/dist/storybook/storybook-static/assets/entry-preview-BM0J-x_7.js +0 -2
- package/dist/storybook/storybook-static/assets/entry-preview-Bnn64O7J.js +0 -2
- package/dist/storybook/storybook-static/assets/entry-preview-Dbi49YCK.js +0 -2
- package/dist/storybook/storybook-static/assets/entry-preview-DuGj42Nq.js +0 -2
- package/dist/storybook/storybook-static/assets/entry-preview-DxIUzVUA.js +0 -2
- package/dist/storybook/storybook-static/assets/entry-preview-docs-CS87rPOt.js +0 -46
- package/dist/storybook/storybook-static/assets/entry-preview-hHv11-z5.js +0 -2
- package/dist/storybook/storybook-static/assets/iframe-BZKEX9PA.js +0 -211
- package/dist/storybook/storybook-static/assets/iframe-CEK4S1D5.js +0 -211
- package/dist/storybook/storybook-static/assets/iframe-Ce3kgeV4.js +0 -211
- package/dist/storybook/storybook-static/assets/iframe-Ckasx_Sg.js +0 -211
- package/dist/storybook/storybook-static/assets/iframe-DsSsblW_.js +0 -211
- package/dist/storybook/storybook-static/assets/iframe-PThBYPHV.js +0 -211
- package/dist/storybook/storybook-static/assets/index-B7ki2Uzk.js +0 -24
- package/dist/storybook/storybook-static/assets/index-CFngt2ij.css +0 -1
- package/dist/storybook/storybook-static/assets/index-CZFGp9Su.js +0 -575
- package/dist/storybook/storybook-static/assets/index-ChEI-nsM.js +0 -1
- package/dist/storybook/storybook-static/assets/index-CkNSuRJg.js +0 -575
- package/dist/storybook/storybook-static/assets/index-Cx4362C8.js +0 -575
- package/dist/storybook/storybook-static/assets/index-Cyd9I05m.js +0 -575
- package/dist/storybook/storybook-static/assets/index-D-Mha1DF.js +0 -11
- package/dist/storybook/storybook-static/assets/index-DRjF_FHU.js +0 -9
- package/dist/storybook/storybook-static/assets/index-DqxVLU6x.js +0 -240
- package/dist/storybook/storybook-static/assets/index-DrFu-skq.js +0 -6
- package/dist/storybook/storybook-static/assets/index-LRKEu_dQ.js +0 -575
- package/dist/storybook/storybook-static/assets/index-j2F2pkp4.js +0 -575
- package/dist/storybook/storybook-static/assets/jsx-runtime-DiklIkkE.js +0 -9
- package/dist/storybook/storybook-static/assets/preview-4XW-YDzX.js +0 -2
- package/dist/storybook/storybook-static/assets/preview-884UjfA3.js +0 -2
- package/dist/storybook/storybook-static/assets/preview-B8lJiyuQ.js +0 -34
- package/dist/storybook/storybook-static/assets/preview-BBWR9nbA.js +0 -1
- package/dist/storybook/storybook-static/assets/preview-BWzBA1C2.js +0 -396
- package/dist/storybook/storybook-static/assets/preview-CvbIS5ZJ.js +0 -1
- package/dist/storybook/storybook-static/assets/preview-D2t1J3cT.js +0 -2
- package/dist/storybook/storybook-static/assets/preview-DD_OYowb.js +0 -1
- package/dist/storybook/storybook-static/assets/preview-DGUiP6tS.js +0 -7
- package/dist/storybook/storybook-static/assets/preview-DHQbi4pV.js +0 -1
- package/dist/storybook/storybook-static/assets/preview-DHrw3ha3.js +0 -1
- package/dist/storybook/storybook-static/assets/preview-DNROAajq.js +0 -2
- package/dist/storybook/storybook-static/assets/preview-EmPtksy2.js +0 -2
- package/dist/storybook/storybook-static/assets/preview-NEoZ8N1F.js +0 -1
- package/dist/storybook/storybook-static/assets/preview-PsKPgAxG.js +0 -2
- package/dist/storybook/storybook-static/assets/react-18-2zMCfgG4.js +0 -1
- package/dist/storybook/storybook-static/assets/test-utils-Cz8Y21vI.js +0 -9
- package/dist/storybook/storybook-static/assets/useCheckoutContext-B8tsk5b5.js +0 -27
- package/dist/storybook/storybook-static/assets/useCheckoutContext-C6u4Rp5U.js +0 -27
- package/dist/storybook/storybook-static/assets/useCheckoutContext-Cyg-MLQs.js +0 -27
- package/dist/storybook/storybook-static/assets/useCheckoutContext-DuJ1Ep0-.js +0 -27
- package/dist/storybook/storybook-static/assets/useCheckoutContext-w0N5TNgR.js +0 -27
- package/dist/storybook/storybook-static/favicon.svg +0 -1
- package/dist/storybook/storybook-static/iframe.html +0 -666
- package/dist/storybook/storybook-static/index.html +0 -177
- package/dist/storybook/storybook-static/index.json +0 -1
- package/dist/storybook/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
- package/dist/storybook/storybook-static/nunito-sans-bold.woff2 +0 -0
- package/dist/storybook/storybook-static/nunito-sans-italic.woff2 +0 -0
- package/dist/storybook/storybook-static/nunito-sans-regular.woff2 +0 -0
- package/dist/storybook/storybook-static/project.json +0 -1
- package/dist/storybook/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +0 -12
- package/dist/storybook/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +0 -405
- package/dist/storybook/storybook-static/sb-addons/essentials-docs-3/manager-bundle.js +0 -245
- package/dist/storybook/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-addons/interactions-9/manager-bundle.js +0 -222
- package/dist/storybook/storybook-static/sb-addons/links-10/manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +0 -3
- package/dist/storybook/storybook-static/sb-common-assets/favicon.svg +0 -1
- package/dist/storybook/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/dist/storybook/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/dist/storybook/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/dist/storybook/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/dist/storybook/storybook-static/sb-manager/globals-module-info.js +0 -1052
- package/dist/storybook/storybook-static/sb-manager/globals-runtime.js +0 -42127
- package/dist/storybook/storybook-static/sb-manager/globals.js +0 -48
- package/dist/storybook/storybook-static/sb-manager/runtime.js +0 -12048
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clickaroo/checkout-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6-beta",
|
|
4
4
|
"description": "A React checkout UI component library with payment integration",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"CHANGELOG.md"
|
|
12
12
|
],
|
|
13
13
|
"scripts": {
|
|
14
|
-
"build": "rollup -c
|
|
14
|
+
"build": "rollup -c",
|
|
15
15
|
"build:watch": "rollup -c -w",
|
|
16
16
|
"check": "eslint src --ext .ts,.tsx",
|
|
17
17
|
"typecheck": "tsc --noEmit",
|
|
@@ -27,9 +27,6 @@
|
|
|
27
27
|
"typescript"
|
|
28
28
|
],
|
|
29
29
|
"license": "MIT",
|
|
30
|
-
"publishConfig": {
|
|
31
|
-
"access": "public"
|
|
32
|
-
},
|
|
33
30
|
"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977",
|
|
34
31
|
"dependencies": {
|
|
35
32
|
"@stripe/react-stripe-js": "^3.9.0",
|
|
@@ -1,372 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as s}from"./index-ChEI-nsM.js";import{M as i}from"./index-2r-d8gn2.js";import"./index-DRjF_FHU.js";import"./iframe-BBMn-SiC.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";function t(r){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/APIs"}),`
|
|
2
|
-
`,e.jsx(n.h1,{id:"apis-and-hooks",children:"APIs and hooks"}),`
|
|
3
|
-
`,e.jsx(n.p,{children:"This document introduces the HTTP APIs and Hooks provided by the component library for more granular control and custom implementation."}),`
|
|
4
|
-
`,e.jsx(n.h2,{id:"http-api",children:"HTTP API"}),`
|
|
5
|
-
`,e.jsx(n.p,{children:"The component library provides the following HTTP API functions for directly calling order and price point related interfaces."}),`
|
|
6
|
-
`,e.jsx(n.h3,{id:"getpricepointinfo",children:"getPricePointInfo"}),`
|
|
7
|
-
`,e.jsx(n.p,{children:"Get price point information (supports single or multiple price points)."}),`
|
|
8
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
|
|
9
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { getPricePointInfo } from '@clickaroo/checkout-ui';
|
|
10
|
-
|
|
11
|
-
// Get single price point information
|
|
12
|
-
const singleResult = await getPricePointInfo('OPP-XXX');
|
|
13
|
-
|
|
14
|
-
if (singleResult.success) {
|
|
15
|
-
console.log('Price point info', singleResult.data);
|
|
16
|
-
// result.data is a ClickarooInfo object
|
|
17
|
-
} else if (singleResult.error) {
|
|
18
|
-
console.error('Failed to get price point info', singleResult.error);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
// Get multiple price point information
|
|
22
|
-
const multipleResult = await getPricePointInfo([
|
|
23
|
-
'OPP-XXX',
|
|
24
|
-
'OPP-YYY',
|
|
25
|
-
]);
|
|
26
|
-
|
|
27
|
-
if (multipleResult.success) {
|
|
28
|
-
console.log('Price point info', multipleResult.data);
|
|
29
|
-
// result.data is an object, key is offerPricePoint, value is the corresponding ClickarooInfo
|
|
30
|
-
// Example: { 'OPP-XXX': {...}, 'OPP-YYY': {...} }
|
|
31
|
-
} else if (multipleResult.error) {
|
|
32
|
-
console.error('Failed to get price point info', multipleResult.error);
|
|
33
|
-
}
|
|
34
|
-
`})}),`
|
|
35
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameters:"})}),`
|
|
36
|
-
`,e.jsxs(n.ul,{children:[`
|
|
37
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoints: string | string[]"})," - Price point code (single string or string array)"]}),`
|
|
38
|
-
`]}),`
|
|
39
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value:"})}),`
|
|
40
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`{
|
|
41
|
-
success: boolean;
|
|
42
|
-
data?: ClickarooInfo | Record<string, ClickarooInfo>; // Returns ClickarooInfo for single, object for multiple
|
|
43
|
-
error?: { // Error information
|
|
44
|
-
message: string;
|
|
45
|
-
code?: string;
|
|
46
|
-
details?: unknown;
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
interface ClickarooInfo {
|
|
51
|
-
offer_code: string; // Price point code
|
|
52
|
-
type: "one_off" | "subscription_schedules"; // Type: one-time purchase or subscription plan
|
|
53
|
-
payment: { // Payment information
|
|
54
|
-
type: "stripe";
|
|
55
|
-
data: {
|
|
56
|
-
publishable_key: string; // Stripe publishable key
|
|
57
|
-
account_id: string; // Stripe account ID
|
|
58
|
-
};
|
|
59
|
-
};
|
|
60
|
-
one_off?: { // One-time purchase info (exists when type is "one_off")
|
|
61
|
-
price_in_cents: number; // Price (in cents)
|
|
62
|
-
currency: string; // Currency type
|
|
63
|
-
quantity: number; // Quantity
|
|
64
|
-
};
|
|
65
|
-
subscription_schedules?: { // Subscription plan info (exists when type is "subscription_schedules")
|
|
66
|
-
phase: number; // Phase
|
|
67
|
-
price_in_cents: number; // Price (in cents)
|
|
68
|
-
currency: string; // Currency type
|
|
69
|
-
quantity: number; // Quantity
|
|
70
|
-
period: string; // Period
|
|
71
|
-
}[];
|
|
72
|
-
}
|
|
73
|
-
`})}),`
|
|
74
|
-
`,e.jsx(n.h3,{id:"createorder",children:"createOrder"}),`
|
|
75
|
-
`,e.jsxs(n.p,{children:["Create an order. The function automatically retrieves ",e.jsx(n.code,{children:"clickaroo_token"})," from the URL's ",e.jsx(n.code,{children:"clro_token"})," parameter or ",e.jsx(n.code,{children:"localStorage"}),", no need to pass it manually."]}),`
|
|
76
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
|
|
77
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { createOrder } from '@vsl-network/checkout-ui';
|
|
78
|
-
|
|
79
|
-
const result = await createOrder({
|
|
80
|
-
customer_info: {
|
|
81
|
-
name: 'John Doe',
|
|
82
|
-
email: 'john@example.com',
|
|
83
|
-
phone: '+1234567890',
|
|
84
|
-
},
|
|
85
|
-
shipping_address: {
|
|
86
|
-
country: 'US',
|
|
87
|
-
state: 'CA',
|
|
88
|
-
city: 'San Francisco',
|
|
89
|
-
address1: '123 Main St',
|
|
90
|
-
zip: '94102',
|
|
91
|
-
},
|
|
92
|
-
payment: {
|
|
93
|
-
type: 'stripe',
|
|
94
|
-
data: {
|
|
95
|
-
confirmation_token_id: 'token-id',
|
|
96
|
-
payment_method_types: ['card'],
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
|
-
items: [
|
|
100
|
-
{
|
|
101
|
-
sku: 'SKU001',
|
|
102
|
-
price_point_code: 'OPP-XXX',
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
sku: 'SKU002',
|
|
106
|
-
price_point_code: 'OPP-YYY',
|
|
107
|
-
},
|
|
108
|
-
],
|
|
109
|
-
metadata: {},
|
|
110
|
-
});
|
|
111
|
-
|
|
112
|
-
if (result.success) {
|
|
113
|
-
console.log('Order created successfully', result.data);
|
|
114
|
-
} else {
|
|
115
|
-
console.error('Order creation failed', result.error);
|
|
116
|
-
}
|
|
117
|
-
`})}),`
|
|
118
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value:"})}),`
|
|
119
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`{
|
|
120
|
-
success: boolean;
|
|
121
|
-
data?: CreateOrderResponse;
|
|
122
|
-
error?: {
|
|
123
|
-
message: string;
|
|
124
|
-
code?: string;
|
|
125
|
-
details?: unknown;
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
interface CreateOrderResponse {
|
|
130
|
-
order_code: string; // Order code
|
|
131
|
-
payment_status: OrderPaymentStatus; // Payment status
|
|
132
|
-
payment_result: Record<string, unknown>; // Payment result details
|
|
133
|
-
order_trade_code: string; // Trade code
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
enum OrderPaymentStatus {
|
|
137
|
-
PENDING = 'pending', // Pending payment
|
|
138
|
-
PAID = 'paid', // Paid
|
|
139
|
-
PARTIALLY_PAID = 'partially_paid', // Partially paid
|
|
140
|
-
FAILED = 'failed', // Payment failed
|
|
141
|
-
}
|
|
142
|
-
`})}),`
|
|
143
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Important Notes:"})}),`
|
|
144
|
-
`,e.jsxs(n.p,{children:["The function automatically retrieves the token from the URL's ",e.jsx(n.code,{children:"clro_token"})," parameter. If not in the URL, it retrieves from ",e.jsx(n.code,{children:"localStorage"}),". Please ensure that the URL contains the ",e.jsx(n.code,{children:"clro_token"})," parameter (e.g., ",e.jsx(n.code,{children:"?clro_token=your-token"}),") before calling ",e.jsx(n.code,{children:"createOrder"}),", or the token has been saved to ",e.jsx(n.code,{children:"localStorage"})," through other means."]}),`
|
|
145
|
-
`,e.jsx(n.h3,{id:"getorderdetail",children:"getOrderDetail"}),`
|
|
146
|
-
`,e.jsx(n.p,{children:"Get order details."}),`
|
|
147
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
|
|
148
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { getOrderDetail } from '@vsl-network/checkout-ui';
|
|
149
|
-
|
|
150
|
-
const result = await getOrderDetail('ORDER-12345');
|
|
151
|
-
|
|
152
|
-
if (result.success) {
|
|
153
|
-
console.log('Order details', result.data);
|
|
154
|
-
console.log('Order code', result.data?.order_code);
|
|
155
|
-
console.log('Payment status', result.data?.payment_status);
|
|
156
|
-
} else {
|
|
157
|
-
console.error('Failed to get order details', result.error);
|
|
158
|
-
}
|
|
159
|
-
`})}),`
|
|
160
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value:"})}),`
|
|
161
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`{
|
|
162
|
-
success: boolean;
|
|
163
|
-
data?: OrderDetail;
|
|
164
|
-
error?: {
|
|
165
|
-
message: string;
|
|
166
|
-
code?: string;
|
|
167
|
-
details?: unknown;
|
|
168
|
-
};
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
interface OrderDetail {
|
|
172
|
-
order_code: string; // Order code
|
|
173
|
-
customer: { // Customer information
|
|
174
|
-
customer_code: string;
|
|
175
|
-
name: string;
|
|
176
|
-
email: string;
|
|
177
|
-
phone: string;
|
|
178
|
-
};
|
|
179
|
-
shipping_address: { // Shipping address
|
|
180
|
-
zip: string;
|
|
181
|
-
city: string;
|
|
182
|
-
state: string;
|
|
183
|
-
country: string;
|
|
184
|
-
address1: string;
|
|
185
|
-
address2?: string;
|
|
186
|
-
};
|
|
187
|
-
billing_address: { // Billing address
|
|
188
|
-
zip: string;
|
|
189
|
-
city: string;
|
|
190
|
-
state: string;
|
|
191
|
-
country: string;
|
|
192
|
-
address1: string;
|
|
193
|
-
address2?: string;
|
|
194
|
-
};
|
|
195
|
-
status: OrderStatus; // Order status
|
|
196
|
-
payment_status: OrderPaymentStatus; // Payment status
|
|
197
|
-
refund_status: RefundStatus; // Refund status
|
|
198
|
-
fulfillment_status: FulfillmentStatus; // Fulfillment status
|
|
199
|
-
remark: string; // Remark
|
|
200
|
-
total_amount: string; // Total order amount
|
|
201
|
-
currency: string; // Currency type
|
|
202
|
-
items: Array<{ // Order item list
|
|
203
|
-
item_code: string;
|
|
204
|
-
name: string;
|
|
205
|
-
quantity: number;
|
|
206
|
-
price: string;
|
|
207
|
-
total: string;
|
|
208
|
-
}>;
|
|
209
|
-
metadata?: { // Order metadata
|
|
210
|
-
sku?: string;
|
|
211
|
-
[key: string]: unknown;
|
|
212
|
-
};
|
|
213
|
-
created_at: string; // Creation time
|
|
214
|
-
updated_at: string; // Update time
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
enum OrderStatus {
|
|
218
|
-
PENDING = 'pending', // Pending
|
|
219
|
-
CONFIRMED = 'confirmed', // Confirmed
|
|
220
|
-
PROCESSING = 'processing', // Processing
|
|
221
|
-
SHIPPED = 'shipped', // Shipped
|
|
222
|
-
DELIVERED = 'delivered', // Delivered
|
|
223
|
-
CANCELLED = 'cancelled', // Cancelled
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
enum RefundStatus {
|
|
227
|
-
NO_REFUND = 'no_refund', // No refund
|
|
228
|
-
PARTIAL_REFUND = 'partial_refund', // Partial refund
|
|
229
|
-
FULL_REFUND = 'full_refund', // Full refund
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
enum FulfillmentStatus {
|
|
233
|
-
PENDING = 'pending', // Pending
|
|
234
|
-
PROCESSING = 'processing', // Processing
|
|
235
|
-
SHIPPED = 'shipped', // Shipped
|
|
236
|
-
DELIVERED = 'delivered', // Delivered
|
|
237
|
-
}
|
|
238
|
-
`})}),`
|
|
239
|
-
`,e.jsx(n.h2,{id:"hooks",children:"Hooks"}),`
|
|
240
|
-
`,e.jsx(n.p,{children:"The component library provides the following Hooks for getting state and handling logic in components."}),`
|
|
241
|
-
`,e.jsx(n.h3,{id:"usecheckoutcontext",children:"useCheckoutContext"}),`
|
|
242
|
-
`,e.jsxs(n.p,{children:["Get checkout context data and methods. Must be used inside ",e.jsx(n.code,{children:"CheckoutProvider"}),"."]}),`
|
|
243
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
|
|
244
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext } from '@vsl-network/checkout-ui';
|
|
245
|
-
|
|
246
|
-
function CustomComponent() {
|
|
247
|
-
const {
|
|
248
|
-
customerInfo, // Customer information
|
|
249
|
-
deliveryAddress, // Delivery address
|
|
250
|
-
products, // Product list
|
|
251
|
-
isPaymentComplete, // Whether payment info is complete (Stripe form validation passed)
|
|
252
|
-
updateCustomerInfo, // Update customer information
|
|
253
|
-
updateDeliveryAddress, // Update delivery address
|
|
254
|
-
isFormValid, // Validate if form is valid
|
|
255
|
-
} = useCheckoutContext();
|
|
256
|
-
|
|
257
|
-
return (
|
|
258
|
-
<div>
|
|
259
|
-
<p>Product count: {products.length}</p>
|
|
260
|
-
<p>Form valid: {isFormValid() ? 'Yes' : 'No'}</p>
|
|
261
|
-
<p>Payment status: {isPaymentComplete ? 'Complete' : 'Incomplete'}</p>
|
|
262
|
-
</div>
|
|
263
|
-
);
|
|
264
|
-
}
|
|
265
|
-
`})}),`
|
|
266
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value Description:"})}),`
|
|
267
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface UseCheckoutContextReturn {
|
|
268
|
-
customerInfo: CustomerInfo; // Customer information
|
|
269
|
-
deliveryAddress: DeliveryAddress; // Delivery address
|
|
270
|
-
products: Product[]; // Product list
|
|
271
|
-
isPaymentComplete: boolean; // Whether payment info is complete
|
|
272
|
-
updateCustomerInfo: (info: Partial<CustomerInfo>) => void;
|
|
273
|
-
updateDeliveryAddress: (address: Partial<DeliveryAddress>) => void;
|
|
274
|
-
isFormValid: () => boolean; // Validate if form is valid
|
|
275
|
-
}
|
|
276
|
-
`})}),`
|
|
277
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Notes:"})}),`
|
|
278
|
-
`,e.jsxs(n.ul,{children:[`
|
|
279
|
-
`,e.jsxs(n.li,{children:["This Hook must be used inside ",e.jsx(n.code,{children:"CheckoutProvider"}),", otherwise it will throw an error."]}),`
|
|
280
|
-
`]}),`
|
|
281
|
-
`,e.jsx(n.h3,{id:"useordersubmission",children:"useOrderSubmission"}),`
|
|
282
|
-
`,e.jsx(n.p,{children:"Handle order submission logic, including creating Stripe confirmation tokens and calling the order creation API."}),`
|
|
283
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
|
|
284
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext, useOrderSubmission } from '@vsl-network/checkout-ui';
|
|
285
|
-
|
|
286
|
-
function CustomSubmitButton() {
|
|
287
|
-
const { isFormValid } = useCheckoutContext();
|
|
288
|
-
const { isSubmitting, submitOrder } = useOrderSubmission();
|
|
289
|
-
|
|
290
|
-
const handleSubmit = async () => {
|
|
291
|
-
if (!isFormValid()) {
|
|
292
|
-
alert('Please fill in all information');
|
|
293
|
-
return;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
const result = await submitOrder();
|
|
297
|
-
|
|
298
|
-
if (result.success) {
|
|
299
|
-
console.log('Order successful', result.orderCode, result.tradeCode);
|
|
300
|
-
// Navigate to success page
|
|
301
|
-
} else {
|
|
302
|
-
alert(result.message || 'Order submission failed');
|
|
303
|
-
}
|
|
304
|
-
};
|
|
305
|
-
|
|
306
|
-
return (
|
|
307
|
-
<button
|
|
308
|
-
onClick={handleSubmit}
|
|
309
|
-
disabled={isSubmitting || !isFormValid()}
|
|
310
|
-
>
|
|
311
|
-
{isSubmitting ? 'Submitting...' : 'Submit Order'}
|
|
312
|
-
</button>
|
|
313
|
-
);
|
|
314
|
-
}
|
|
315
|
-
`})}),`
|
|
316
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value Description:"})}),`
|
|
317
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface UseOrderSubmissionReturn {
|
|
318
|
-
isSubmitting: boolean; // Whether submitting
|
|
319
|
-
submitOrder: () => Promise<OrderSubmissionResult>;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
interface OrderSubmissionResult {
|
|
323
|
-
success: boolean; // Whether successful
|
|
324
|
-
message: string; // Message (success or error information)
|
|
325
|
-
orderCode?: string; // Order code (when successful)
|
|
326
|
-
tradeCode?: string; // Trade code (when successful)
|
|
327
|
-
}
|
|
328
|
-
`})}),`
|
|
329
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Notes:"})}),`
|
|
330
|
-
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"submitOrder"})," automatically retrieves all necessary data from ",e.jsx(n.code,{children:"CheckoutContext"})," (customer info, delivery address, product info, etc.)."]}),`
|
|
331
|
-
`,e.jsx(n.h3,{id:"useorderdetail",children:"useOrderDetail"}),`
|
|
332
|
-
`,e.jsx(n.p,{children:"Get order details, supports automatic refresh and error handling."}),`
|
|
333
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Usage Example:"})}),`
|
|
334
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useOrderDetail } from '@vsl-network/checkout-ui';
|
|
335
|
-
|
|
336
|
-
function OrderDetailPage({ orderCode }: { orderCode: string }) {
|
|
337
|
-
const { orderDetail, loading, error, refetch } = useOrderDetail(orderCode);
|
|
338
|
-
|
|
339
|
-
if (loading) return <div>Loading...</div>;
|
|
340
|
-
if (error) return <div>Error: {error}</div>;
|
|
341
|
-
if (!orderDetail) return <div>Order does not exist</div>;
|
|
342
|
-
|
|
343
|
-
return (
|
|
344
|
-
<div>
|
|
345
|
-
<h1>Order Details</h1>
|
|
346
|
-
<p>Order Code: {orderDetail.order_code}</p>
|
|
347
|
-
<p>Status: {orderDetail.status}</p>
|
|
348
|
-
<p>Payment Status: {orderDetail.payment_status}</p>
|
|
349
|
-
<p>Total Amount: {orderDetail.total_amount} {orderDetail.currency}</p>
|
|
350
|
-
{orderDetail.metadata && (
|
|
351
|
-
<div>
|
|
352
|
-
<p>Product Title: {orderDetail.metadata.product_title}</p>
|
|
353
|
-
<p>Product Price: {orderDetail.metadata.current_price}</p>
|
|
354
|
-
</div>
|
|
355
|
-
)}
|
|
356
|
-
<button onClick={refetch}>Refresh</button>
|
|
357
|
-
</div>
|
|
358
|
-
);
|
|
359
|
-
}
|
|
360
|
-
`})}),`
|
|
361
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Return Value Description:"})}),`
|
|
362
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface UseOrderDetailReturn {
|
|
363
|
-
orderDetail: OrderDetail | null; // Order details
|
|
364
|
-
loading: boolean; // Whether loading
|
|
365
|
-
error: string | null; // Error information
|
|
366
|
-
refetch: () => void; // Refetch order details
|
|
367
|
-
}
|
|
368
|
-
`})}),`
|
|
369
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Description:"})}),`
|
|
370
|
-
`,e.jsxs(n.ul,{children:[`
|
|
371
|
-
`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"OrderDetail"})," type definition is the same as the ",e.jsx(n.code,{children:"OrderDetail"})," returned by the ",e.jsx(n.code,{children:"getOrderDetail"})," API. See the API documentation above for details."]}),`
|
|
372
|
-
`]})]})}function h(r={}){const{wrapper:n}={...s(),...r.components};return n?e.jsx(n,{...r,children:e.jsx(t,{...r})}):t(r)}export{h as default};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{g as w,b as C,C as v}from"./useCheckoutContext-C6NRdjfK.js";import{C as N}from"./CustomerInfo-BABvZLYn.js";import{D as P}from"./DeliveryAddress-DwuRB6NF.js";import{u as _,P as O}from"./PaymentMethods-B6OrSp4J.js";import{r as g}from"./index-DRjF_FHU.js";const k=({message:r="Processing...",show:o})=>o?e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center justify-center p-8 bg-white rounded-2xl shadow-2xl max-w-sm mx-4",children:[e.jsxs("div",{className:"relative mb-6",children:[e.jsx("div",{className:"w-16 h-16 border-4 border-gray-200 rounded-full"}),e.jsx("div",{className:"absolute top-0 left-0 w-16 h-16 border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"absolute top-1/2 left-1/2 w-2 h-2 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-800 mb-2",children:r}),e.jsx("p",{className:"text-gray-500 text-sm",children:"Please wait while we process your request..."})]}),e.jsxs("div",{className:"flex space-x-1 mt-6",children:[e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce"}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.1s"}}),e.jsx("div",{className:"w-2 h-2 bg-blue-500 rounded-full animate-bounce",style:{animationDelay:"0.2s"}})]})]})]}):null;k.__docgenInfo={description:"",methods:[],displayName:"FullScreenLoading",props:{message:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Processing..."',computed:!1}},show:{required:!0,tsType:{name:"boolean"},description:""}}};const I=async r=>{try{console.log("Creating order with data:",r);const o=await fetch(`${w()}/orders`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await o.json();return o.ok?(console.log("Order created successfully:",l),{success:!0,data:l}):(console.error("Order creation failed:",l),{success:!1,error:{message:l.message||`HTTP ${o.status}: ${o.statusText}`,code:l.code,details:l}})}catch(o){return console.error("Network error creating order:",o),{success:!1,error:{message:o instanceof Error?o.message:"Network error occurred",details:{originalError:o}}}}};var b=(r=>(r.PENDING="pending",r.PAID="paid",r.PARTIALLY_PAID="partially_paid",r.FAILED="failed",r))(b||{});const S=()=>{const[r,o]=g.useState(!1),l=C(),x=g.useCallback(async(u,c,t)=>{console.log("Creating confirmation token with:",{stripeExists:!!u,elementsExists:!!c});try{console.log("Calling elements.submit()...");const{error:i}=await c.submit();if(i)return console.error("Elements submit error:",i),{error:i.message};console.log("Elements submitted successfully, creating confirmation token...");const{confirmationToken:d,error:n}=await u.createConfirmationToken({elements:c,params:{payment_method_data:{billing_details:{name:`${t.firstName} ${t.lastName}`,email:t.email,phone:t.phone}}}});return n?(console.error("Confirmation token creation error:",n),{error:n.message}):d?(console.log("Confirmation token created successfully:",d.id),{token:d.id}):{error:"Failed to create confirmation token"}}catch(i){return console.error("Error creating confirmation token:",i),{error:"Failed to create confirmation token"}}},[]),h=g.useCallback(u=>{const{customerInfo:c,deliveryAddress:t,clickarooToken:i,cart:d}=l,n=typeof window<"u"?window.location.href:"",f=`${c.firstName} ${c.lastName}`.trim(),p=i&&i.trim()!==""?i:null,a={country:t.country,state:t.state,city:t.city,address1:t.address,zip:t.zipCode};t.address2&&t.address2.trim()!==""&&(a.address2=t.address2);const s={clickaroo_token:p,customer_info:{name:f,email:c.email,phone:c.phone},shipping_address:a,source_url:n,remark:"",metadata:{sub4:typeof window<"u"&&new URLSearchParams(window.location.search).get("sub4")||""},payment:{type:"stripe",data:{confirmation_token_id:u,payment_method_types:["card"]}}};return s.items=d.map(y=>({sku:y.sku,price_point_code:y.offerPricePoint})),s.metadata.products=d,console.log("Built order data:",s),s},[l]),m=g.useCallback(async()=>{var d;const{stripeState:u,customerInfo:c}=l,{stripe:t,elements:i}=u;if(!t||!i)return{success:!1,message:"Payment system not ready"};o(!0);try{console.log("Creating confirmation token...");const{token:n,error:f}=await x(t,i,c);if(f)return console.error("Failed to create confirmation token:",f),{success:!1,message:`Payment processing failed: ${f}`};if(!n)return{success:!1,message:"Failed to get payment token, please try again."};console.log("Confirmation token created successfully:",n);const p=h(n);console.log("Submitting order...");const a=await I(p);if(!a.success)return console.error("Order submission failed:",a.error),{success:!1,message:`Order submission failed: ${((d=a.error)==null?void 0:d.message)||"Unknown error"}`};const{data:s}=a;return console.log("Order submitted successfully:",s),(s==null?void 0:s.payment_status)===b.PAID?{success:!0,message:"🎉 Payment successful!",orderCode:s.order_code,tradeCode:s.order_trade_code}:(s==null?void 0:s.payment_status)===b.PENDING?{success:!1,message:"Payment was not successful. Please try a different payment method or card.",orderCode:s.order_code}:{success:!1,message:`Payment failed, status: ${(s==null?void 0:s.payment_status)||"Unknown"}. Please try again.`,orderCode:s==null?void 0:s.order_code}}catch(n){return console.error("Error occurred during order process:",n),{success:!1,message:"An error occurred during the order process, please try again."}}finally{o(!1)}},[l,x,h]);return{isSubmitting:r,submitOrder:m}},j=()=>{const{isFormValid:r,onOrderSubmit:o,onOrderSuccess:l}=C(),{checkoutProducts:x,totalAmount:h}=_(),{isSubmitting:m,submitOrder:u}=S(),[c,t]=g.useState(""),[i,d]=g.useState(""),[n,f]=g.useState(!1),p=async()=>{if(t(""),d(""),!r()){t("Please fill in all information and make sure it is valid!");return}o==null||o(x,h);const a=await u();if(a.success){f(!0);let s=a.message;a.orderCode&&(s+=`
|
|
2
|
-
Order Number: ${a.orderCode}`),a.tradeCode&&(s+=`
|
|
3
|
-
Transaction ID: ${a.tradeCode}`),d(s),a.orderCode&&(l==null||l(a.orderCode,a.tradeCode))}else t(a.message)};return e.jsxs("div",{className:"clickaroo-checkout-ui w-full flex flex-col items-center",children:[e.jsxs("button",{type:"button",onClick:p,className:`w-full outline-none border-none text-white font-bold text-center text-lg py-5 rounded-md mb-4 transition-all duration-300 relative overflow-hidden ${r()&&!m&&!n?"bg-black hover:opacity-70":n?"bg-green-500 cursor-not-allowed":m?"bg-blue-600 cursor-not-allowed":"bg-gray-400 cursor-not-allowed"}`,disabled:!r()||m||n,children:[m&&e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite]"}),e.jsx("span",{className:"relative z-10 flex items-center justify-center",children:n?"✓ Order Complete - Redirecting...":m?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",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"})]}),"Processing..."]}):"Complete Order"})]}),i&&e.jsx("div",{className:"w-full mb-4 p-4 bg-green-50 border border-green-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-green-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-green-700 whitespace-pre-line m-0",children:i})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>d(""),className:"border-none inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),c&&e.jsx("div",{className:"w-full mb-4 p-4 bg-red-50 border border-red-200 rounded-lg",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx("svg",{className:"h-5 w-5 text-red-400",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),e.jsx("div",{className:"ml-3",children:e.jsx("p",{className:"text-sm text-red-700 whitespace-pre-line",children:c})}),e.jsx("div",{className:"ml-auto pl-3",children:e.jsx("div",{className:"-mx-1.5 -my-1.5",children:e.jsxs("button",{type:"button",onClick:()=>t(""),className:"inline-flex bg-red-50 rounded-md p-1.5 text-[#df1b41] hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600",children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-3 w-3",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})})})]})}),e.jsx("div",{className:"flex items-center text-grey text-sm md:text-base",children:e.jsx("span",{className:"text-center",children:"All transactions are SSL secure and encrypted"})}),e.jsx(k,{show:m,message:"Processing Your Order"})]})};j.__docgenInfo={description:"",methods:[],displayName:"SubmitButton"};const L=r=>e.jsx(v,{cart:r.cart,onCheckoutInit:r.onCheckoutInit,onPaymentInfoComplete:r.onPaymentInfoComplete,onOrderSubmit:r.onOrderSubmit,onOrderSuccess:r.onOrderSuccess,googleApiKey:r.googleApiKey,children:e.jsxs("div",{className:"clickaroo-checkout-ui flex flex-col gap-5",children:[e.jsx(O,{}),e.jsx(N,{}),e.jsx(P,{}),e.jsx(j,{})]})});L.__docgenInfo={description:"",methods:[],displayName:"CheckoutPage",props:{cart:{required:!0,tsType:{name:"Array",elements:[{name:"CartItem"}],raw:"CartItem[]"},description:""},onCheckoutInit:{required:!1,tsType:{name:"OnCheckoutInitCallback"},description:""},onPaymentInfoComplete:{required:!1,tsType:{name:"OnPaymentInfoCompleteCallback"},description:""},onOrderSubmit:{required:!1,tsType:{name:"OnOrderSubmitCallback"},description:""},onOrderSuccess:{required:!1,tsType:{name:"OnOrderSuccessCallback"},description:""},googleApiKey:{required:!1,tsType:{name:"string"},description:""}}};export{L as C,S as u};
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as c}from"./index-ChEI-nsM.js";import{M as s,C as o,a as d}from"./index-2r-d8gn2.js";import{C as l,D as r}from"./CheckoutPage.stories-Biq4hwU7.js";import"./index-DRjF_FHU.js";import"./iframe-BBMn-SiC.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-C6NRdjfK.js";import"./CheckoutPage-_q0L2I48.js";import"./CustomerInfo-BABvZLYn.js";import"./ValidateInput-Bw6PO7kr.js";import"./DeliveryAddress-DwuRB6NF.js";import"./PaymentMethods-B6OrSp4J.js";function i(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l,title:"Documentation/Usage Guide/CheckoutPage",name:"CheckoutPage (English)"}),`
|
|
2
|
-
`,e.jsx(n.h1,{id:"checkoutpage",children:"CheckoutPage"}),`
|
|
3
|
-
`,e.jsx(n.p,{children:"A complete checkout page component that integrates customer information, delivery address, payment methods, and order submission functionality."}),`
|
|
4
|
-
`,e.jsx(n.h3,{id:"basic-usage",children:"Basic Usage"}),`
|
|
5
|
-
`,e.jsx(o,{of:r}),`
|
|
6
|
-
`,e.jsx(n.h3,{id:"props",children:"Props"}),`
|
|
7
|
-
`,e.jsx(d,{of:r}),`
|
|
8
|
-
`,e.jsx(n.h4,{id:"cart",children:"cart"}),`
|
|
9
|
-
`,e.jsx(n.p,{children:"Array of cart items. Each item represents a product in the checkout."}),`
|
|
10
|
-
`,e.jsxs(n.p,{children:["Type: ",e.jsx(n.code,{children:"CartItem[]"}),". See ",e.jsx(n.a,{href:"#cartitem",children:"CartItem Type Definition"})," for details."]}),`
|
|
11
|
-
`,e.jsx(n.p,{children:"Each cart item contains the following fields:"}),`
|
|
12
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Fields:"})}),`
|
|
13
|
-
`,e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Field"}),e.jsx("th",{children:"Type"}),e.jsx("th",{children:"Required"}),e.jsx("th",{children:"Description"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"sku"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Product SKU"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"offerPricePoint"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Price Point ID"})]})]})]}),`
|
|
14
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Fields:"})}),`
|
|
15
|
-
`,e.jsxs(n.p,{children:["In addition to the two required fields ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),", you can pass any other fields to each cart item. These additional fields will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be accessed later when retrieving order details through the ",e.jsx(n.code,{children:"useOrderDetail"})," hook."]}),`
|
|
16
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const cart = [
|
|
17
|
-
{
|
|
18
|
-
sku: "TEST001",
|
|
19
|
-
offerPricePoint: "OPP-TEST001",
|
|
20
|
-
// Any other fields are allowed
|
|
21
|
-
title: "Product Title",
|
|
22
|
-
price: 99.99,
|
|
23
|
-
image: "https://example.com/product.jpg",
|
|
24
|
-
category: "Electronics",
|
|
25
|
-
// ... more fields
|
|
26
|
-
}
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
const { orderDetail } = useOrderDetail(orderCode)
|
|
30
|
-
console.log(orderDetail.metadata.products)
|
|
31
|
-
/** [
|
|
32
|
-
{
|
|
33
|
-
sku: "TEST001",
|
|
34
|
-
offerPricePoint: "OPP-TEST001",
|
|
35
|
-
title: "Product Title",
|
|
36
|
-
price: 99.99,
|
|
37
|
-
image: "https://example.com/product.jpg",
|
|
38
|
-
category: "Electronics",
|
|
39
|
-
}
|
|
40
|
-
]
|
|
41
|
-
**/
|
|
42
|
-
`})}),`
|
|
43
|
-
`,e.jsx(n.h4,{id:"oncheckoutinit",children:"onCheckoutInit"}),`
|
|
44
|
-
`,e.jsxs(n.p,{children:["Callback function when checkout initializes, triggered immediately after the ",e.jsx(n.code,{children:"CheckoutPage"})," component mounts, used to track the start of the checkout flow."]}),`
|
|
45
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onCheckoutInit?: () => void
|
|
46
|
-
`})}),`
|
|
47
|
-
`,e.jsx(n.h4,{id:"onpaymentinfocomplete",children:"onPaymentInfoComplete"}),`
|
|
48
|
-
`,e.jsx(n.p,{children:"Callback function when payment information is complete, triggered when the user completes the payment form and payment element validation passes."}),`
|
|
49
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
50
|
-
`})}),`
|
|
51
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
52
|
-
`,e.jsxs(n.ul,{children:[`
|
|
53
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". Returns an array of cart items. See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
54
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total payment amount in cents (e.g., 9999 represents $99.99). For multiple items, this is the sum of all items"]}),`
|
|
55
|
-
`]}),`
|
|
56
|
-
`,e.jsx(n.h4,{id:"onordersubmit",children:"onOrderSubmit"}),`
|
|
57
|
-
`,e.jsx(n.p,{children:"Callback function when order is submitted, triggered after the user clicks the submit button and before order processing begins."}),`
|
|
58
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
59
|
-
`})}),`
|
|
60
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
61
|
-
`,e.jsxs(n.ul,{children:[`
|
|
62
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Submitted cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
63
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total amount at submission time in cents (e.g., 9999 represents $99.99)"]}),`
|
|
64
|
-
`]}),`
|
|
65
|
-
`,e.jsx(n.h4,{id:"onordersuccess",children:"onOrderSuccess"}),`
|
|
66
|
-
`,e.jsx(n.p,{children:"Callback function when order succeeds, triggered after the order is successfully created."}),`
|
|
67
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSuccess?: (orderCode: string, tradeCode?: string) => void
|
|
68
|
-
`})}),`
|
|
69
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
70
|
-
`,e.jsxs(n.ul,{children:[`
|
|
71
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"orderCode"})," - Order code"]}),`
|
|
72
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"tradeCode"})," - Trade code (optional)"]}),`
|
|
73
|
-
`]}),`
|
|
74
|
-
`,e.jsx(n.h3,{id:"usage-examples",children:"Usage Examples"}),`
|
|
75
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
|
|
76
|
-
|
|
77
|
-
function App() {
|
|
78
|
-
const cart = [
|
|
79
|
-
{
|
|
80
|
-
sku: "TEST001",
|
|
81
|
-
offerPricePoint: "OPP-TEST001",
|
|
82
|
-
}
|
|
83
|
-
];
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
<CheckoutPage
|
|
87
|
-
cart={cart}
|
|
88
|
-
onCheckoutInit={() => {
|
|
89
|
-
console.log('Checkout initialized');
|
|
90
|
-
}}
|
|
91
|
-
onPaymentInfoComplete={(products, totalAmount) => {
|
|
92
|
-
console.log('Payment info complete');
|
|
93
|
-
console.log('Total amount:', totalAmount / 100);
|
|
94
|
-
products.forEach((product) => {
|
|
95
|
-
console.log('Product SKU:', product.sku);
|
|
96
|
-
console.log('Unit price:', product.priceInCents / 100, product.currency);
|
|
97
|
-
console.log('Quantity:', product.quantity);
|
|
98
|
-
console.log('Payment type:', product.paymentType);
|
|
99
|
-
});
|
|
100
|
-
}}
|
|
101
|
-
onOrderSubmit={(products, totalAmount) => {
|
|
102
|
-
console.log('Order submitted');
|
|
103
|
-
console.log('Total amount:', totalAmount / 100);
|
|
104
|
-
}}
|
|
105
|
-
onOrderSuccess={(orderCode, tradeCode) => {
|
|
106
|
-
console.log('Order successful', orderCode, tradeCode);
|
|
107
|
-
}}
|
|
108
|
-
/>
|
|
109
|
-
);
|
|
110
|
-
}
|
|
111
|
-
`})}),`
|
|
112
|
-
`,e.jsx(n.h3,{id:"key-types",children:"Key Types"}),`
|
|
113
|
-
`,e.jsx(n.h4,{id:"cartitem",children:"CartItem"}),`
|
|
114
|
-
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CartItem"})," is the basic cart item type passed to the ",e.jsx(n.code,{children:"CheckoutPage"})," component:"]}),`
|
|
115
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CartItem {
|
|
116
|
-
// Required fields
|
|
117
|
-
sku: string; // Product SKU
|
|
118
|
-
offerPricePoint: string; // Price Point ID
|
|
119
|
-
|
|
120
|
-
// Optional fields - allows any custom fields, which will be saved to order metadata
|
|
121
|
-
[key: string]: unknown;
|
|
122
|
-
}
|
|
123
|
-
`})}),`
|
|
124
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
125
|
-
`,e.jsxs(n.ul,{children:[`
|
|
126
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"sku"})," - Product SKU, required field"]}),`
|
|
127
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoint"})," - Price Point ID, required field"]}),`
|
|
128
|
-
`,e.jsxs(n.li,{children:["Other fields - You can pass any additional fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be retrieved through ",e.jsx(n.code,{children:"useOrderDetail"})]}),`
|
|
129
|
-
`]}),`
|
|
130
|
-
`,e.jsx(n.h4,{id:"checkoutcartitem",children:"CheckoutCartItem"}),`
|
|
131
|
-
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CheckoutCartItem"})," is the cart item type returned in callback functions, extending ",e.jsx(n.code,{children:"CartItem"})," and including price details:"]}),`
|
|
132
|
-
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CheckoutCartItem extends CartItem {
|
|
133
|
-
// Inherits all fields from CartItem (sku, offerPricePoint, etc.)
|
|
134
|
-
priceInCents: number; // Unit price in cents (e.g., 9999 represents $99.99)
|
|
135
|
-
currency: string; // Currency type (e.g., "USD", "EUR")
|
|
136
|
-
quantity: number; // Quantity
|
|
137
|
-
paymentType: "one-time" | "subscription"; // Payment type
|
|
138
|
-
}
|
|
139
|
-
`})}),`
|
|
140
|
-
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
141
|
-
`,e.jsxs(n.ul,{children:[`
|
|
142
|
-
`,e.jsxs(n.li,{children:["Inherits all fields from ",e.jsx(n.code,{children:"CartItem"})," (such as ",e.jsx(n.code,{children:"sku"}),", ",e.jsx(n.code,{children:"offerPricePoint"}),", etc.)"]}),`
|
|
143
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"priceInCents"})," - Unit price in cents"]}),`
|
|
144
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"currency"})," - Currency type"]}),`
|
|
145
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"quantity"})," - Quantity"]}),`
|
|
146
|
-
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"paymentType"})," - Payment type: ",e.jsx(n.code,{children:'"one-time"'})," for one-time payment, ",e.jsx(n.code,{children:'"subscription"'})," for subscription payment"]}),`
|
|
147
|
-
`]})]})}function T(t={}){const{wrapper:n}={...c(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{T as default};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import{S as r,c as i,D as l}from"./useCheckoutContext-C6NRdjfK.js";import{C as u}from"./CheckoutPage-_q0L2I48.js";i(l);const m={component:u,title:"Components/CheckoutPage",parameters:{docs:{description:{component:"Complete checkout page component including customer information, address information, payment methods, and order submission button."}},controls:{sort:"none",include:["cart","googleApiKey","onCheckoutInit","onPaymentInfoComplete","onOrderSubmit","onOrderSuccess"]}},argTypes:{cart:{description:"Array of cart items. Each item must include `sku` and `offerPricePoint`. Note: even for a single product, pass it as an array with one item.",control:{type:"object"},table:{type:{summary:"CartItem[]"},category:"Product Information"}},onCheckoutInit:{description:"Callback function triggered when checkout initializes, fired immediately after CheckoutPage component mounts.",action:"onCheckoutInit",table:{type:{summary:"() => void"},category:"Event Callbacks"}},onPaymentInfoComplete:{description:"Callback function triggered when payment information is complete, fired when user completes payment form (Stripe payment element validation passes).",action:"onPaymentInfoComplete",table:{type:{summary:"(products: CheckoutCartItem[], totalAmount: number) => void"},category:"Event Callbacks"}},onOrderSubmit:{description:"Callback function triggered when order is submitted, fired after user clicks submit button and before order processing begins.",action:"onOrderSubmit",table:{type:{summary:"(products: CheckoutCartItem[], totalAmount: number) => void"},category:"Event Callbacks"}},onOrderSuccess:{description:"Callback function triggered when order is successfully created.",action:"onOrderSuccess",table:{type:{summary:"(orderCode: string, tradeCode?: string) => void"},category:"Event Callbacks"}},googleApiKey:{description:"Google Places API Key for enabling address autocomplete functionality.",control:{type:"text"},table:{type:{summary:"string"},category:"Configuration"}}}},n={args:{cart:[{sku:"TEST001",offerPricePoint:r.MULTIPLE[0],title:"Product 1",price:99.99,image:"https://example.com/product.jpg",category:"Electronics"},{sku:"TEST002",offerPricePoint:r.MULTIPLE[1],title:"Product 2",price:149.99,image:"https://example.com/product.jpg",category:"Electronics"}],googleApiKey:"AIzaSyCtZ0TqBCGRf1OtLwTmJANQ4_sOpTs5x1w",onCheckoutInit:()=>{console.log("✅ Checkout initialized")},onPaymentInfoComplete:(t,o)=>{console.log("✅ Payment info complete"),console.log("Total amount:",o/100),t.forEach(e=>{console.log(` - ${e.sku}: ${e.priceInCents/100} ${e.currency.toUpperCase()}`)})},onOrderSubmit:(t,o)=>{console.log("✅ Order submitted"),console.log("Submitted amount:",o/100),t.forEach(e=>{console.log(` - ${e.sku}: ${e.priceInCents/100} ${e.currency.toUpperCase()}`)})},onOrderSuccess:(t,o)=>{console.log("✅ Order successful"),console.log("Order code:",t),o&&console.log("Trade code:",o)}}};var c,a,s;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`{
|
|
2
|
-
args: {
|
|
3
|
-
cart: [{
|
|
4
|
-
sku: 'TEST001',
|
|
5
|
-
offerPricePoint: STORY_OFFER_PRICE_POINTS.MULTIPLE[0],
|
|
6
|
-
title: 'Product 1',
|
|
7
|
-
price: 99.99,
|
|
8
|
-
image: 'https://example.com/product.jpg',
|
|
9
|
-
category: 'Electronics'
|
|
10
|
-
}, {
|
|
11
|
-
sku: 'TEST002',
|
|
12
|
-
offerPricePoint: STORY_OFFER_PRICE_POINTS.MULTIPLE[1],
|
|
13
|
-
title: 'Product 2',
|
|
14
|
-
price: 149.99,
|
|
15
|
-
image: 'https://example.com/product.jpg',
|
|
16
|
-
category: 'Electronics'
|
|
17
|
-
}],
|
|
18
|
-
googleApiKey: 'AIzaSyCtZ0TqBCGRf1OtLwTmJANQ4_sOpTs5x1w',
|
|
19
|
-
onCheckoutInit: (() => {
|
|
20
|
-
console.log('✅ Checkout initialized');
|
|
21
|
-
}) as OnCheckoutInitCallback,
|
|
22
|
-
onPaymentInfoComplete: ((products: CheckoutCartItem[], totalAmount: number) => {
|
|
23
|
-
console.log('✅ Payment info complete');
|
|
24
|
-
console.log('Total amount:', totalAmount / 100);
|
|
25
|
-
products.forEach(product => {
|
|
26
|
-
console.log(\` - \${product.sku}: \${product.priceInCents / 100} \${product.currency.toUpperCase()}\`);
|
|
27
|
-
});
|
|
28
|
-
}) as OnPaymentInfoCompleteCallback,
|
|
29
|
-
onOrderSubmit: ((products: CheckoutCartItem[], totalAmount: number) => {
|
|
30
|
-
console.log('✅ Order submitted');
|
|
31
|
-
console.log('Submitted amount:', totalAmount / 100);
|
|
32
|
-
products.forEach(product => {
|
|
33
|
-
console.log(\` - \${product.sku}: \${product.priceInCents / 100} \${product.currency.toUpperCase()}\`);
|
|
34
|
-
});
|
|
35
|
-
}) as OnOrderSubmitCallback,
|
|
36
|
-
onOrderSuccess: ((orderCode: string, tradeCode?: string) => {
|
|
37
|
-
console.log('✅ Order successful');
|
|
38
|
-
console.log('Order code:', orderCode);
|
|
39
|
-
if (tradeCode) {
|
|
40
|
-
console.log('Trade code:', tradeCode);
|
|
41
|
-
}
|
|
42
|
-
}) as OnOrderSuccessCallback
|
|
43
|
-
}
|
|
44
|
-
}`,...(s=(a=n.parameters)==null?void 0:a.docs)==null?void 0:s.source}}};const d=["Default"],C=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:d,default:m},Symbol.toStringTag,{value:"Module"}));export{C,n as D};
|