Certificate btn on last

[AQIB-NAWAB]

What kind of change does this PR introduce?
feature

Issue Number:

• Closes When the user finishes the last lesson, the 'Next' button should be replaced with 'Get Your Certificate.' #142

Screenshots/videos:
Screencast from 2025-03-14 21-09-26.webm

Summary
Add a button of get your certificate when user is at last lesson and complete the tour.

Does this PR introduce a breaking change?
No

[AQIB-NAWAB]

@JeelRajodiya I test it on all scenarios

• When user complete the whole tour the certificate button instantly enabled.
• if user have not completed the tour and move to last lesson it will show locked
• if user complete the last lesson but others are pending it will still show button locked.

Please review and let me know if there any thing need to improve.

[AQIB-NAWAB]

Screencast.from.2025-03-16.10-25-37.webm

I made some changes in the condition. Now, whenever a user finishes the last lesson—whether it is the first, middle, or last—it will render the 'Get Your Certificate' button.

[AQIB-NAWAB]

@JeelRajodiya Please review the PR
Thanks

[AQIB-NAWAB]

I have test it around multiple scenarios , it is working fine. Let me know if there are any issues.

Thanks

[Copilot]

Pull Request Overview

This PR adds a feature to display a certificate button when the user reaches the final lesson and completes the tour. Key changes include updating function imports, adding state and an effect to detect tour completion, and conditionally displaying the CertificateButton component.

Comments suppressed due to low confidence (1)

app/components/CodeEditor/CodeEditor.tsx:141

• [nitpick] The fragment wrapping CertificateButton appears unnecessary. Removing the fragment could simplify the JSX and improve readability.

<> <CertificateButton /> </>

[AQIB-NAWAB]

I removed the fragments as well. @JeelRajodiya Please let me know if there any changes need to made.
Thanks

[Copilot]

Pull Request Overview

This PR introduces a new feature that displays a certificate button when the user is at the last lesson and has completed the tour.

• Added a CertificateButton component import and integration in the code editor controls.
• Introduced state management to determine if the tour has been completed.

Comments suppressed due to low confidence (1)

app/components/CodeEditor/CodeEditor.tsx:116

• [nitpick] Consider renaming 'isTheTourCompletedState' to 'isTourCompleted' for brevity and consistency with the imported 'isTheTourCompleted' function.

const [isTheTourCompletedState, setIsTheTourCompletedState] = useState(false);

[JeelRajodiya]

There is an edge case, when the tour is completed but the user is not in the last lesson, the next and validate button button is replaced with certificate button. view the below screenshot

the certificate button should be only displayed when the tour is completed and when the user is in the last lesson. and in the last lesson please do not remove the validate button, keep it along with the certificate button. We are really close to solving this issue. thanks a lot.

[AQIB-NAWAB]

Hi @JeelRajodiya , I intentionally implemented that earlier, but fixed it. Thanks for the suggestions. Please review the PR.

[AQIB-NAWAB]

@JeelRajodiya Please review the PR.