@ikas/storefront 4.0.0-alpha.3 → 4.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.31",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -24,18 +24,18 @@
     "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.3",
-    "@ikas/storefront-config": "^4.0.0-alpha.3",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.3",
-    "@ikas/storefront-models": "^4.0.0-alpha.3",
-    "@ikas/storefront-providers": "^4.0.0-alpha.3",
+    "@ikas/storefront-api": "^4.0.0-alpha.31",
+    "@ikas/storefront-config": "^4.0.0-alpha.31",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.31",
+    "@ikas/storefront-models": "^4.0.0-alpha.31",
+    "@ikas/storefront-providers": "^4.0.0-alpha.31",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@types/react-phone-number-input": "^3.0.10",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "canary",
+    "next": "12.2.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -52,14 +52,14 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.3",
-    "@ikas/storefront-config": "^4.0.0-alpha.3",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.3",
-    "@ikas/storefront-models": "^4.0.0-alpha.3",
-    "@ikas/storefront-providers": "^4.0.0-alpha.3",
+    "@ikas/storefront-api": "^4.0.0-alpha.31",
+    "@ikas/storefront-config": "^4.0.0-alpha.31",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.31",
+    "@ikas/storefront-models": "^4.0.0-alpha.31",
+    "@ikas/storefront-providers": "^4.0.0-alpha.31",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "canary",
+    "next": "12.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "lodash": "^4.17.20",

package/src/analytics/analytics.ts

