From ea7d9a8b47fbf88a5d4de5c057cd8e6a222954b0 Mon Sep 17 00:00:00 2001 From: FrciSmrci Date: Thu, 17 Nov 2022 09:05:57 +0100 Subject: [PATCH 1/4] Add Rally integration example --- packages/rally/CartButton.tsx | 35 +++++++++++++++++ packages/rally/README.md | 73 +++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 packages/rally/CartButton.tsx create mode 100644 packages/rally/README.md diff --git a/packages/rally/CartButton.tsx b/packages/rally/CartButton.tsx new file mode 100644 index 0000000000..ba68b5f257 --- /dev/null +++ b/packages/rally/CartButton.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { Rally, RallyCheckoutButtonConfig } from '@rallycommerce/checkout-button'; + +declare global { + namespace JSX { + interface IntrinsicElements { + 'rally-checkout-button': any; + } + } +} +interface CartButtonProps { + customText?: string | undefined; + customClass?: string | undefined; + cart?: any; +} + +const CartButton = (props: CartButtonProps) => { + const customClass = props.customClass || "rally-custom-button-class"; + const cart = props?.cart; + + if (cart) { + const configuration: RallyCheckoutButtonConfig = { + cartData: { content: cart, id: cart.id, currency: cart.currency } + }; + + Rally.init('clientId', configuration); + } + + return (<> + { + } + ) +} + +export default CartButton; diff --git a/packages/rally/README.md b/packages/rally/README.md new file mode 100644 index 0000000000..ed55c967b8 --- /dev/null +++ b/packages/rally/README.md @@ -0,0 +1,73 @@ + +## Rally ♥ Next.js + +For successfully integrating the Rally checkout button follow the steps bellow. +#### **1. Install the Rally checkout button** + +```bash +npm install @rallycommerce/checkout-button +``` + +
+ +#### **2. Create a Cart Button component** + +Create a `CartButton.tsx` component in the project with the following content 👇. Structure example 👉 `lib/rally/CartButton.tsx` + +```javascript +import React from 'react' +import { Rally, RallyCheckoutButtonConfig } from '@rallycommerce/checkout-button'; + +declare global { + namespace JSX { + interface IntrinsicElements { + 'rally-checkout-button': any; + } + } +} +interface CartButtonProps { + customText?: string | undefined; + customClass?: string | undefined; + cart?: any; +} + +const CartButton = (props: CartButtonProps) => { + const customClass = props.customClass || "rally-custom-button-class"; + const cart = props?.cart; + + if (cart) { + const configuration: RallyCheckoutButtonConfig = { + cartData: { content: cart, id: cart.id, currency: cart.currency } + }; + + Rally.init('clientId', configuration); + } + + return (<> + { + } + ) +} + +export default CartButton; +``` + +
+ +#### **3. Import the Cart Button component** + +The component can now be imported (ex. on the cart page) like this 👇. + +```javascript +import dynamic from 'next/dynamic'; +const CartButton = dynamic(() => import('@lib/rally/CartButton'), { + ssr: false, +}) + +import { Context } from '../../lib/xy/storefront-data-hooks/src/Context'; +const { cart } = useContext(Context) + + + + +``` \ No newline at end of file From 0e01c78b57fe5eec33452b89774ce2e0636f230a Mon Sep 17 00:00:00 2001 From: FrciSmrci Date: Fri, 18 Nov 2022 10:26:47 +0100 Subject: [PATCH 2/4] Add learn more developer's portal link --- packages/rally/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/rally/README.md b/packages/rally/README.md index ed55c967b8..b90a0e2934 100644 --- a/packages/rally/README.md +++ b/packages/rally/README.md @@ -70,4 +70,6 @@ const { cart } = useContext(Context) -``` \ No newline at end of file +``` + +To learn more about Rally's checkout button capabilities visit our [Developer's portal](https://developers.rallyon.com/docs/jssdk/checkout-button/integrating-the-checkout-button/). \ No newline at end of file From dd65bed43d409b2e10e4ba9abc30a27a7ba9fe91 Mon Sep 17 00:00:00 2001 From: FrciSmrci Date: Mon, 21 Nov 2022 22:47:29 +0100 Subject: [PATCH 3/4] Instructions touch up. --- packages/rally/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rally/README.md b/packages/rally/README.md index b90a0e2934..36077e9a3e 100644 --- a/packages/rally/README.md +++ b/packages/rally/README.md @@ -1,7 +1,7 @@ ## Rally ♥ Next.js -For successfully integrating the Rally checkout button follow the steps bellow. +To successfully integrate the Rally checkout button follow the steps below. #### **1. Install the Rally checkout button** ```bash From 3f3094fa6a2fdeabff704e342bb2b27dc351c149 Mon Sep 17 00:00:00 2001 From: FrciSmrci Date: Thu, 8 Dec 2022 21:02:11 +0100 Subject: [PATCH 4/4] Refactor naming --- packages/rally/README.md | 22 +++++++++---------- ...CartButton.tsx => RallyCheckoutButton.tsx} | 6 ++--- 2 files changed, 14 insertions(+), 14 deletions(-) rename packages/rally/{CartButton.tsx => RallyCheckoutButton.tsx} (85%) diff --git a/packages/rally/README.md b/packages/rally/README.md index 36077e9a3e..a0d0587eb8 100644 --- a/packages/rally/README.md +++ b/packages/rally/README.md @@ -1,8 +1,8 @@ ## Rally ♥ Next.js -To successfully integrate the Rally checkout button follow the steps below. -#### **1. Install the Rally checkout button** +To successfully integrate the Rally Checkout Button follow the steps below. +#### **1. Install the Rally Checkout Button** ```bash npm install @rallycommerce/checkout-button @@ -10,9 +10,9 @@ npm install @rallycommerce/checkout-button
-#### **2. Create a Cart Button component** +#### **2. Create a Rally Checkout Button component** -Create a `CartButton.tsx` component in the project with the following content 👇. Structure example 👉 `lib/rally/CartButton.tsx` +Create a `RallyCheckoutButton.tsx` component in the project with the following content 👇. Structure example 👉 `lib/rally/RallyCheckoutButton.tsx` ```javascript import React from 'react' @@ -25,13 +25,13 @@ declare global { } } } -interface CartButtonProps { +interface RallyCheckoutButtonProps { customText?: string | undefined; customClass?: string | undefined; cart?: any; } -const CartButton = (props: CartButtonProps) => { +const RallyCheckoutButton = (props: RallyCheckoutButtonProps) => { const customClass = props.customClass || "rally-custom-button-class"; const cart = props?.cart; @@ -49,18 +49,18 @@ const CartButton = (props: CartButtonProps) => { ) } -export default CartButton; +export default RallyCheckoutButton; ```
-#### **3. Import the Cart Button component** +#### **3. Use the Rally Checkout Button component** The component can now be imported (ex. on the cart page) like this 👇. ```javascript import dynamic from 'next/dynamic'; -const CartButton = dynamic(() => import('@lib/rally/CartButton'), { +const RallyCheckoutButton = dynamic(() => import('@lib/rally/RallyCheckoutButton'), { ssr: false, }) @@ -68,8 +68,8 @@ import { Context } from '../../lib/xy/storefront-data-hooks/src/Context'; const { cart } = useContext(Context) - + ``` -To learn more about Rally's checkout button capabilities visit our [Developer's portal](https://developers.rallyon.com/docs/jssdk/checkout-button/integrating-the-checkout-button/). \ No newline at end of file +To learn more about Rally's Checkout Button capabilities visit our [Developer's portal](https://developers.rallyon.com/docs/jssdk/checkout-button/integrating-the-checkout-button/). \ No newline at end of file diff --git a/packages/rally/CartButton.tsx b/packages/rally/RallyCheckoutButton.tsx similarity index 85% rename from packages/rally/CartButton.tsx rename to packages/rally/RallyCheckoutButton.tsx index ba68b5f257..deab2d66f9 100644 --- a/packages/rally/CartButton.tsx +++ b/packages/rally/RallyCheckoutButton.tsx @@ -8,13 +8,13 @@ declare global { } } } -interface CartButtonProps { +interface RallyCheckoutButtonProps { customText?: string | undefined; customClass?: string | undefined; cart?: any; } -const CartButton = (props: CartButtonProps) => { +const RallyCheckoutButton = (props: RallyCheckoutButtonProps) => { const customClass = props.customClass || "rally-custom-button-class"; const cart = props?.cart; @@ -32,4 +32,4 @@ const CartButton = (props: CartButtonProps) => { ) } -export default CartButton; +export default RallyCheckoutButton;