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.

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

VIPPS-435: Updated logo, replaced titles. #6

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
23 changes: 15 additions & 8 deletions src/components/ConfirmationPage/confirmationPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,19 @@ import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/Loadi

import VIPPS_GET_PAYMENT_DETAILS from '../../talons/getPaymentDetails.gql';
import VIPPS_ACTIVATE_CART_MUTATION from "../../talons/activateCart.gql";
import VIPPS_GET_STORE_CONFIGURATION from '../../talons/getStoreConfiguration.gql';
import {useStyle} from "@magento/venia-ui/lib/classify";
import {func, shape, string} from "prop-types";
import VippsPayment from "@vipps/module-payment/src/components/vipps.payment";
import {StoreTitle} from "@magento/venia-ui/lib/components/Head";
import {FormattedMessage, useIntl} from "react-intl";
import {useCartContext} from "@magento/peregrine/lib/context/cart";
import {useAwaitQuery} from "@magento/peregrine/lib/hooks/useAwaitQuery";
import GET_CART_DETAILS from "@magento/peregrine/lib/talons/CartPage/cartPage.gql";

const ConfirmationPage = (props) => {
const classes = useStyle(defaultClasses, props.classes);
const {formatMessage} = useIntl();
const {getCartDetailsQuery} = GET_CART_DETAILS;

const {getVippsStoreConfigurationQuery} = VIPPS_GET_STORE_CONFIGURATION;
let classes = useStyle(defaultClasses, props.classes);
const [{ cartId }, { createCart, removeCart, getCartDetails }] = useCartContext();

const location = useLocation();
Expand All @@ -34,6 +33,14 @@ const ConfirmationPage = (props) => {
const [ fetchCartId ] = useMutation(vippsActivateCartMutation, {variables: {orderNumber}});
const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);

const { data: vippsPaymentConfig } = useQuery(getVippsStoreConfigurationQuery);
let vippsLabel = vippsPaymentConfig.storeConfig ? vippsPaymentConfig.storeConfig.vipps_label : 'Vipps';
let vippsVersion = vippsPaymentConfig.storeConfig ? vippsPaymentConfig.storeConfig.vipps_version : 'vipps_payment';

if (vippsVersion !== 'vipps_payment') {
classes.mainContainer = classes.mainContainerMobile;
}

const {vippsGetPaymentDetails} = VIPPS_GET_PAYMENT_DETAILS;
const { data: transactionData, loading, error } = useQuery(vippsGetPaymentDetails, {
variables: { orderNumber },
Expand Down Expand Up @@ -63,7 +70,7 @@ const ConfirmationPage = (props) => {
<StoreTitle>
{formatMessage({
id: 'vipps.titleReceipt',
defaultMessage: 'Order was reserved in Vipps'
defaultMessage: `Order was reserved in ${vippsLabel}`
})}
</StoreTitle>
<div className={classes.mainContainer}>
Expand All @@ -73,7 +80,7 @@ const ConfirmationPage = (props) => {
>
<FormattedMessage
id={'vippsPage.thankYou'}
defaultMessage={'Thank you for your payment! Your order was reserved in Vipps!'}
defaultMessage={`Thank you for your payment! Your order was reserved in ${vippsLabel}!`}
/>
</h2>
<div
Expand All @@ -93,7 +100,7 @@ const ConfirmationPage = (props) => {
<StoreTitle>
{formatMessage({
id: 'vipps.titleReceipt',
defaultMessage: 'Order was cancelled in Vipps'
defaultMessage: `Order was cancelled in ${vippsLabel}`
})}
</StoreTitle>
<div className={classes.mainContainer}>
Expand All @@ -103,7 +110,7 @@ const ConfirmationPage = (props) => {
>
<FormattedMessage
id={'vippsPage.thankYou'}
defaultMessage={'Your order was cancelled in Vipps!'}
defaultMessage={`Your order was cancelled in ${vippsLabel}!`}
/>
</h2>
<div
Expand Down
9 changes: 9 additions & 0 deletions src/components/ConfirmationPage/confirmationPage.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@
background: url(./vipps_logo_100x26.png) no-repeat left top;
}

.mainContainerMobile {
padding-top: 50px;
grid-column: 1;

display: grid;
row-gap: 1rem;
background: url(./mobilepay_logo.png) no-repeat left top;
}

.sidebarContainer {
grid-column: 2;
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/talons/getStoreConfiguration.gql.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { gql } from '@apollo/client';

const VIPPS_GET_STORE_CONFIGURATION = gql`
query getVippsStoreConfiguration {
# eslint-disable-next-line @graphql-eslint/require-id-when-available
storeConfig {
store_code
vipps_version
vipps_label
}
}
`;

export default {
getVippsStoreConfigurationQuery: VIPPS_GET_STORE_CONFIGURATION
};