scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-2073): Links for terms & conditions and privacy policy are moved out of the label for ancillaries and gla

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-04-02 07:53:41 +00:00
parent 1cad7af147
commit b6db9757d8
4 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css
View File

@@ -5,6 +5,7 @@
}
.termsAndConditions {
display: flex;
gap: var(--Space-x1);
display: grid;
gap: var(--Space-x2);
color: var(--Text-Secondary);
}

69
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
View File

@@ -97,43 +97,48 @@ export default function ConfirmationStep({
</>
)}
<div className={styles.termsAndConditions}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage(
{
id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
},
{
termsAndConditionsLink: (str) => (
<Link
variant="underscored"
color="peach80"
target="_blank"
href={bookingTermsAndConditions[lang]}
>
{str}
</Link>
),
privacyPolicyLink: (str) => (
<Link
variant="underscored"
color="peach80"
target="_blank"
href={privacyPolicy[lang]}
>
{str}
</Link>
),
}
)}
</p>
</Typography>
<Checkbox
className={styles.checkbox}
name="termsAndConditions"
registerOptions={{ required: true }}
topAlign
>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage(
{
id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
},
{
termsAndConditionsLink: (str) => (
<Typography variant="Link/sm">
<Link
variant="underscored"
href={bookingTermsAndConditions[lang]}
target="_blank"
>
{str}
</Link>
</Typography>
),
privacyPolicyLink: (str) => (
<Typography variant="Link/sm">
<Link
variant="underscored"
href={privacyPolicy[lang]}
target="_blank"
>
{str}
</Link>
</Typography>
),
}
)}
</p>
<span>
{intl.formatMessage({
id: "I accept the terms and conditions",
})}
</span>
</Typography>
</Checkbox>
</div>

3
apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/guaranteeLateArrival.module.css
View File

@@ -30,8 +30,9 @@
}
.termsAndConditions {
display: flex;
display: grid;
gap: var(--Spacing-x2);
color: var(--Text-Secondary);
}
.section {

23
apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/index.tsx
View File

@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { PaymentMethodEnum } from "@/constants/booking"
import {
bookingTermsAndConditions,
@@ -142,8 +144,8 @@ export default function GuaranteeLateArrival({
label={intl.formatMessage({ id: "Credit card" })}
/>
<div className={styles.termsAndConditions}>
<Checkbox topAlign name={"termsAndConditions"}>
<Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage(
{
id: "By guaranteeing with any of the payment methods available, I accept the terms for this stay and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand Scandic will process my personal data for this stay in accordance with <privacyPolicyLink>Scandic’s Privacy Policy</privacyPolicyLink>. I accept Scandic requiring a valid credit card during my visit in case anything is left unpaid.",
@@ -152,8 +154,9 @@ export default function GuaranteeLateArrival({
termsAndConditionsLink: (str) => (
<Link
variant="underscored"
href={bookingTermsAndConditions[lang]}
color="peach80"
target="_blank"
href={bookingTermsAndConditions[lang]}
>
{str}
</Link>
@@ -161,15 +164,25 @@ export default function GuaranteeLateArrival({
privacyPolicyLink: (str) => (
<Link
variant="underscored"
href={privacyPolicy[lang]}
color="peach80"
target="_blank"
href={privacyPolicy[lang]}
>
{str}
</Link>
),
}
)}
</Caption>
</p>
</Typography>
<Checkbox name="termsAndConditions">
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "I accept the terms and conditions",
})}
</span>
</Typography>
</Checkbox>
</div>
<div className={styles.guaranteeCost}>