@@ -54,6 +54,7 @@ export class Analytics {
       const customerInfo = await Analytics.getCustomerInfo();
 
       GoogleTagManager.pageView(url);
+      GoogleUniversal.pageView(window.location.pathname);
       IkasAnalytics.pageView(pageType);
 
       tryForEach(Analytics.subscribers, (s) => {
@@ -194,7 +195,7 @@ export class Analytics {
     try {
       localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
 
-      FacebookPixel.purchase(checkout, checkout.orderNumber || "");
+      FacebookPixel.purchase(checkout, transaction.id || "");
       GoogleTagManager.purchase(checkout, checkout.orderNumber || "");
       IkasAnalytics.orderSuccess(checkout);
       GoogleAnalytics.purchase(checkout, checkout.orderNumber || "");

package/src/analytics/googleUniversal.ts

@@ -8,12 +8,23 @@ export class GoogleUniversal {
     makeAutoObservable(this);
   }
 
+  static pageView(url: string) {
+    try {
+      if (!isServer && (window as any).ga) {
+        (window as any).ga("set", "page", url);
+        (window as any).ga("send", "pageview");
+      }
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   static productView(productDetail: IkasProduct) {
     try {
       if (!isServer && (window as any).ga) {
         (window as any).ga("ec:addProduct", productToGUItem(productDetail));
         (window as any).ga("ec:setAction", "detail");
-        (window as any).ga("send", "pageview");
       }
       return;
     } catch (err) {
@@ -79,7 +90,6 @@ export class GoogleUniversal {
           shipping: "" + checkout.shippingTotal,
           coupon: checkout.couponCode,
         });
-        (window as any).ga("send", "pageview");
       }
       return;
     } catch (err) {

package/src/analytics/head/index.tsx

@@ -79,8 +79,7 @@ export const AnalyticsHead: React.FC<HeadProps> = observer(({ blockHTML }) => {
             dangerouslySetInnerHTML={{
               __html: `window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
               ga('create', '${universalAnalyticsId}', 'auto');
-              ga('require', 'ec');
-              ga('send', 'pageview');`,
+              ga('require', 'ec');`,
             }}
           />
           <script

package/src/analytics/ikas.ts

@@ -181,6 +181,10 @@ export default class IkasAnalytics {
       } else {
         await this.createSessionId();
       }
+
+      IkasStorefrontConfig.init({
+        sessionId: this.sessionId || "",
+      });
     } catch (err) {
       console.error(err);
     }
@@ -196,6 +200,10 @@ export default class IkasAnalytics {
         this.visitorId = Date.now() + "";
         localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
       }
+
+      IkasStorefrontConfig.init({
+        visitorId: this.visitorId,
+      });
     } catch (err) {
       console.error(err);
     }

package/src/components/checkout/components/address-form/index.tsx

@@ -315,7 +315,7 @@ const CityInput: React.FC<FormItemProps> = observer(({ vm }) => {
   return (
     <FormItem
       type={FormItemType.TEXT}
-      autocomplete="address-level3"
+      autocomplete="address-level2"
       label={t("checkout-page:city")}
       value={vm.city?.name || ""}
       onChange={vm.onCityInputChange}

package/src/components/checkout/components/cart-summary/cart-item/index.tsx

@@ -4,7 +4,11 @@ import {
   IkasOrderLineItem,
   IkasProductOptionType,
 } from "../../../../../models";
-import { formatDate, formatMoney, useTranslation } from "../../../../../utils";
+import {
+  formatDate,
+  formatCurrency,
+  useTranslation,
+} from "../../../../../utils";
 import CheckoutViewModel from "../../../../../components/checkout/model";
 import { Modal } from "../../modal";
 
@@ -159,19 +163,17 @@ export const CartItem: React.FC<Props> = observer(
             {!!cartItem.overridenPriceWithQuantity && (
               <span className={styles.GrayPrice}>
                 {!!adjustmentTotal
-                  ? formatMoney(cartItem.finalPriceWithQuantity, currencyCode)
-                  : formatMoney(
-                      cartItem.overridenPriceWithQuantity,
-                      currencyCode
-                    )}
+                  ? cartItem.formattedFinalPriceWithQuantity
+                  : cartItem.formattedOverridenPriceWithQuantity}
               </span>
             )}
             {!!adjustmentTotal
-              ? formatMoney(
+              ? formatCurrency(
                   cartItem.finalPriceWithQuantity - adjustmentTotal,
-                  currencyCode
+                  currencyCode,
+                  cartItem.currencySymbol
                 )
-              : formatMoney(cartItem.finalPriceWithQuantity, currencyCode)}
+              : cartItem.formattedFinalPriceWithQuantity}
           </div>
         </div>
       </div>

package/src/components/checkout/components/cart-summary/index.tsx

@@ -5,7 +5,7 @@ import _sortBy from "lodash/sortBy";
 import InputWithButton from "../input-with-button";
 import NotificationBox from "../notification-box";
 import CheckoutViewModel, { CheckoutStep } from "../../model";
-import { formatMoney, useTranslation } from "../../../../utils";
+import { formatCurrency, useTranslation } from "../../../../utils";
 import { CartItem } from "./cart-item";
 import { FormItem } from "../form-item";
 import { FormItemType } from "../form-item/model";
@@ -95,9 +95,13 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
             <div className={styles.Left}>{t("checkout-page:summary")}</div>
             <div className={styles.Price}>
               <span className={styles.PriceText}>
-                {`${formatMoney(vm.finalPrice || 0, checkout.currencyCode)} (${
-                  checkout.items.length
-                } ${t("checkout-page:cartItemProduct")})`}
+                {`${formatCurrency(
+                  vm.finalPrice || 0,
+                  checkout.currencyCode,
+                  checkout.currencySymbol
+                )} (${checkout.items.length} ${t(
+                  "checkout-page:cartItemProduct"
+                )})`}
               </span>
               <span className={arrowDownClasses}>
                 <SVGArrowDown />
@@ -132,7 +136,7 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               )}
               <InfoRow
                 label={t("checkout-page:subtotal")}
-                value={formatMoney(checkout.totalPrice, checkout.currencyCode)}
+                value={checkout.formattedTotalPrice}
                 tooltipText={t("checkout-page:subtotalTooltip")}
               />
               {!!checkout.shippingLines?.length && (
@@ -140,10 +144,7 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                   label={t("checkout-page:cartShippingTitle")}
                   value={
                     checkout.shippingTotal
-                      ? formatMoney(
-                          checkout.shippingTotal,
-                          checkout.currencyCode
-                        )
+                      ? checkout.formattedShippingTotal
                       : t("checkout-page:free")
                   }
                 />
@@ -151,15 +152,16 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               {!!checkout.totalTax && !!vm.customizationProps?.showTax && (
                 <InfoRow
                   label={t("checkout-page:cartTaxTitle")}
-                  value={formatMoney(checkout.totalTax, checkout.currencyCode)}
+                  value={checkout.formattedTotalTax}
                 />
               )}
               {!!vm.installmentExtraPrice && (
                 <InfoRow
                   label={t("checkout-page:cartInterest")}
-                  value={formatMoney(
+                  value={formatCurrency(
                     vm.installmentExtraPrice,
-                    checkout.currencyCode
+                    checkout.currencyCode,
+                    checkout.currencySymbol
                   )}
                 />
               )}
@@ -193,7 +195,11 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                 <div className={styles.Title}>{t("checkout-page:total")}</div>
               </div>
               <div className={styles.TotalPrice}>
-                {formatMoney(vm.finalPrice || 0, checkout.currencyCode)}
+                {formatCurrency(
+                  vm.finalPrice || 0,
+                  checkout.currencyCode,
+                  checkout.currencySymbol
+                )}
               </div>
             </div>
 
@@ -273,7 +279,11 @@ const Adjustments: React.FC<CommonProps> = observer(({ vm }) => {
             <div className={styles.Value}>
               <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
               <span>
-                {formatMoney(adjustment.amount, vm.checkout.currencyCode)}
+                {formatCurrency(
+                  adjustment.amount,
+                  vm.checkout.currencyCode,
+                  vm.checkout.currencySymbol
+                )}
               </span>
             </div>
           </div>
@@ -304,7 +314,11 @@ const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
               <div className={styles.Value}>
                 <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
                 <span>
-                  {formatMoney(adjustment.amount, vm.checkout!.currencyCode)}
+                  {formatCurrency(
+                    adjustment.amount,
+                    vm.checkout!.currencyCode,
+                    vm.checkout!.currencySymbol
+                  )}
                 </span>
               </div>
             </div>
@@ -318,7 +332,13 @@ const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
             </div>
           </div>
           <div className={styles.Value}>
-            <span>{formatMoney(gpl.price, vm.checkout.currencyCode)}</span>
+            <span>
+              {formatCurrency(
+                gpl.price,
+                vm.checkout.currencyCode,
+                vm.checkout!.currencySymbol
+              )}
+            </span>
           </div>
         </div>
       ))}
@@ -410,7 +430,11 @@ const Coupon: React.FC<CouponProps> = observer(
           <div className={styles.Value}>
             <span>{adjustment?.type === "DECREMENT" ? "- " : ""}</span>{" "}
             <span>
-              {formatMoney(adjustment?.amount || 0, vm.checkout.currencyCode)}
+              {formatCurrency(
+                adjustment?.amount || 0,
+                vm.checkout.currencyCode,
+                vm.checkout.currencySymbol
+              )}
             </span>
           </div>
         )}

package/src/components/checkout/components/form-item/index.tsx

@@ -7,6 +7,7 @@ import styles from "./style.module.scss";
 
 import { useTranslation } from "../../../../utils";
 import ReactTooltip from "react-tooltip";
+import { PhoneNumberInput } from "../phone-number-input";
 
 export const FormItem: React.FC<Props> = observer((props) => {
   const { t } = useTranslation();
@@ -108,17 +109,14 @@ export const FormItem: React.FC<Props> = observer((props) => {
             />
           )}
           {vm.type === FormItemType.TEL && (
-            <div></div>
-            // <PhoneInput
-            //   key={props.currentCountryCode || "1"}
-            //   disabled={vm.disabled}
-            //   defaultCountry={props.currentCountryCode}
-            //   placeholder={t("checkout-page:enterPhoneNumber")}
-            //   value={vm.value ? vm.value : ""}
-            //   onChange={vm.onPhoneChange}
-            //   international={true}
-            //   addInternationalOption={false}
-            // />
+            <PhoneNumberInput
+              key={props.currentCountryCode || "1"}
+              disabled={vm.disabled}
+              defaultCountry={props.currentCountryCode}
+              placeholder={t("checkout-page:enterPhoneNumber")}
+              value={vm.value ? vm.value : ""}
+              onChange={vm.onPhoneChange}
+            />
           )}
           {vm.type === FormItemType.TEXT_AREA && <TextArea vm={vm} />}
           {vm.type === FormItemType.SELECT && (

package/src/components/checkout/components/offer-product/index.tsx

@@ -8,7 +8,7 @@ import SVGCross from "../svg/cross";
 import styles from "./style.module.scss";
 import { useTranslation } from "../../../../utils/i18n";
 import { IkasProductVariant } from "../../../../models";
-import { formatMoney } from "../../../../utils/currency";
+import { formatCurrency } from "../../../../utils/currency";
 
 type Props = {
   vm: CheckoutViewModel;
@@ -95,12 +95,13 @@ const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
               <span className={styles.Discount}>
                 {selectedVariant.price.formattedFinalPrice}
               </span>{" "}
-              {formatMoney(
+              {formatCurrency(
                 selectedVariant.price.finalPrice -
                   (selectedVariant.price.finalPrice *
                     (campaignOffer.offer.discountAmount || 100)) /
                     100,
-                vm.checkout!.currencyCode
+                vm.checkout!.currencyCode,
+                vm.checkout!.currencySymbol
               )}
             </div>
             <div className={styles.Actions}>

package/src/components/checkout/components/phone-number-input/get-countries.ts

@@ -1,18 +1,50 @@
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { CountryCode, getCountries as categories } from "libphonenumber-js";
 import compareStrings from "./compare-strings";
 
-import en from "./locale/en";
-
-type CountryType = {
+export type CountryType = {
   value: CountryCode;
   label: string | undefined;
 };
 
-const getCountries = (): CountryType[] => {
+const getUrl = () => {
+  const languages = [
+    "de",
+    "el",
+    "en",
+    "es",
+    "fi",
+    "fr",
+    "it",
+    "nb",
+    "pl",
+    "pt-BR",
+    "pt",
+    "ru",
+    "sv",
+    "tr",
+    "ua",
+    "vi",
+  ];
+
+  let locale = IkasStorefrontConfig.getCurrentLocale();
+
+  if (!languages.some((language) => language === locale)) {
+    locale = "en";
+  }
+
+  return `https://cdn.myikas.com/sf/static/locale/country/${locale}.json`;
+};
+
+const getCountries = async (): Promise<CountryType[]> => {
+  const url = getUrl();
+  const response = await fetch(url);
+  const lang = await response.json();
+
   return categories()
     .map((country) => ({
       value: country,
-      label: en[country],
+      label: lang[country],
     }))
     .sort((a, b) => compareStrings(a.label, b.label));
 };

package/src/components/checkout/components/phone-number-input/index.tsx

@@ -6,8 +6,7 @@ import parsePhoneNumber, {
   getCountryCallingCode,
   parseIncompletePhoneNumber,
 } from "libphonenumber-js";
-
-import getCountries from "./get-countries";
+import getCountries, { CountryType } from "./get-countries";
 
 import styles from "./style.module.scss";
 
@@ -19,17 +18,20 @@ type Props = {
   onChange: (value: string) => void;
 };
 
-const countries = getCountries();
+const DEFAULT_COUNTRY = "TR";
 
 export const PhoneNumberInput: React.FC<Props> = observer(
   ({ defaultCountry, disabled = false, placeholder, value, onChange }) => {
+    const [countries, setCountries] = React.useState<CountryType[]>([]);
     const [activeCountry, setActiveCountry] = React.useState(
-      defaultCountry as CountryCode
+      (defaultCountry as CountryCode) || DEFAULT_COUNTRY
     );
     const [formatedValue, setFormatedValue] = React.useState("");
 
     React.useEffect(() => {
-      let countryCode = (defaultCountry as CountryCode) || "TR";
+      fetchCountries();
+
+      let countryCode = activeCountry;
 
       if (value) {
         const parsedPhoneNumber = parsePhoneNumber(value);
@@ -46,6 +48,11 @@ export const PhoneNumberInput: React.FC<Props> = observer(
       setActiveCountry(countryCode);
     }, []);
 
+    const fetchCountries = async () => {
+      const categories = await getCountries();
+      setCountries(categories);
+    };
+
     const onValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const phoneNumber = formatPhoneNumber(event.target.value);
       setFormatedValue(phoneNumber);
@@ -76,9 +83,7 @@ export const PhoneNumberInput: React.FC<Props> = observer(
     };
 
     const getImageSrc = () => {
-      return `https://cdn.myikas.com/sf/assets/flags/3x2/${
-        activeCountry || "TR"
-      }.svg`;
+      return `https://cdn.myikas.com/sf/assets/flags/3x2/${activeCountry}.svg`;
     };
 
     return (
@@ -88,14 +93,14 @@ export const PhoneNumberInput: React.FC<Props> = observer(
             <div className={styles.Flag}>
               <img
                 className={styles.FlagImage}
-                alt={activeCountry || ""}
+                alt={activeCountry}
                 src={getImageSrc()}
               ></img>
               <div className={styles.Arrow}></div>
             </div>
             <select
               className={styles.Select}
-              value={activeCountry || ""}
+              value={activeCountry}
               onChange={onCountryChange}
               disabled={disabled}
             >

package/src/components/checkout/index.tsx

@@ -7,7 +7,7 @@ import ReactTooltip from "react-tooltip";
 import CheckoutViewModel, { CheckoutStep } from "./model";
 import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
 import { IkasCheckout } from "../../models/data/checkout";
-import { formatMoney, useTranslation } from "../../utils";
+import { formatCurrency, useTranslation } from "../../utils";
 
 import CheckoutStepInfo from "./steps/step-info";
 import { CheckoutStepShipping } from "./steps/step-shipping";
@@ -443,9 +443,10 @@ const StepSummaryShipping: React.FC<CommonProps> = observer(({ vm }) => {
             {" / " +
               (vm.checkout.shippingLines[0].price === 0
                 ? t("checkout-page:free")
-                : formatMoney(
+                : formatCurrency(
                     vm.checkout.shippingLines[0].price,
-                    vm.checkout!.currencyCode
+                    vm.checkout!.currencyCode,
+                    vm.checkout.currencySymbol
                   ))}
           </span>
         </React.Fragment>

package/src/components/checkout/model.ts

@@ -53,10 +53,6 @@ import {
   RetrieveInstallmentInfoQueryParams,
   SaveCartInput,
 } from "@ikas/storefront-api";
-import { OrderAddressCountryInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressCountryInput";
-import { OrderAddressCityInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressCityInput";
-import { OrderAddressStateInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressStateInput";
-import { OrderAddressDistrictInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressDistrictInput";
 
 const NUMBER_ONLY_REGEX = /^\d+$/;
 const MAX_CARD_NUMBER_LENGTH = 16;
@@ -444,7 +440,10 @@ export default class CheckoutViewModel {
       input = await this.inStockDeliveryInputData(input);
     }
 
-    if (this.step === CheckoutStep.INFO) {
+    if (
+      this.step === CheckoutStep.INFO ||
+      this.step === CheckoutStep.SHIPPING
+    ) {
       input.billingAddress = null;
     }
 
@@ -480,13 +479,11 @@ export default class CheckoutViewModel {
       inStoreLocation.address
     ) {
       inputData.shippingAddress.country = inStoreLocation.address
-        .country as OrderAddressCountryInputData;
-      inputData.shippingAddress.city = inStoreLocation.address
-        .city as OrderAddressCityInputData;
-      inputData.shippingAddress.state = inStoreLocation.address
-        .state as OrderAddressStateInputData;
+        .country as any;
+      inputData.shippingAddress.city = inStoreLocation.address.city as any;
+      inputData.shippingAddress.state = inStoreLocation.address.state as any;
       inputData.shippingAddress.district = inStoreLocation.address
-        .district as OrderAddressDistrictInputData;
+        .district as any;
       inputData.shippingAddress.postalCode = inStoreLocation.address.postalCode;
       inputData.shippingAddress.addressLine1 =
         inStoreLocation.address.address || "";

package/src/components/checkout/modelMasterPass.ts

@@ -6,7 +6,7 @@ import { useTranslation } from "../../utils/i18n";
 import { IkasBaseStore } from "../../store";
 import { IkasCheckout, IkasPaymentGateway } from "../../models";
 import { MasterPassOperationTypeEnum } from "@ikas/storefront-api";
-import { getMasterpassRequestToken } from "@ikas/storefront-api";
+import { getMasterPassRequestToken } from "@ikas/storefront-api";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 
 const isServer = typeof localStorage === "undefined";
@@ -437,7 +437,7 @@ export default class MasterPassModel {
     operationType: MasterPassOperationTypeEnum;
     phoneNumber: string;
   }) => {
-    const response = await getMasterpassRequestToken({
+    const response = await getMasterPassRequestToken({
       cartId,
       paymentGatewayId,
       operationType,

package/src/components/checkout/steps/step-payment/payment-gateways/index.tsx

@@ -12,7 +12,7 @@ import { CreditCardForm } from "../../../components/credit-card-form";
 import { Installments } from "./installments";
 import SelectBox from "../../../components/select-box";
 import styles from "./style.module.scss";
-import { formatMoney, useTranslation } from "../../../../../utils";
+import { formatCurrency, useTranslation } from "../../../../../utils";
 import SVGExternal from "../../../components/svg/external";
 import SVGMasterCard from "../../../components/master-pass/payment-gateway/svg/master-card";
 import { IkasPaymentGatewayAdditionalPrice } from "../../../../../models/data/payment-gateway/additional-price";
@@ -50,7 +50,11 @@ export const PaymentGateways: React.FC<Props> = observer(({ vm }) => {
 
     return `${
       ap.amountType === IkasPaymentGatewayTransactionFeeType.AMOUNT
-        ? formatMoney(ap.amount, vm.checkout.currencyCode)
+        ? formatCurrency(
+            ap.amount,
+            vm.checkout.currencyCode,
+            vm.checkout.currencySymbol
+          )
         : " %" + ap.amount
     }${
       ap.type === IkasPaymentGatewayAdditionalPriceType.DECREMENT

package/src/components/checkout/steps/step-payment/payment-gateways/installments/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { observer } from "mobx-react-lite";
 import CheckoutViewModel from "../../../../model";
 
-import { formatMoney, useTranslation } from "../../../../../../utils";
+import { formatCurrency, useTranslation } from "../../../../../../utils";
 import styles from "./style.module.scss";
 import { Toggle } from "../../../../../../components/checkout/components/toggle";
 
@@ -33,17 +33,19 @@ export const Installments: React.FC<Props> = observer(({ vm }) => {
               </div>
               {ip.installmentCount !== 1 && (
                 <div className={styles.InstallmentPrice}>
-                  {formatMoney(
+                  {formatCurrency(
                     ip.installmentPrice!,
                     vm.checkout!.currencyCode,
+                    vm.checkout!.currencySymbol
                   )}
                 </div>
               )}
             </div>
             <div className={styles.Price}>
-              {formatMoney(
+              {formatCurrency(
                 ip.totalPrice!,
                 vm.checkout!.currencyCode,
+                vm.checkout!.currencySymbol
               )}
             </div>
           </div>