Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: gifting while user is a Plus member already #4131

Merged
merged 7 commits into from
Jan 30, 2025
Merged

fix: gifting while user is a Plus member already #4131

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e767001
fix: checkout availability
sshanzel Jan 30, 2025
ac6eb8a
fix: id for one time gifting
sshanzel Jan 30, 2025
e015ad3
fix: condition
sshanzel Jan 30, 2025
2d2d7f4
fix: condition swap
sshanzel Jan 30, 2025
c9c38cd
fix: checkout for gifting
sshanzel Jan 30, 2025
8bef308
chore: unused code
sshanzel Jan 30, 2025
3d9c2f1
refactor: less indent
sshanzel Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/shared/src/components/plus/PlusCheckoutContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { usePaymentContext } from '../../contexts/PaymentContext';
import { usePlusSubscription } from '../../hooks';
import { PlusUnavailable } from './PlusUnavailable';
import { PlusPlus } from './PlusPlus';
import { useGiftUserContext } from './GiftUserContext';

export type PlusCheckoutContainerProps = {
checkoutRef?: React.LegacyRef<HTMLDivElement>;
Expand All @@ -19,6 +20,7 @@ export const PlusCheckoutContainer = ({
checkoutRef,
className,
}: PlusCheckoutContainerProps): ReactElement => {
const { giftToUser } = useGiftUserContext();
const { isPlusAvailable } = usePaymentContext();
const { isPlus } = usePlusSubscription();

Expand All @@ -27,6 +29,10 @@ export const PlusCheckoutContainer = ({
return PlusUnavailable;
}

if (giftToUser) {
return null;
}

if (isPlus) {
return PlusPlus;
}
Expand Down
25 changes: 24 additions & 1 deletion packages/shared/src/components/plus/PlusDesktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@ import { usePaymentContext } from '../../contexts/PaymentContext';

import { PlusInfo } from './PlusInfo';
import { PlusCheckoutContainer } from './PlusCheckoutContainer';
import { useGiftUserContext } from './GiftUserContext';

export const PlusDesktop = (): ReactElement => {
const { openCheckout, paddle, productOptions } = usePaymentContext();
const { openCheckout, paddle, productOptions, giftOneYear } =
usePaymentContext();
const { giftToUser } = useGiftUserContext();
const {
query: { selectedPlan },
} = useRouter();
Expand All @@ -28,12 +31,32 @@ export const PlusDesktop = (): ReactElement => {
return;
}

if (giftToUser) {
if (!giftOneYear) {
return;
}

if (!selectedOption) {
const { value } = giftOneYear;
setSelectedOption(value);
openCheckout({ priceId: value });
}

return;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we already have this logic in the mobile component?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked the mobile component, seems to be not used. Maybe because we open checkout there after submit button.


const option = initialPaymentOption || productOptions?.[0]?.value;
if (option && !selectedOption) {
setSelectedOption(option);
openCheckout({ priceId: option });
} else if (giftToUser && giftOneYear) {
const { value } = giftOneYear;
setSelectedOption(value);
openCheckout({ priceId: value });
}
}, [
giftOneYear,
giftToUser,
initialPaymentOption,
openCheckout,
paddle,
Expand Down
64 changes: 32 additions & 32 deletions packages/shared/src/contexts/PaymentContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,38 +124,6 @@ export const PaymentContextProvider = ({
});
}, [router]);

const openCheckout = useCallback(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just moved it down below.

({ priceId }: { priceId: string }) => {
if (isPlus) {
return;
}

if (!isPlusAvailable) {
return;
}

paddle?.Checkout.open({
items: [{ priceId, quantity: 1 }],
customer: {
email: user?.email,
},
customData: {
user_id: user?.id,
},
settings: {
displayMode: 'inline',
frameTarget: 'checkout-container',
frameInitialHeight: 500,
frameStyle:
'width: 100%; background-color: transparent; border: none;',
theme: 'dark',
showAddDiscounts: false,
},
});
},
[paddle, user, isPlusAvailable, isPlus],
);

const getPrices = useCallback(async () => {
return paddle?.PricePreview({
items: Object.keys(planTypes).map((priceId) => ({
Expand Down Expand Up @@ -219,6 +187,38 @@ export const PaymentContextProvider = ({
[productOptions],
);

const openCheckout = useCallback(
({ priceId }: { priceId: string }) => {
if (isPlus && priceId !== giftOneYear?.value) {
return;
}

if (!isPlusAvailable) {
return;
}

paddle?.Checkout.open({
items: [{ priceId, quantity: 1 }],
customer: {
email: user?.email,
},
customData: {
user_id: user?.id,
},
settings: {
displayMode: 'inline',
frameTarget: 'checkout-container',
frameInitialHeight: 500,
frameStyle:
'width: 100%; background-color: transparent; border: none;',
theme: 'dark',
showAddDiscounts: false,
},
});
},
[paddle, user, giftOneYear, isPlusAvailable, isPlus],
);

const contextData = useMemo<PaymentContextData>(
() => ({
openCheckout,
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/src/lib/featureManagement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const feature = {
onboardingChecklist: new Feature('onboarding_checklist', true),
showCodeSnippets: new Feature('show_code_snippets', false),
pricingIds: new Feature('pricing_ids', {
pri_01jjbwd5j7k0nm45k8e07yfmwr: PlusPriceType.Yearly, // TODO: this value is from test env and needs to be updated
pri_01jjvm32ygwb1ja7w52e668fr2: PlusPriceType.Yearly,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ID from Nimrod.

pri_01jbsccbdbcwyhdy8hy3c2etyn: PlusPriceType.Monthly,
pri_01jbscda57910yvwjtyapnrrzc: PlusPriceType.Yearly,
}),
Expand Down